Lab 6 - Grids

In this week’s prep, you completed a responsive grid design that uses two “breakpoints” to create multiple layouts for a page. In this lab, you will continue with this general code structure while adding more layout structure to the page. You will also add support for alternate color schemes, including dark mode.

Starting Code

Start by extracting provided source code and opening the files in your preferred text editor:

• lab6.zip

For this lab, you will need to modify all CSS and JavaScript files and submit your work to Gradescope. (Do not submit the index.html file.)

Tiny and Print Grids

Throughout this lab, we will refer to multiple breakpoint sizes by the following names:

• Large screens: width of 1000px or more
• Medium screens: width of 700px to 999px
• Small screens: width of 500px to 699px
• Tiny screens: width of 499px or less

The provided source code provides an overall structure for small and medium (or larger) screens based on the prep. But it’s a jumbled mess on tiny screens. Your first task is to add support for tiny screens. Edit the layout.css to add this support:

1. Add a new media query for tiny screen sizes
   • Show the header, nav, main, and footer in a column
   • Do not show either of the aside elements
2. Make the nav list elements into a flex-box to control their layout
   • On tiny and small screens, the list should be in a row with space around the items
   • On medium and larger screens, it should be a column centered horizontally, along with some spacing below each item
3. Add another media query based on print formatting
   • Show only the header, main, and footer in a column
   • Both header and footer should span the full width
   • Make main occupy one column that gets 90% of the width on the right
   • Do not show the nav or either aside

When you are finished, the tiny layout should have match these top and bottom images. For the print formatting, you’ll need to complete the next section to confirm it is laid out correctly.

Nested Layout

We now have a general structure for the whole page, but now we want to create a structure for the main content. To do this, we’ll create a grid inside a grid. Open cards.css for this part of the lab.

1. Create a mapping of main elements to grid-areas. You will need separate mappings for the h2 and all six of the articles.
2. Make the main element into a grid. At this point, if you check the tiny and small layouts, the content becomes a jumbled mess. Create a media query for these layouts to restore the original structure, with the h2 element at the top followed by the six articles in a column.
3. Create a 2-column layout for medium screens. Both columns should be the same width.
   • You can confirm your medium grid matches the expected version.
4. Similarly, create a 3-column layout for large screens.
   • Again, confirm your large grid matches the expected version.
5. If you try to print the page again, you’ll see that making the main into a grid messed up that layout again.
   • Create a print media query to convert the main into a flex-box.
   • Make the articles into a column with space between them vertically.
   • Eliminate the vertical padding inside the h3 and p elements in the articles.
   • Remove the main h2 from the display.
   • Confirm that your print formatting looks correct.

Dark and Stealth Mode

Now that we’ve got the layout, let’s take advantage of a popular feature of modern browsers: dark mode! For this, we’re going to start in dark.css. We’re also going to (intentionally) break accessibility rules to make the text harder to read. Let’s call this “stealth mode”.

1. Open the index.html and add class="stealth" to the body.
2. In dark.css, create a new rule for the .stealth class that makes the text use the light color variable.
   • Reloading the page should make it look like an unreadable mess.
3. Get rid of the class="stealth" from the body so we can move on to dark mode.

Dark mode depends on a prefers-color-scheme: dark media query. (You can also make one specifically for light mode.)

1. Add a dark mode media query that changes the color scheme based on the comments in the file.
   • In your browser, you will need to change your color scheme preferences. The easiest way to test this is to use Firefox. Open the inspector and click on the icon that looks like a crescent moon to turn dark mode on and off.
   • Check your progress again to make sure it looks right.
2. While we’re at it, add rules for the .stealth class inside the dark mode media query.
   • After adding the class="stealth" back to your index.html body, you can check your progress again.

Event Listeners

So far, we’ve been relying on CSS media queries for everything. For the last part here, let’s use JavaScript to change some things. Open script.js to make the following changes:

1. Get the #mode-print element and add a click event listener.
   • Calling window.print() will pull up the system dialog to print the page, but…
   • We cannot just put window.print as the event listener’s callback function. Instead, create an arrow function that takes no parameters and calls window.print(). (I.e., () => window.print())
2. Similarly, add an event listener for the #theme-stealth button.
   • In the body of this function (you can either create a callback function or use another arrow) add/remove the string " (Stealth Mode)" to the header h1 element.
   • Similarly, add/remove the .stealth class to the body.

Going Further

Now that we’re starting to use JavaScript to manipulate the DOM, let’s try one more thing: make stuff disappear.

1. In script.js, get all of the article h3 elements.
2. Loop through each article title and add a click event listener.
   • Use an arrow function like before, but this time use a parameter to get the event. You can call it whatever you want, but it’s common to use (e) => { ... } or (ev) => { ... }.
   • In the event model, the thing that you clicked on is the event’s “target”. We can access this using e.target in the arrow function.
   • From the target (the h3 element clicked), traverse the DOM tree to get the p element that immediately follows it. There are a couple ways to do this. You could use parentNode on the h3 to get the parent, then access childNodes to get the appropriate child. You could also just use nextElementSibling on the h3 node to get the sibling.
   • Once you have the p element (you can print it using console.log to make sure), toggle its hidden property.

If you click on the Main and Sixth titles, you should see these results.