Labs

1 -

Success!

You have published an HTML file. This file should appear in w3stu.cs.jmu.edu/username/cs343/lab1/.

Here is a link to the text file.

Now link to the other subdirectory.

2 - Lab 1 - File Publishing and Validation

In this lab, you’ll practice using the web server infrastructure that will be available throughout this course.

Background

Throughout this semester, you will frequently need to transfer data to w3stu.cs.jmu.edu, the JMU CS web server for students. (Note that w3stu is the same as stu. When accessing your pages through a web browser, you will use w3stu; when transferring files, you will use stu.) As a CS student, you already have an account.

The easiest way to get started transferring files is to use Cyberduck, a free, cross-platform, open-source file transfer application. From that site, download the program on your laptop or wherever you will be doing your development work.

Once you have Cyberduck installed, start by clicking on “Open Connection” in the upper-left.

You should connect to stu.cs.jmu.edu using the sftp:// protocol, setting your username and password as appropriate.

The first time you connect to stu, you will get a warning about an “Unknown fingerprint”. Go ahead and click “Allow” (you can also check the “Always” box to avoid seeing this again).

Once connected, Cyberduck should default to opening your home folder on stu. If not, you can navigate back by going to /cs/home/stu/your_eid.

You should see a folder named “www”. This is actually a shortcut (symbolic link) that links to /cs/www/stu/your_eid. Double-click on “www” to navigate there. It should initially be empty, unless you have previously published something here.

Any file that you drag-and-drop into this directory will be published on w3stu automatically. If you copy a file called foo.html into this directory, you can access that file by pointing a web browser to the URL https://w3stu.cs.jmu.edu/your_user_name/foo.html. Within FileZilla, you can also create subdirectories to organize your site’s pages.

Note: If you are comfortable with working on the command line, you might try doing this lab using something like scp or rsync. You can find plenty of tutorials for either by searching. The scp command line would look something like:

$ scp index.html <i>your_user_name</i>@stu.cs.jmu.edu:~/www/index.html

File Publishing

Your first task is to download and publish the following files based on the naming conventions shown below. Right-click on each to save a copy to the desktop on your computer.

1. index.html
2. data.txt
3. linked.html

Step 0: Edit index.html

Now that you have saved the files locally, edit them. Open the index.html file in a text editor and change your name in the <meta> tag that indicates the “author” of the file.

Step 1: Publish index.html

Use the aforementioned file transfer app to transfer the index.html file so that it can be accessed at the URL https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/. Note that you will need to create the cs343 directory in your www directory and lab1 in cs343.

Test this step by going to the URL in your web browser. If you click on any of the links, they should not work (giving you a 404 error).

Step 2: Publish the other files

Transfer the data.txt file so that it is in the same directory as the index file. Click on the "text file" link from the index file and confirm that you can access it.

Transfer the linked.html file, but you'll need to create a subdirectory and rename the file in the process. Once you've transferred the file, it should be in the www/cs343/lab1/linked subdirectory and renamed as index.html.

When you are finished, you should have the following files and directory structure, and all links in the index file should work:

• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/index.html
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/data.txt
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/linked/
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/linked/index.html

Validation and Minimization

Throughout the semester, your lab and project submissions need to successfully pass the W3C Nu HTML Validator. The provided index.html file does not pass. Copy and paste the link to your published version and fix the error based on the feedback there. Do the same for the lab1/index.html file. Note that there is one error there (use of <tt>) that cannot be fixed based on what we have discussed so far.

Submission

1. Download this file (named site.txt) and edit it with vscode. You should only need to replace your_EID with your JMU EID.
2. Submit your modified version of the site.txt file to the Lab 1 assignment on Gradescope.

Acknowledgements

You may have noticed that the activity includes a specific instructor’s name and a particular semester. Likely these values do not match your professor/semester. While the associated autograder and likely parts of the instructions here have been updated since those dates, citing our sources and paying homage to the efforts of those who came before us is one of the best parts of participating in the teach world. Recognizing that there have been many other to contribute since, for his efforts on the earlier versions of this activity, we’d like to send HUGE THANKS TO DR. MICHAEL KIRKPATRICK!

3 - Lab 2 - Document Structure with HTML

In this lab, you will be formatting a text document as an HTML version of this screenshot. Note: All of the text content is provided in the starter code below. You just need to format markup the document as HTML.

Starting Code

Use the provided lab2.txt to avoid copying and pasting large chunks of text from the PDF. Lines beginning with # are intended as guidelines, and should be converted into HTML comments.

<!-- as a reminder HTML comments begin with those 4 characters at the beginning of this code sample and end with the following 3 -->

• lab2.txt
• JMU-Logo-RGB-horiz-purple.png

Step 1: Basic HTML Documents

Your task is to add HTML elements to the provided text file to create the document structure. Note that the PDF was generated using a word processor and we are only using HTML. As such, some appearances (fonts, spacing, etc.) may not be exactly the same. You should try to make it as close as possible, however.

For this step, you need to have a correctly formatted header to create a valid HTML file. You also need to format all paragraphs and lists correctly.

You could approach this either by:

1. renaming your downloaded copy of the provided lab2.txt to index.html and working directly there, or
2. creating a new file called index.html and copying selections from lab2.txt into it as you proceed through the lab.

Step 2: HTML Document Structure

Once you have all the previous components, you need to add the remaining HTML elements, such as the title, subtitle, and horizontal lines. You also need to add the JMU logo image at the bottom. The only things that should be missing at this point are the portions controlled by JavaScript.

Step 3: JavaScript Fundamentals

Once you have added the required HTML elements, you will need to add JavaScript code in a few places. Each of these will require a separate <script> tag:

1. Just after the (opening) <body> tag, create the variables as described in the lab2.txt file.
2. Use one variable as a Boolean to determine whether or not to show the JMU logo image at the bottom.
3. Use the other variables as Strings that contain both the level 3 heading tags and the corresponding text.

Submission

In addition to the formatting of your source code itself (which you should ensure vscode has done, using the defaults), your submission must also validate cleanly with no errors or warnings.

Note that publishing your file is not necessarily to test validation. The easiest way to test validation is to install a browser extension/add-on. Search in your browser’s extension tool for “HTML Validator” (by Marc Gueury, you should already have this if you completed the Dev Setup). You can also copy and paste the HTML into the validator itself (selecting the “text input” from the “Check by” drop-down list).

You will submit your index.html file to Gradescope for submission.

4 - Lab 10 - Card Creator

Greeting Cards

In this (two-part) lab, you will write a tiny app to create greeting cards that you can send to your friends, family, and more! You will need the knowledge you’ve built in the past two preps (forms and localStorage).

For this lab, you will submit the assignment individually (but feel free to collaborate with others) via GitHub Classroom.

Getting Started

1. Accept the assignment in GitHub Classroom using your instructor-provided link (in Canvas)
2. Clone the newly-created repository on your computer
3. Open the repository folder in VS Code
4. Look over the provided code to get a feel for what it does and where you need to add your own

Creating the Form

We’ve provided the code and styles for the “preview” area of the page, but you’ll need to create a form and provide the functionality for a user to specify what their card’s title, message, to, from, etc. should be. Follow the image and the instructions below:

In card-creator.html:

1. Create an HTML form inside the form-area
   • Give the form the class card-form
2. You will need four text inputs and a textarea, each with its own label
   • Put each group of label plus input in its own div element
     • Give this div a class of form-group
     • For example:

       <div class="form-group">
         <label ... > ... </label>
         <input ... />
       </div>
       

   • Make sure to include placeholder text
   • You’ll want to make sure each element has a name and id
3. Add two buttons at the end of the form
   • Put all buttons inside a div with the class form-buttons
   • The preview button should have type="button"
   • The save button should have type="submit"
   • Make sure they have ids, so you can access them easier in a script

Adding the Functionality

In the scripts/createcard.js file, write some JavaScript to do the following:

1. When the “preview” button is clicked, you should set the text in all the appropriate spans to the value of the corresponding control in the form.
2. When the “save” button is clicked, you should add the card to an array and save the array of cards to localStorage:

   • You should start by loading the existing array from localStorage with the key cards

     • If there doesn’t exist an entry with the key, create a new array and assign it to a variable
     • If there does exist an entry with the key, you should parse it and assign it to a variable

   • Create a new JavaScript object (aka map/dictionary) to represent the current card

     • It should have five properties: to, from, title, subtitle, and message
     • The properties should be set to the corresponding value from the form

   • Add the new object to the end of the array

   • Store the array in localStorage to the entry with the key cards, overwriting any existing entry

     • Don’t forget: localStorage only lets you store strings, so you’ll need to “stringify” the array!

   • Saving multiple cards should result in an array containing all the cards. You can use the developer console in Chrome/Edge and Firefox to check if you’re doing this correctly:

     

Hints

• localStorage.setItem("cards", ...) will completely replace the existing item in localStorage (meaning you will override the previous array of cards)
  • Thus, you need to make sure to load the existing array of cards with localStorage.getItem("cards"), push a new item to that array, and then save the whole array back to localStorage
• Don’t forget that localStorage stores values as strings
  • To convert an array or object to a string: var a_string = JSON.stringify(an_object);
  • To convert a string back to an array or object: var an_object = JSON.parse(a_string);

Submission

Commit and push your code to GitHub.

5 - Lab 11 - Card Viewer

Greeting Cards, Part 2

In the previous lab, you made a page that lets users create greeting cards and save them to localStorage. But we need a way to view the cards, edit them, and delete them (read, update, and delete in the CRUD operations).

Let’s create a card viewer that displays the data for each card, with a way to edit and delete each one.

Getting Started

1. Start with your code from the previous lab
   • The assignment is available in GitHub Classroom using your instructor-provided link (in Canvas)
   • Let your instructor know if you do not have a working card-creator.html or createcard.js

Open up the card-viewer.html and scripts/viewcards.js files. You will be working with these for the lab.

Loading and Looping

First, we will need to load the array of cards from localStorage so that we can loop over each card and display it.

1. In viewcards.js, use localStorage to get the item with the key "cards" and convert it back to an array. Store this to a variable or constant called cards.

   • Don’t forget to use JSON.parse(...)!

2. Next, use a “traditional” for loop to loop over the array (using indices – this will be important later!)

   • Also important: use let instead of var for your variables
   • Recommended: save cards[i] to a variable called card to make it easier to reference

3. Inside the loop, use console.log(...) to print the current card object in the iteration.

4. Test your page in the browser and open the developer console

   • FYI, you should always be testing your code like this to make sure there are no JavaScript errors!

5. You should see something like this:

   

Creating Multiple Cards

The next task you will tackle is to display a card for each item in the array. In the HTML, you will find a <main> element with the id of card-list. All the card displays should be a child of this element.

One way to do this is to create all the elements manually in JavaScript (using document.createElement(...)) to form parts of a card, and then add it to the card list. This, however, is not maintainable. We should be able to define what we want a single card to look like in HTML and CSS and then reuse that code for each card.

The <template> element makes our lives much easier. It lets us write HTML that doesn’t render in the browser, but can be cloned and inserted into our page.

1. First, take a look at this article on using templates: HTML <template> Tag

   1. Look at the HTML for the examples. Do you see where the templates are defined?
   2. We can use document.getElementById() or document.querySelector() to first select the template element
   3. We can then call the .content.cloneNode(true) method on that template, which will return a new Node representing a copy of that template
   4. Then, we can append that copy somewhere on our page

2. Let’s apply the same principle to our card viewer:

   1. In your JavaScript, select the template element and store the reference in a variable named template.
      • (You can do this inside or outside the loop)
   2. Inside the loop, call template.content.cloneNode(true) to create a copy of the template, and then save it to a variable named cardView.
   3. Finally, select the element with the card-list class, and call .appendChild(cardView) on it to add the newly created card to the list.

3. Test your code. You should have multiple cards displayed, one for each card in localStorage:

   

Displaying the Data

Now, we need to populate the newly created cardView with the data from the current card.

Thus, write this code before you call .appendChild(), but after .cloneNode():

1. First, select each of the <span>s that are used to display the card’s text and save them to variables:

   • For example, let titleText = cardView.querySelector(".title-text");
     • (note that we use cardView.querySelector(...) instead of document.querySelector(...) because we only want to search inside the current card view)
   • You should repeat this a total of five times, one for each span.

2. Set each of those <span>’s textContent to the appropriate values from the current card object:

   • Remember that each card is an object, so you can access the attributes directly: e.g., card.title
   • The five attributes are: to, from, title, subtitle, message

3. Test your code. Each card should display its corresponding text:

   

Deleting Cards

Let’s make the delete button work. To do so, we’ll need to do a few things.

1. Continue with your code inside the loop. Make sure that the following lines are still before you call .appendChild()!
2. We need to make the delete button for the current card do something.
   1. First, select the delete button on the cardView (again, use cardView.querySelector(...))
   2. Then, add an event listener of type "click"
   3. For the callback function, write it inside the for loop. You can use either a function declaration or a function expression.
3. When the button is clicked, we want to delete this card. The problem is, how does each delete button know which card its referring to?
   1. In the callback function, write console.log(i).
   2. Test your page and open the developer console. Click on the delete buttons. Notice how each button somehow prints out the corresponding index!
      • How does this work? When we create a function, JavaScript will “save” the state of our variables in something called a closure.
      • If this isn’t working, you may have declared your variables with var instead of let. This is one of the advantages of let. It scopes the variable to the block instead of the function, which lets us keep its current state.
      • If closures scare you, there is an alternative method below
4. Now, in the button’s callback function:
   1. Make the button delete the item in the array at the current index
      • Use the .splice(...) method to remove an item at a given index
   2. Afterwards, save the array of cards back to localStorage
      • Don’t forget to stringify it!
   3. After saving, reload the page by calling location.reload()
      • We do this because, after deleting an item, the indices in the array are no longer valid, so let’s refresh the page and display all the cards again
      • This is easier than trying to keep everything in sync
5. Test your code. You should be able to delete a card and, once the page reloads, it should no longer be displayed.

(If you have time) Making the Cards Editable

Last but not least, let’s make the cards editable. You may have noticed that there’s a contenteditable attribute on each of the <span>s! This makes the element into something that works both as text and an input.

Elements with contenteditable have an event called "input", which is fired whenever a user changes the value of the element.

1. Inside the loop, but still appendChild, let’s create a new function. Yes, right here.

   1. Name the function updateCard()
   2. Inside, you should set each of the current card object’s attributes (to, from, title, subtitle, message) to the content from the corresponding <span>s
      • For instance, card.title = titleText.textContent; or cards[i].title = ...
   3. Afterwards, save the entire array to localStorage again.
      • Don’t forget to stringify it!

2. After the function definition, but still before appendChild, add an event listener for the "input" event to all five <span>s. Use your updateCard function as the callback:

   • E.g., titleText.addEventListener("input", updateCard);

3. Test your code by clicking in one of the fields and editing it. You should see the value change in localStorage:

   

   • If you are having issues, double-check:
     • Make sure you are using either let or const for your variables/constants, not var
     • Make sure you are passing updateCard as an argument, and not accidentally calling it with updateCard()

Alternative to Using Closures

Instead of using closures, you can also “store” the index of each card in the HTML elements themselves! We can create a custom HTML attribute, called a data attribute.

Here’s how that would work instead of closures:

1. On each card view and/or each of the <span>s:
   1. Add a new data attribute called index using JavaScript (aka "data-index" in HTML)
      • Reference the MDN article for examples
   2. Set the value to the current index of the card
2. In your event handlers/callback functions, retrieve the index attribute.
   1. Attributes are stored as strings, so you may need to convert it back to an int
   2. Use this value to specify which card to delete/update

Submission

Commit and push your code to GitHub.

6 - Lab - Bootstrap

Overview

As we begin to look at how to specify the presentation of our webpages using CSS, this sneak peak is intended to help give you a sense of how much can be accomplished with CSS. (We will also write “vanilla” CSS that begins with no third-party code so that you know how these things are accomplished, and importantly how to modify them to suit your specific needs.) In this lab we introduce Bootstrap, but there are many design frameworks out there that provided excellent CSS starting points. For novices especially, design frameworks like Bootstrap are a great way to begin projects you intend to publish because typically the frameworks:

1. are well-documented
2. are well-tested
   1. in multiple browsers
   2. on multiple devices
   3. with many viewport sizes
3. have solved issues novices aren’t even aware of yet
4. have designed for accessibility
5. have designed for responsiveness
6. have designed for usability
7. have designed for performance
8. demonstrate best practices for CSS that works well with semantically-structured HTML (itself a best practice)

Specs

(Following the steps in later sections) Make a web page that has:

1. a responsive navigation bar ("nav bar") at the top,
   • one that has a “Responsive behavior” called a “Toggler” and With a brand name shown on the left and toggler on the right
2. a responsive content area after the nav such that:
   1. when the viewport is at least 768px wide,
      1. the left 2/3 of the content area’s will be the main content area
      2. the remaining right 1/3 of the content area will be an area for aside content
   2. when the viewport is less than 768px wide,
      1. the main content will occupy the full width of its container
      2. the aside content will come after the main and will also occupy the full width of its container

Starting Resources

Code

Bootstrap’s documentation has the perfect starting code for you ready to roll. We recommend you use the (first) code sample from #2 in the Quick start section (for now, you can ignore the other code samples on that page including the second code block in #2).

❤️ Favicon

By now, you’ve seen that most of what goes in an html document’s head is metadata not immediately visible to the visitor, and that the content that will be rendered into the browser’s viewport is in the body. The icon that will appear by default in alongside the site’s title in browsers’ tabs and which will be used in browsers’ histories and bookmarks is often called a favicon.

This wesbos character has put a ton of useful resources on the web. While I appreciate a fun tone as much as the next prof, I think flicking off visitors on entering your site isn’t the way 🫣 I’d’ve done it. Nonetheless, FavFarm is pretty useful. Consider just referencing this example for now:

<link rel="icon" href="https://fav.farm/🕸️">

Placeholders

Placeholder text is often useful when you’re focussed only on the semantic structure and/or presentation of your page, but not yet its content. A common choice is lorem ipsum text (for the curious: there’s always more to learn), which you can grab a small example in vscode by simply typing lorem and accepting the emmet completion (via hitting tab or enter).

There’s also a delightful variety of these generators, e.g.:

for text

🥓 Bacon Ipsum

🧁 Cupcake Ipsum

🚀 Space Ipsum

🧀 Cheese Ipsum

🏴‍☠️ Pirate Ipsum

➕ and 🤪 more

for images

🏞️ Lorem Picsum

Step 1: Begin with the provided resources

1. Start this activity as we generally recommend you start all of them
2. create a file named index.html and paste the code sample from the bootstrap docs (linked above) into your otherwise empty index.html file.
3. paste the provided favicon link into your head (see above).
4. delete the Hello, World heading.
5. make doctype all caps.

Step 2: Add some filler

So that you can see how the content of the page is affected by the subsequent steps,

1. create a main element as the first child of the body element
2. create an h1 with the text content Bootstrap demo as the first child of the main element
3. paste 3+ paragraphs of your favorite lorem ipsum text (each paragraph should be wrapped in a p element) into the main of your document (immediately following the h1).
4. create an aside element as the second child of the body element
5. paste 3 more paragraphs of your favorite lorem ipsum text (each paragraph should be wrapped in a p element) into the aside of your document.

Step 3: Add a nav bar

1. Copy the 2nd example in the Bootstrap Components:::Navbar::Responsive:Toggler, the one described as With a brand name shown on the left and toggler on the right.
2. Paste the copied code the first child of the body in your document (i.e. it should immediately precede the main element you created in the previous step).

Step 4: Add a content area

1. After the close tag of your nav element, let’s add a container for the rest of our page’s content. Paste the following code after the </nav>:

   • <div class="container">
     </div>
     

2. Move both the main and aside elements you created in the previous step into the div you just created. Sometimes doing something like this might be more simply specified as “wrap the main and aside elements in a div with the class container”.

Step 5: Implement responsive behavior

Bootstrap implements several pre-defined responsive “breakpoints”. In this use of the term, a breakpoint is not a place to pause code when using a debugger, like most of our prior uses of the term. Rather, it means a value in a range the is used as the threshold for a change in presentation/behavior.

To accomplish the specs, we need to figure out where a viewport width 768px falls in the range of Bootstrap’s breakpoints. According to the docs, viewports with a width of at least 768px are considered “medium” which is represented in bootstrap’s classes with the abbreviated md.

1. Wrap the main and aside elements in a div with the class row. (So you’re adding only one div element, but it will have two children: main and aside.)
   • so this new div should be the only child of the div with the class container you created in the previous step.
2. Add this class to your main element: col-md-8, which means that at viewport widths of at least 768px, the main element should be presented as a “column” (within the row you just added) that takes up 8/12ths of the width of its container.
3. Add this class to your aside element: col-md-4, which means that at viewport widths of at least 768px, the aside element should take up 4/12ths of the width of its container.

Step 6: Accordion

In Graphical User Interfaces on your computer, phone, watch, fridge? contact lens?!, you have become accustomed to some common ways for information to be presented and common dynamic behaviors of those presentations, let’s call a representation of information and its dynamic behavior a “widget”. Bootstrap implements many commonly used “widgets” as components. One of them is an accordion. Let’s try out the accordion.

1. copy the first code example from the accordion docs and replace all the paragraphs in your aside with the code you copied.

Going Further

Navbar

Color the navbar

1. read the docs and try to apply the primary color scheme to the navbar
   1. if you succeed, you may agree that the navbar looks nice, but now the search box looks weird. I think it looks better to make one more modification in this case: find the form in the navbar and add this attribute and value to it: data-bs-theme="light"
   2. oh dang, now the search button kinda sucks too huh? I think it looks better to make one more modification in this case: find the search button in the navbar. Notice it has the class btn-outline-success? drop the -outline part of that class name. Dang, this is still pretty low contrast… 🤔 know what, make it btn-light. That seems alright.

Give the navbar margins to match content

1. in your nav element, you’ll see one of the first children (which contains all the other descendants of nav) is an element with class container-fluid. Remove the -fluid part of that class name. Read more on Bootstrap Containers if you like.

Navbar breakpoint

Currently the responsive behavior of the main content area is based on the md breakpoint, which is at 768px, but the navbar’s responsive behavior is based on the lg breakpoint, which is at 992px. This means that the navbar will be in its “collapsed” state when the viewport is between 768px and 992px wide, but the main content area will be in its “2 column” state. This is a little weird. How can you fix it?

Only show aside when there’s enough real estate

1. read the docs (e.g. these about hiding elements) and try to make it that the aside is either hidden (on viewports narrower than 768px) or shown on wider viewports as previously specified (a column that takes 4/12 of the available width).

7 - Lab - Responsive Branching in Week 07

Objectives

• moar CSS Grid
• dark mode
• git branching

In this week’s prep, you completed a responsive grid design that uses two “breakpoints” to distinguish three layouts for a page. In this lab, you will continue with the same code base (but you should start from our version…), but you will work in pairs 🍐🍐 (see below for specific instructions on collaborating). One partner will add a new tiny mode to the grid, while in parallel the other partner will add dark mode 🦇.

Pairing

1. accept the github classroom assignment linked from your canvas course
   • in doing so, tell github classroom that you’re in a group with your neighbor
   • If your instructor doesn’t do things that way ⬆️, (because if they do, you’ll need to start with the github repo provided there to be linked up correctly to their roster and everything) you may want to start by visiting this repo and choosing Use this template.
2. both you and your neighbor: clone the repository to your local machines
3. Make a branch that you name as your EID, so like mine will be named stewarmc
   • you are both doing this on our own computers, so you will each have the main branch you cloned and then 1 more branch, named for your own eid
4. (each of you) Push your new branch to the github repo in a remote branch with a matching name
5. Assign one partner in the pair to the Tiny Grid task below, the other to the Dark Mode task below
   • Each of you complete your task in your own branch and commit the changes to your branch and push your branch to github.
6. When you’re done, work together to merge the branches into main on one of your computers, then push the code to main in the remote repository.
7. Submit however your instructor requests, one way that might be common is to get the commit URL from the preceding step (it might look like https://github.com/SOMETHING/SOMETHING-ELSE/commit/LONG_HEXADECIMAL_HASH) and submit it to the assignment in your learning management system.

Tiny Grid

1. Replace the fake name in the README.md’s Acknowledgements with your own name.
2. add the README.md changes to the staging area, commit the changes, and push the changes to the remote repository.
3. edit the tiny.css such that when the viewport width is less than 375px, the layout changes such that only the “main article area” is displayed.
4. add the tiny.css changes to the staging area, commit the changes, and push the changes to the remote repository.

Dark Mode

1. Create a new file called dark.css
2. edit your index.html to include a link to dark.css in the head of the document just before it links to debug.css
3. edit dark.css such that if the user has a “dark” preference, the page will be styled with a dark theme.
   1. What the dark color scheme should be is your choice!
      • If you’re not feeling creative set the background of the whole page to black and the text color of the content of the whole page to white.
      • Else, do something nice (maybe with a slightly lower contrast than the above suggestion, see the JMU CS Colors on the wiki or the Design and Style section of our Resources page for more.)
4. 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.
5. 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.
   1. 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

Acknowledgements

Developers:

1. Nay Bored

With huge thanks to the CS 343 cheat code Mozilla Developer Network.