Jan 22: Elements, Conditionals

Learning Objectives

After today’s class, you should be able to:

• Name and describe five block elements and five inline elements.
• Explain how to link to a file in another folder using a relative path.
• Use the console object to log output to the debugging console.

Lesson Outline

Lecture [45 min]

• Chapter 3: Slides 21–37
  • HTML File Paths on W3Schools
• Chapter 8: Slides 13–26
  • String Templates on W3Schools

Exercise 1: HTML

Write a valid HTML document that makes use of each element listed below.

Start with the basic template code provided in Part 2 of Tuesday’s activity.

• Headings: <h1>, <h2>
• Block elements: <div>, <p>, <hr>
• Inline elements: <span>, <code>, <mark>
• Character entities:  , &, >, <

When (almost) finished, use the Nu HTML Checker to validate your code.

Exercise 2: JavaScript

Write a program that does the following:

1. Provide a prompt to the user to enter a bill total (e.g., at a restaurant).
2. Convert the input to a number; don’t worry about error handling for non-numbers.
3. Calculate a 20% tip amount (simply multiply the user input by 0.2).
4. Use a string template to display the bill total and tip amount on the same line:

   For bill of $20 the tip should be $4
   

5. Round both dollar amounts to two decimal places like this:

   tipAmount.toFixed(2)
   

6. Paste and run the code directly in the DevTools console.

Based on Test Your Knowledge #1 (Page 367 of FunWebDev)

Examples [30 min]

• Modern JavaScript Tutorial by Ilya Kantor
• JavaScript Examples on W3Schools
• temperature.html similar to Lab01

Before Tuesday

1. Finish the reading from Prep 1.
   • Check out the tentative plan: CS-343-S26 Reading
2. Submit Lab 1 on Gradescope. ← Due Mon at 11:59pm
   • Note: There are three separate submissions.