Class Prep 7

Read

1. FunWebDev Chapter 5.3-5.7 (HTML Forms).
2. FunWebDev Chapter 8.8.2-8.8.7 (Functions)
3. FunWebDev Chapter 9.5 (Forms in JavaScript)

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)