Only the js needs to be edited HTML must not be changed The assignment is in the photo This is the html starter Title content width device width, initial scale 1, shrink to fit no href https stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css integrity sha384 ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T crossorigin anonymous rel stylesheet body padding 16px card width 100 move me height 100px width 100px border radius 100 margin 16px border 6px solid gray Change Night Light mode id btn mode class btn btn light btn lg btn block mode night Joke Programming Joke Q What did the Java code say to the C code A You've got no class Horizontal Bounce id btn bounce class btn btn light btn lg btn block Bounce id btn stop class ml 4 btn btn light btn lg btn block Stop class bg light integrity sha384 q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo crossorigin anonymous integrity sha384 UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 crossorigin anonymous integrity sha384 JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFfJGzIxFDsf4x0xIM B07jRM crossorigin anonymous This is the js starter (function () function init() Initialize your elements exampleFunction() No need to change this window onload function () Init is called once window has been loaded init() )() This how the final result should look like Night Light Mode When user clicks on the night light mode button Button icon needs to change depending on the mode All texts on the site need to change color based on the mode All backgrounds on the site need to change color based on the mode Horizontal Bounce When the user clicks on the Bounce button Circle needs to start moving left to right, right to left (Bounce) Circle doesn't have to go to the edges of the screen If the circle is moving, button Bounce needs to be disabled When the user clicks on the Stop button If the circle is not moving, user should be presented with an alert that says Animation is not in progress If circle is moving, it should stop moving and stay where it is Change Night Light mode Joke Programming Joke Q What did the Java code say to the C code A You've got no class Horizontal Bounce Bounce Stop

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 24, 2024

Only the js needs to be edited! HTML must not be changed. The assignment is in the photo This is the html starter: Title content=width=device-width,

Only the js needs to be edited! HTML must not be changed.

The assignment is in the photo

image text in transcribed

This is the html starter:

Title

content="width=device-width, initial-scale=1, shrink-to-fit=no">

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"

crossorigin="anonymous">

rel="stylesheet">

body {

padding: 16px;

}

#card {

width: 100%;

}

#move-me {

height: 100px;

width: 100px;

border-radius: 100%;

margin: 16px;

border: 6px solid gray;

}

Change Night/Light mode

Joke

Programming Joke

Q: What did the Java code say to the C code?
A: You've got no class.

Horizontal Bounce

class="bg-light">

crossorigin="anonymous">

This is the js starter:

(function () {

function init() {

// Initialize your elements

exampleFunction();

}

// No need to change this

window.onload = function () {

// Init is called once window has been loaded

init();

};

})();

This how the final result should look like

Night/Light Mode When user clicks on the night/light mode button: - Button icon needs to change depending on the mode - All texts on the site need to change color based on the mode All backgrounds on the site need to change color based on the mode Horizontal Bounce When the user clicks on the Bounce" button: Circle needs to start moving left to right, right to left (Bounce). Circle doesn't have to go to the edges of the screen. If the circle is moving, button Bounce needs to be disabled. When the user clicks on the "Stop" button: - If the circle is not moving, user should be presented with an alert that says "Animation is not in progress!" - If circle is moving, it should stop moving and stay where it is Change Night/Light mode Joke Programming Joke Q: What did the Java code say to the C code? A: You've got no class. Horizontal Bounce Bounce Stop