Skip to content

Lab 1: HTML & JS Basics

This lab consists of two parts worth 10 points each. Part A is about HTML, and Part B is about JavaScript. Submit each part separately to Gradescope.

Part A: Un-engineering Madison

Objectives

  • Use HTML tags to create basic formatted pages
  • Separate section content using <div> elements
  • Explain the difference between relative and absolute URLs

Context

JMU, as part of their “Reengineering Madison” initiative, would like to create a lightweight version of their homepage for use in remote and low bandwidth applications (like outer space).

Therefore, they would like you to “Un-engineer Madison” by creating a simple HTML version of the https://www.jmu.edu/ home page. Good thing you’re taking CS 343 right now!

Your goal is to make the following page:

Final product

Getting Started

Download the following starter zip file and extract its contents to a folder named lab01 in a reasonable location (wherever you put your CS 343 work, not your Downloads folder):

Open the lab01 folder in VS Code and then open the top-level index.html page for editing.

Step 1: Mark It Up!

  1. First, use the Live Preview (or Live Server) extension to show a rendered version of the current page.

    1. For Live Preview: Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P or F1) and search for “Show Preview” or “Open With Live Server” depending on your extension.
    2. For Live Server: Click the “Go Live” button on the bottom right.

  2. The page should look pretty awful. Let’s fix that.

  3. First, make it into an HTML page (add DOCTYPE, <html>, <head>, <body>, etc.)

    1. The title of the page should be “James Madison University”
    2. All the provided text should go in the <body>.

  4. Separate the <body> into five sections using <div> elements, and give each a corresponding id attribute:

    1. Each of the five blocks of text should be put in a <div>
    2. The ids to use are:
      1. top - containing the title (and logo)
      2. about - containing the slogan and about text
      3. explore - containing the text about exploring programs
      4. give - containing the text about giving
      5. contact - containing the contact information
    3. For example, the part about giving should be: 
      <div id="give">
  Dukes have a culture of giving back.
  Give to JMU
</div>
    4. The ids allow us to link to different parts of the page.

  5. Once finished, preview your page. It should render similar to this:

    Bare rendered page

    Note that each <div> now renders on its own line. (They’re block-level elements!)

  6. Now, format the page so it looks like this:

    1. Look closely at what text is a heading vs. a paragraph. Hints are provided in red: Formatted JMU home page
    2. You should have 3 “heading” (<h1>, etc.) elements and 6 paragraph (<p>) elements. Look at the image and figure out which are which.
      1. Note the difference in whitespace when using <p> vs <br> to separate text.
      2. Which pieces of text are considered new paragraphs?
      3. Which use <br> to separate new lines inside a paragraph?
    3. Don’t forget you can use <strong> and <em> to bold and italicize text!

Step 2: Images and Anchors (Away!)

  1. Your goal now is to add the JMU logo, an animated gif (how do you pronounce gif, by the way?) to the top, and additional links to other places on your website like so:

    Page with links

  2. For most of your src and href URLs, you must use RELATIVE URLs!

    1. And NOT “root-relative” URLs either!
    2. Why? So that the entire site is contained inside the lab’s folder and can be moved around without breaking the paths.

  3. The JMU logo is already included for you in the img folder

  4. The animated gif should be a child of the “top” div section and located right underneath the first heading.

    1. Go to https://giphy.com/ and find a gif you like (any one you like), the click “Copy Link” (link icon) on the right to get a URL to the gif.
    2. This should be an absolute URL – needed when linking to external resources on other domains!
    3. Animated gifs are considered a type of image, so use the <img> tag to include it.

  5. The About JMU and Explore Programs links should link to their respective pages included in the zip file.

  6. The Give to JMU link should link to the actual JMU giving page: https://www.jmu.edu/give/index.shtml

  7. The CONTACT JMU link at the bottom should have an href of: mailto:wangid@jmu.edu

    1. This is a special mailto URI that lets you open an email client and send an email to a specified address

  8. Last but not least, edit the links in the about.html and programs/index.html pages so that they link back to your main index.html page.

    1. Consult this guide on relative URLs to see how to best accomplish this.

Submission

Create a new zip archive of the three html files. Then upload the zip archive to Gradescope.

The zip archive must have the correct directory structure, with index.html and about.html in the top-level folder, and the other index.html in a programs subfolder.

The easiest way to create such a zip archive is via the command line:

zip lab01-final.zip index.html about.html programs/index.html

tar -a -c -f lab01-final.zip index.html about.html programs\index.html

Part B: CS 149 Logic Exercises

Remember the good old days in CS 149, when life was easy and programming was simpler? As a warm-up for the JavaScript work ahead, this part revisits a couple of CS 149 homework problems that might be familiar. Except this time, you will solve them using JavaScript.

Objectives

  • Access form elements and update text elements using HTMLElement properties such as value and textContent.
  • Convert user input from strings to numbers and validate input using built-in functions such as parseFloat(), parseInt(), and isNaN().
  • Apply integer-based arithmetic and rounding techniques using the Math object.

Getting Started

Download (right-click and save link as) the following two starter files:

The HTML code is already finished. Your job is to implement the JavaScript function near the bottom of each file.

On line 7 of each file, enter your name (use normal capitalization) in the <meta> tag. Be careful not to modify any other existing lines. Find the TODO comment to see exactly where your code should go. Use the provided global variables declared above the function.

Exercise 1: Interstate Lookup

In the United States, interstate highways follow a specific numbering system based on the type and direction:

  • One- and two-digit numbers are reserved for “primary” interstates (Ex: I-95). North-south routes are assigned odd numbers, and east-west routes are assigned even numbers.

  • Three-digit numbers are for “auxiliary” interstates (Ex: I-495). If the first digit is even, the road is typically a “beltway” around a major city. If the first digit is odd, the road is typically a “spur” that deviates from a primary interstate.

Write a function named checkDirection() that reads an interstate number from the input field, determines the type of interstate, and displays a message that matches the format shown in the following examples:

Input Output
81 I-81 is a primary north-south
66 I-66 is a primary east-west
295 I-295 is a beltway for I-95
395 I-395 is a spur for I-95

If the input is not a one-, two-, or three-digit number, the output must be:

Please enter an integer between 1 and 999.

Hints

  • Use input.value to read the user’s input.
  • Use output.textContent to set the output.
  • Use parseInt() to convert the input to an integer.
  • Use isNaN() to test if the input is not a number.
  • Use Math.floor(x / y) to perform integer division.

Warning

Your solution must use integer division and the remainder operator (%). Do not manipulate or analyze the input as a string.

Exercise 2: Change Calculator

When you shop at a grocery or retail store, someone scans your items so that a computer can determine the total purchase amount. Customers who pay in cash often use whole dollars, rather than provide the exact amount in coins. That’s where your program comes into the story. You are to implement an algorithm for an automatic change dispenser.

Write a function that calculates the amount of change due, showing how many dollars, quarters, dimes, nickels, and pennies should be dispensed. For example, if the total charge is $5.32 and the amount paid is $10, the change would be $4.68:

Dollars: 4
Quarters: 2
Dimes: 1
Nickels: 1
Pennies: 3

Unlike the previous exercise, which used a button to invoke the function, this exercise will call the function automatically whenever the user types in either input box. All five outputs must be blank if either input is not a valid number or if the total charge is greater than the amount paid.

Tip

  • Use parseFloat() to convert the total charge to a number.
  • Use Math.round() to calculate the change in cents (Ex: $4.68 is 468 cents).

Warning

Your solution must not use any loops. For this exercise, Gradescope will automatically reject submissions containing keywords like for and while.

Submission

Upload each html file to the respective assignment on Gradescope. At this point of the semester, you have unlimited submissions. But you should not rely on Gradescope to test your code. The autograder takes a long time to run. Do yourself a favor and test your code before uploading.