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.html
to include a link todark.css
in thehead
of the document just before it links todebug.css
- edit
dark.css
such 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)