Prep 7: 5.3-5.7, 8.8.2-8.8.7 & 9.5

  1. Read:
    1. 5.3-5.7
    2. 8.8.2-8.8.7
    3. 9.5
  2. Do: complete the form activity...
  3. Due: 9am on 30 Sep.
Categories:

  2 minute read  

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)