Compare commits
27 Commits
Author | SHA1 | Date | |
---|---|---|---|
f57da84b34 | |||
|
9f424e9ebb | ||
|
670a7de318 | ||
|
3a2f06183f | ||
|
2b226f0912 | ||
|
6a99ac8ed0 | ||
|
61ba5846f8 | ||
|
f2fa5eaa08 | ||
|
2daab178da | ||
|
7b724cc4dc | ||
|
bbb7582d3e | ||
|
01d5e8efc9 | ||
|
f7b6b56f97 | ||
|
4db1c28362 | ||
|
104ac52aa7 | ||
|
289c0fd033 | ||
|
6ba4d24e86 | ||
|
ffc92b74d4 | ||
|
bfec34aa0b | ||
|
431312f75f | ||
|
495eff9794 | ||
|
8d168d8a35 | ||
|
203fd81c6a | ||
|
10f46daf57 | ||
|
c0a7b0b853 | ||
|
8ab3a0c231 | ||
|
6728934c84 |
103
index.js
103
index.js
@ -1,80 +1,23 @@
|
|||||||
(function() {
|
document.addEventListener("DOMContentLoaded",()=>{
|
||||||
'use strict';
|
document.getElementById("controls").addEventListener("click",(clicked)=>{
|
||||||
|
var lightPrefix = clicked.target.id.replace("Button","");
|
||||||
const stopButton = document.querySelector('#stopButton');
|
var targetLight = document.getElementById(lightPrefix+"Light");
|
||||||
const slowButton = document.querySelector('#slowButton');
|
if (!targetLight.classList.contains(lightPrefix)) {
|
||||||
const goButton = document.querySelector('#goButton');
|
targetLight.classList.add(lightPrefix);
|
||||||
|
console.log(lightPrefix+" bulb on.")
|
||||||
const stopLight = document.querySelector('#stopLight');
|
} else {
|
||||||
const slowLight = document.querySelector('#slowLight');
|
targetLight.classList.remove(lightPrefix);
|
||||||
const goLight = document.querySelector('#goLight');
|
console.log(lightPrefix+" bulb off.")
|
||||||
|
}
|
||||||
// part 1
|
})
|
||||||
stopButton.addEventListener('click', () => {
|
|
||||||
stopLight.classList.toggle('stop');
|
var buttons = document.getElementsByClassName("button");
|
||||||
|
for (var i=0;i<buttons.length;i++) {
|
||||||
// or...
|
buttons[i].addEventListener("mouseenter",(e)=>{
|
||||||
// if (stopLight.classList.contains('stop')) {
|
console.log("Entered "+e.target.innerHTML+" button.")
|
||||||
// stopLight.classList.remove('stop');
|
})
|
||||||
// }
|
buttons[i].addEventListener("mouseleave",(e)=>{
|
||||||
// else {
|
console.log("Left "+e.target.innerHTML+" button.")
|
||||||
// stopLight.classList.add('stop');
|
})
|
||||||
// }
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
slowButton.addEventListener('click', () => {
|
|
||||||
slowLight.classList.toggle('slow');
|
|
||||||
});
|
|
||||||
|
|
||||||
goButton.addEventListener('click', () => {
|
|
||||||
goLight.classList.toggle('go');
|
|
||||||
});
|
|
||||||
|
|
||||||
// part 2
|
|
||||||
const handleMouseEnter = (event) => {
|
|
||||||
console.log(`Entered ${event.target.textContent} button`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseLeave = (event) => {
|
|
||||||
console.log(`Left ${event.target.textContent} button`);
|
|
||||||
};
|
|
||||||
|
|
||||||
stopButton.addEventListener('mouseenter', handleMouseEnter);
|
|
||||||
slowButton.addEventListener('mouseenter', handleMouseEnter);
|
|
||||||
goButton.addEventListener('mouseenter', handleMouseEnter);
|
|
||||||
|
|
||||||
stopButton.addEventListener('mouseleave', handleMouseLeave);
|
|
||||||
slowButton.addEventListener('mouseleave', handleMouseLeave);
|
|
||||||
goButton.addEventListener('mouseleave', handleMouseLeave);
|
|
||||||
|
|
||||||
// bonus
|
|
||||||
const controls = document.querySelector('#controls');
|
|
||||||
|
|
||||||
controls.addEventListener('click', (event) => {
|
|
||||||
if (event.target === controls) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let status;
|
|
||||||
|
|
||||||
if (event.target === stopButton) {
|
|
||||||
status = stopLight.classList.contains('stop') ? 'on' : 'off';
|
|
||||||
|
|
||||||
// or...
|
|
||||||
// if (stopLight.classList.contains('stop')) {
|
|
||||||
// status = 'on';
|
|
||||||
// }
|
|
||||||
// else {
|
|
||||||
// status = 'off';
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
else if (event.target === slowButton) {
|
|
||||||
status = slowLight.classList.contains('slow') ? 'on' : 'off';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
status = goLight.classList.contains('go') ? 'on' : 'off';
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`${event.target.textContent} bulb ${status}`);
|
|
||||||
});
|
|
||||||
})();
|
|
Loading…
x
Reference in New Issue
Block a user