Lesson 6 Assignment

assignments.md

For all assignments, make sure to clearly label your local and global variables. Use functions to make your code more easy-to understand.

Assigment 1 - Shopping Cart

Create an application with an input field and a submit field. When the submit button is pressed, the text in the input should be added to a "shopping cart" (an unordered list). This is similar to your wishlist application. Try not to just copy code from the wishlist project, as there's literally no point in cheating on this.

Assignment 2 - Color a Square

Create 5 buttons labelled "red", "blue", "green", "white", and "black". When pressed, the background of a div element should change to the respective color. For example, if the button labelled "green" is pressed, the div should turn green. In the CSS, make the div have a width and height of 100px.

Assigment 3 - Stanley

Use the following HTML code for this project:

<button id="clickMe"> Click me! </button>
<div style="margin:auto;width:90%;margin-top:3rem;border:1px solid black;padding:2rem;" id="container"></div>

When the button is pressed, your program should add a random amount (from 1-5) of buttons with the text "Click me?" to the div.

Assignment 4 - Color Saver

Create a button that changes the background color of the body to a random color. Create another button which saves the color in the browser when clicked. When the page is reloaded, the background color of the page should be the saved color. To generate a random color, you may use the following code:

function randomColor () {
    const chars = 'abcdef1234567890';
    let res = '#';
    for (let i = 0; i < 6; i++)
        res += chars[ Math.floor(Math.random() * 16) ];

    return res;
}

Assignment 5 - Night Mode

Many users nowadays have sensitive eyes. As such, developers have implemented an option to toggle "night mode" on their sites. Create a button that changes the background color of the body to black if it is currently white, and vice versa.

Assignment 6 - Cats and Dogs

For this assignment, you must create a site that will show an image of a cat when the "cat" button is pressed and a dog when the "dog" button is pressed. You may find an image of a dog and a cat on Google Images and add them to tags. When the image is switched, it should fade in.

Assignment 7 - Time Splitter

Create an input field with type number and a button. The input field represents the number of minutes. When the button is pressed, display the time in minutes in DD:HH:MM format in a paragraph.

There are 60 minutes in 1 hour, and 24 hours in 1 day.