Script Use and Augmentation

In this unit, we are asked to find some JavaScript code that someone else has written and incorporate it seamlessly and effectively into our site.

What I wanted to add to my site is a hidden navigation bar for users with devices that have a maximum width of 767px, which is the maximum width of mobile devices. The hidden menu has an icon that if you click on it the whole menu appears as a list of links to other webpages. At first, the menu icon appears as three vertical bars, called Hamburger fold-out menu. Then, when the user clicks on it the 3 lines change to an X shape, and when the X is clicked the menu icon goes back to a Hamburger icon, also the links are hidden again.

I looked up W3 schools website and I found how to make a Hamburger menu icon using HTML, CSS, and JavaScript. The page that shows the method is here.

The only JavaScript that they used was a function that has one line of code which is:

function (x) {

     x.classList.toggle("change");
}

x is the parameter that represents the element that we want to manipulate, in this case is the div element that hosts the three horizontal bars. The property classList is a list of class names of child nodes of a DOM element. And, the method toggle(), toggles between adding and removing a class name from an element. The argument in the method toggle() is the class name that we want to either add or remove.

The script I found is embedded in the HTML file, and my menu is also present on every page of the website, which means I have to embed the script in each HTML file. But, that is not what I want to do I want to create a single JavaScript file and link it to each page.

To do that, first, I tried the method provided on the W3 schools website. This means that I had to modify my HTML file, specifically the navigation part. I added a div element called sandwichbars, Hamburger icon menu, and it hosts three divs each one represents a horizontal bar. Then, the next thing I needed to modify was the CSS file. In this file, I needed to add classes for the newly added elements and delete old classes that aren't needed anymore.

Now, the menu works as intended but there were some issues. For example, the menu would appear as a list for half a second then disappears. This was not acceptable to me. The problem was that the task was split between CSS and JavaScript manipulations, and that's what made the menu act in an unexpected way. Another issue is that when the menu appears, and the X sign is on now when I click the X sign the menu stays displayed on the screen.

My solution was to write my own script that handles all the tasks the menu needs to make it work as intended. On the CSS side, I wrote the classes that handle the effects and made them available for the script to manipulate the elements with.

NOTE: One thing to mention while working with this task is that CSS file is loaded first then JavaScript is second. I don't know if it is because the order in which the links in the HTML file are or something else.

From that one line of script on the W3 shools I wrote about 40 lines (160 lines including comments and other stuff). The script acts as a cycle of event handling and element manipulation. I said a cycle because when the menu is hidden the script listens to a click and shows the menu and when the menu is showed the script also listens to clicks and hides the menu.

I tried to use suitable names for each variable to make the code self-documenting, so without any comments, it would still be easy to read the code. Also, I made a couple of functions that were to be used many times to reduce the amount of line code.

My website link is here. To see the Hamburger menu effect please use a device with a maximum width of 767px (smartphone).

Also, I have included the JS file here (called snadwichbars.js), my CSS file, a page from my website to see how the menu is done on HTML, and my website zipped file.