Goal: Practice using event handler properties by updating a project from the last course section to handle events.
documentor DOM elements) respond to the same event?
window.onloadevent handler do?
Read through the following two prompts and pick one project to complete. Both prompts will require a little bit of research and if you are having issues with that, ask for help from your teacher or peer. Reference the previous lessons as necessary and challenge yourself by trying to type out the code from memory.
Each prompt below includes a bonus prompt. Before you start on the bonus prompts, take stock of the readings and other classwork that is assigned for the same class session. If you have more readings to do for the session, do not do the bonus prompt.
For this prompt, you'll extend the functionality of a project you completed in the last course section to add buttons that change the color of the webpage and increase the font size. There's also a bonus prompt. This is what you'll do:
window.onloadevent handler. Within that event handler, create event handlers for each button that handles changing the text and background color within the document. The easiest way to do this is to target the document's
bodytag, but you can do it however you like.
onmouseoutevent handlers to every element in the DOM so that when the pointer is over the element, its background color is set to yellow, and when the mouse is not over the element, the background color returns to the default.
For this prompt, you will update a project from the previous course section to react to events. This prompt is called "kaleidoscope", because much like a kaleidoscope, we'll have our webpage change the background color of the entire page to a randomly generated color every time our mouse pointer moves. This is what you'll do:
window.scrollTo()methods and moves the Y axis (vertical) of the page to a random location.