finished the web page

*********************************************************

.js

// I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){ const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan']; // Choose a random float from [0, 1) the multiply by length to get random index // Math.floor() clamps to an integer for the index const colorIndex = Math.floor(Math.random() * colors.length); color = colors[colorIndex]; // get the "ball" div const ball = document.getElementById("ball"); // Set it's background color ball.style.background = color; } function moveBall () { // get the ball const ball = document.getElementById("ball"); // subtract the width/height of the ball so that it is always fully on screen const width = window.innerWidth - ball.offsetWidth; const height = window.innerHeight - ball.offsetHeight; // pick random coordinates const x = Math.floor(Math.random() * width); const y = Math.floor(Math.random() * height); // put the ball there ball.style.left = `${x}px`; ball.style.top = `${y}px`; } // Put the ball back at the bottom of the page and // reset the number of clicks to 0 function reset () { // You should use the ball's left and top (not bottom) console.log("IMPLEMENT THIS FUNCTION"); }

*****************************************************************

.html

Simple JavaScript/DOM interaction example.

Change Color

Clicks: 0

Reset

******************************************************************

.css

body { font-family: "Helvetica", "Trebuchet", sans-serif; font-size: 1em; line-height: 1.5em; } /* The `#` symbol indicates an `id`. Use `.` for `class`. */ #reset-button{ background-color: rgb(165, 44, 44); text-align: center; max-width: 8em; border: 1px solid rgb(165, 44, 44); border-radius: 0.2em; color: whitesmoke; /* The following rule will center the button horizontally: */ margin: 0 auto; } #color-button{ background-color: rgb(67, 189, 8); text-align: center; max-width: 8em; border: 1px solid rgb(38,118,0); border-radius: 0.2em; /* The following rule will center the button horizontally: */ margin: 0 auto; } #ball { background-color: rgb(204,0,51); /* AState Scarlet, Pantone 186 */ width: 100px; height: 100px; border-radius: 50px; position: absolute; /* Let's start the ball in the middle as well: */ /* Note: if `calc` doesn't work, just remove this line */ left: calc(50% - 50px); /* and 1 em unit above the bottom of the window */ bottom: 1em; /* And we want it to always appear "behind" the button */ z-index: -1; }