Add Bootstrap classes to SVG elements

1

I created a simple page to illustrate a principle in problem solving and creativity … the old thing about “thinking outside the box” using the nine dots puzzle.

I’ve got the SVG and some very minimal JS working for this. But the rest of the page around it looks pretty horrible. (Yeah! I’m more of a coder and backend guy here; not a web designer).

Here it is: CodePen: Connect the Dots and on my own web site: There is NO Box

What I’d love is for some general suggestions on cleaning up looks of the page in Bootstrap, and, especially, in making the “[Show Solution]” an “[Hide Solution]” elements within my SVG actually look like Bootstrap buttons. But I’m just not getting it. Can I use something like jQuery’s .addClass() without including jQuery? Can I use my existing show and hide elements (as extracted with show = document.getElementById(‘show’);?

2

To style the solution text the way you want, I would take out the text elements and add a <button> outside of the SVG. You can add the Bootstrap btn and btn-primary classes to give it the look. Then, bind the showSolution handler to the button instead of the SVG. This will require a little extra code, since buttons on the DOM trigger a page render by default. Event handlers always pass an event object to their handler, and this event has a method preventDefault that is used in just this situation.

function showSolution(event) {
     event.preventDefault(); // It's that simple

     if (toggle) {
        svg.appendChild(useElement);
/* etc */
}

A couple of general front-end development notes:

  • You’ve got some JS and CSS inline with your markup. This is almost always an antipattern (some people think this is OK when using front end libraries like React, but I still disagree with them and they will one day be vanquished). Define all styles in a stylesheet. Define all JavaScript in script files. Your event handlers can be assigned in the script file and it will be much less mysterious to other developers.

  • You never need jQuery, or any other library for that matter. It’s 100% JavaScript, so there are ways of getting the same functionality in vanilla JS if you don’t want to load extra scripts. For jQuery in particular, check out YouMightNotNeedjQuery.

  • In HTML, the markup used should be semantic. That is, it should simply have the intended end result, but it should accurately describe what is being rendered. This is mainly for the benefit of screen readers, but also for anyone else reading your code. CSS classes should be the same way. I mention this because your site’s title is an <h1> wrapped in a <div> with the Bootstrap class of btn-info.

The best thing you can do to prettify your site is to restructure the code. CodePen is a great place to do this. Get rid of the <html>, <head>, <body>, <script>, and <style> tags. Move the styles and JavaScript to their own sections. Then, you’ll be able to visualize the site much better, and then the Bootstrap docs will make more sense. This will be easy to translate to files you can put up on your site.

1 Like