Page 10
Learn from making projects and just use tuts to support you making them.
Project 1 - jS menu
The idea is to keep the menu in one js file and have it written into one page. Then you can edit the menu and all pages will be updated simultaneously.
This is not hard to do:
In the js file use: document.getElementById('topmenu').innerHTML =
followed by the string of
code of the HTML menu. Here I’ve named the id of the element containing this menu topmenu.
Then add a script tag linking to this js file at the bottom of the page.
However a problem arises when you want a menu button to appear different to denote the current page. Using a
CSS attribute selector like a[href="#"]
requires the the hash symbol be written into the the
corresponding menu item for the current page.
The page file name can be got like so:
var path = window.location.pathname; var page = path.split("/").pop(); console.log( page );
See: Stack overflow
But what happens next? The kind of statement needs to run through the list of the menu's hrefs and if the page's filename equals the href of the menu item replace the namew with #.
Project 2 - displaying the page date
Having the date a page was created or more usefully it was last updated seems a key thing to have. This is especially true where anything with computers is involved because things are changeing so quickly that things can soon go out of date.