Preps

1 -

Psst: have a look at the JavaScript Console 💁

2 - Prep 01: 1.3, 2

Read FunWebDev Chapter 1.3 and Chapter 2, then take the quiz in Canvas.

3 - Prep 02: 3.2, 3.4, and 3.5 & 8.2-8.5

Read

1. FunWebDev Chapter 3.2, 3.4, and 3.5.
2. FunWebDev Chapter 8.2-8.5.

Simple Single Page

1. Download the textbook cover images at the following links (Notice when you hover over the links that your browser’s status bar shows the address as an image file. In cases like this, consider right-clicking and choosing the appropriate option, e.g. Save Link as....)
   • large
   • small
2. Use it to complete Hands-On Project 1 from the textbook’s page 117.
3. Submit your ch03-proj01.html to the corresponding Gradescope assignment.

CodingBatJS

1. Download codingjs-1.js
2. Complete the following CodingJS activities (we recommend you do NOT do this in a Private tab):
   1. Warmup-1 – sleepIn
   2. Warmup-1 – monkeyTrouble
   3. Warmup-1 – sumDouble
   4. Warmup-1 – frontBack
   5. Warmup-1 – intMax
3. Paste each of your solutions from the above into the corresponding places in codingjs-1.js and submit this file to the corresponding Gradescope assignment.

4 - Prep 03: 3.3, 3.6, and 5.1 & 8.6-8.7-8.8.1

Read

1. FunWebDev Chapter 3.3, 3.6, and 5.1 (skip chapter 4).
2. FunWebDev Chapter 8.6-8.7 and 8.8.1.

Semantic Elements

1. Download and extract the zip file containing the starter files
2. Your goal is to complete Project 2 in Chapter 3 (pg. 118)
3. Follow the instructions to replace the <div> and <p> tags with semantic tags according to this figure.
   1. You will also need to move and add tags as needed, such as with the <figure> element and the copyright statement.
4. Submit only the ch03-proj02.html file to the corresponding Gradescope assignment.

5 - Prep 04: 4.1-4.4, and 4.6-4.7 & 9.1

Read

1. FunWebDev Chapter 4.1-4.4, and 4.6-4.7 (skip chapter 4.5 – we will come back to the cascade later).
2. FunWebDev Chapter 10.1 (Array Functions). (note this wasn’t here originally for S'24, but was added post hoc in case anyone grabs this for future use)
3. FunWebDev Chapter 9.1 (introduction to DOM).

Array Champion 3000

It’s time to work out those array muscles and exercise your JavaScript skills that you’ve been developing!

1. First, open up the MDN web docs for arrays.

2. Next, download the starter HTML file and put it in your cs343/dev directory, inside a new folder called prep4 or something similar.

3. Open it through VS Code. You should see a few arrays and eight numbered comments.

4. Your goal is to use different array methods with your own callback functions to solve each of the little exercises and become an array CHAMPION!

   • Pro tip: The MDN web docs listed above are your best friend here
   • Make sure your variable names to store the results match those provided in the file!

5. When you’re done, submit your arrays.html to the corresponding Gradescope assignment.

6 - Prep 05: 4.5, 4.8.2, 7.1, 7.2, and 9.2, 9.3.1, 9.3.2

Read

1. FunWebDev Chapter 4.5, 4.8.2 (The Cascade and CSS Variables).
2. FunWebDev Chapter 7.1 (CSS Layout).
3. FunWebDev Chapter 9.2, 9.3.1, 9.3.2 (Modifying the DOM and Intro to Events)

Activities

We have some fun exercises this week that will let you practice your CSS selector skills and DOM manipulation! Complete both the CSS Diner and the JSChallenger activities.

CSS Diner

Complete levels 1-14 of CSS Diner.

When you’re done, open the menu in the upper-right and submit a screenshot showing you have completed the first 14 levels.

JSChallenger

Complete the following DOM manipulation problems from JSChallenger. Make an account to save your progress.

You do not need to purchase a premium membership (stay free, like a bird 🕊️).

• DOM selector methods
  • Select the button element on the page
  • Events and user interactions
    • Execute function on button click
• DOM manipulation
  • Remove element from the DOM

Submit a screenshot of this page, showing that you have completed the challenges in each category.

7 - Prep 06: 7.3-7.4

Read

1. FunWebDev Chapter 7.2, 7.3, 7.4 (Flexbox, CSS Grid, and Responsive Design).

Activities

We have some fun exercises this week that will let you practice your CSS layout skills with flexbox and CSS Grid.

1. Implement the “Holy Grail” of web layouts as guided by Dr. Johnson and submit a screenshot of the final result running in your web browser.
2. Implement the MDN’s “Holy Grail” 🚨 NOTE: the linked MDN page has several interesting examples on it, but we’re linking here specifically only to one section of that page, the one with the heading, “A responsive layout with 1 to 3 fluid columns using grid-template-areas”
   1. take a screenshot with a viewport width < 500px
      • this should show your browser’s URL bar and all, but should look like the left-most third of this image
   2. take a screenshot with a viewport width >= 500px and < 700px
      • this should show your browser’s URL bar and all, but should look like the center third of this image
   3. take a screenshot with a viewport width >= 700px
      • this should show your browser’s URL bar and all, but should look like the right-most third of this image

If you didn’t earlier in the semester, you may find it helpful to now enable rulers in the firefox dev tools.

8 - Prep 07: 5.6-5.7, 8.8.2-8.8.7 & 9.5

Read

1. FunWebDev Chapter 5.6-5.7 (HTML Styling and Validating Forms).
2. FunWebDev Chapter 8.8.2-8.8.7 (Functions)
3. FunWebDev Chapter 9.5 (Forms in JavaScript)

Git Branching

1. https://learngitbranching.js.org/
   1. do all the exercises in the first 2 sections of the main tab
   2. do all the exercises in the 1st section of the remote tab

Activity

Your goal is to build a basic form (based on the knowledge from the readings) that will let a user dynamically modify parts of the page.

Please submit your page as a single index.html file with internal stylesheets and scripts. You may download this template file to help you get started.

The user should be able to specify a number of random images to generate:

And also change the background color:

HTML

In the body, create the following elements:

1. Create a form for specifying the number of images:
   • It should have a label that says “Number of images:”,
   • An input that only lets you enter numbers,
   • And a button of type "button" that says “Generate”.
2. Create a second form for specifying the background color:
   • It should have a label that says “Background color:”,
   • An input that lets you pick a color,
   • And a button of type "button" that says “Change background”.
3. Afterwards, create an empty div to store your images.
4. I recommend that you give any element you wish to access via JavaScript a unique id!
   • Like the input fields, the buttons, the div, etc.

JavaScript

In between the script tags, add JavaScript code so that:

1. When the “Generate” button is clicked:
   • It should clear all images in the div
   • It should add random images to the div based on the number specified in the form
   • Images should be 200x200 in size
   • Images should be from Lorem Picsum: https://picsum.photos/[WIDTH]/[HEIGHT]?random=[NUMBER] (replace [WIDTH], [HEIGHT], and [NUMBER])
   • Each image should be different (hint: change [NUMBER] each time you add an image)
2. When the “Change background” button is clicked:
   • It sets the background color of body to the color specified in the form
   • You may set an inline style to accomplish this (using the style property of an element)

9 - Prep 08: 10.1, 10.4.1, and localStorage

Read

1. FunWebDev Chapter 10.1 (Array Functions)
   • Yes, you’ve seen these before! Now’s a great time to review 😉
2. FunWebDev Chapter 10.4.1 (brief overview)
3. The Modern JavaScript Tutorial - localStorage
4. HTML Template Tag

Activity

For this activity, you will be trying out localStorage for yourself! Create two html files called save.html and load.html. You may download this template file to help you get started.

• save.html
  • In a script element, write code to:
    1. Save your full name to a localStorage entry with the key fullname
    2. Save your favorite number to an entry with the key favnumber
    3. Save an array of at least three quotes to an entry with the key quotes
       • Hint: you will need to “stringify” the object
• load.html
  • First, add three elements to display the saved data:
    1. A div with the id name-display
    2. A div with the id favorite-display
    3. A ul with the id quotes-display
  • Then, in a script element (at the bottom of the body), write code to:
    1. Load the value with the fullname key from localStorage and set the first div’s textContent to that value
    2. Load the value with the favnumber key, add 5 to it, and then set it to the second div
       • The value will be loaded as a string. You will need to convert it back to an int.
    3. Load the value with the quotes key and make a new list entry for each quote
       • Hint: you will need to “parse” the string and convert it back to an object

10 - Prep 09: Events and Asynchronicity - 9.3.3-9.4, 10.3

Read

1. FunWebDev Chapter 9.3.3-9.4 (inclusive): more on events and events with forms
2. FunWebDev Chapter 10.3 (asynchronous programming)

Activity

Complete the “Later Gator” Activity

11 - Prep 10: Location interface, URL API, and the File API's Blobs

Read MDN

1. Browser Location API
2. URLSearchParams interface, e.g. as obtained from the window.location search property
3. Creating a blob 🤢
4. Extracting data from a blob 🤮