Lab 7 - Dark Grid
I am the terror that flaps in the night! - Responsive mode: Dark 🦆
Categories:
less than a minute
Dark Grid
- Continue from where you left off last lab.
- Create a new file called
dark.css - edit your
index.htmlto include a link todark.cssin theheadof the document just before it links todebug.css - edit
dark.csssuch that if the user has a “dark” preference, the page will be styled with a dark theme. - add a javascript file called script.js and a script tag to the bottom of the body of the html file that loads
script.js. - in
script.js, add an event listener such that when the user clicks any of the 3 nav items, the page will render with the selected color scheme.- most often, dynamic styling is best implemented via (a) defining style rules for corresponding classes in css and (b) adding/removing classes to the necessary elements dynamically
Last modified August 11, 2024: moved a bunch of things for archival purposes (6652bbe)