diff --git a/events.js b/events.js index 416cdd1..41e56b2 100644 --- a/events.js +++ b/events.js @@ -1,5 +1,5 @@ -// Don't change or delete this line! It waits until the DOM has loaded, then calls -// the start function. More info: +// Don't change or delete this line! It waits until the DOM has loaded, then calls +// the start function. More info: // https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded document.addEventListener('DOMContentLoaded', start) @@ -7,7 +7,10 @@ function start () { // The first example is done for you. This will change the background colour of the first div // when you mouse over it. one() - + two() + three() + four() + // Your turn! Create a new function called `two`, then call it from here. } @@ -23,11 +26,39 @@ function one () { } // CREATE FUNCTION two HERE +function two () { + //First, we have to find the delement: + var two = document.getElementById('two') + + //Next, we add an event listener to it: + two.addEventListener('mouseenter', makeGreen) + + //Finally, we add one to make the colour white again + two.addEventListener('mouseleave', makeWhite) +} // CREATE FUNCTION three HERE +function three () { + //First, we have to find the delement: + var three = document.getElementById('three') + //Next, we add an event listener to it: + three.addEventListener('mouseenter', makeOrange) + + //Finally, we add one to make the colour white again + three.addEventListener('mouseleave', makeWhite) +} // CREATE FUNCTION four HERE +function four () { + //First, we have to find the delement: + var four = document.getElementById('four') + + //Next, we add an event listener to it: + four.addEventListener('click', makeRed) + //Finally, we add one to make the colour white again + four.addEventListener('mouseleave', makeWhite) +} // Changes the background color of event's target function makeBlue (evt) { evt.target.style.backgroundColor = 'blue' @@ -36,3 +67,27 @@ function makeBlue (evt) { function makeWhite (evt) { evt.target.style.backgroundColor = 'white' } + +function makeGreen (evt) { + evt.target.style.backgroundColor = 'green' +} + +function makeWhite (evt) { + evt.target.style.backgroundColor = 'white' +} + +function makeOrange (evt) { + evt.target.style.backgroundColor = 'orange' +} + +function makeWhite (evt) { + evt.target.style.backgroundColor = 'white' +} + +function makeRed (evt) { + evt.target.style.backgroundColor = 'red' +} + +function makeWhite (evt) { + evt.target.style.backgroundColor = 'white' +}