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 |
97
index.js
97
index.js
@ -1,80 +1,23 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const stopButton = document.querySelector('#stopButton');
|
||||
const slowButton = document.querySelector('#slowButton');
|
||||
const goButton = document.querySelector('#goButton');
|
||||
|
||||
const stopLight = document.querySelector('#stopLight');
|
||||
const slowLight = document.querySelector('#slowLight');
|
||||
const goLight = document.querySelector('#goLight');
|
||||
|
||||
// part 1
|
||||
stopButton.addEventListener('click', () => {
|
||||
stopLight.classList.toggle('stop');
|
||||
|
||||
// or...
|
||||
// if (stopLight.classList.contains('stop')) {
|
||||
// stopLight.classList.remove('stop');
|
||||
// }
|
||||
// else {
|
||||
// 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;
|
||||
document.addEventListener("DOMContentLoaded",()=>{
|
||||
document.getElementById("controls").addEventListener("click",(clicked)=>{
|
||||
var lightPrefix = clicked.target.id.replace("Button","");
|
||||
var targetLight = document.getElementById(lightPrefix+"Light");
|
||||
if (!targetLight.classList.contains(lightPrefix)) {
|
||||
targetLight.classList.add(lightPrefix);
|
||||
console.log(lightPrefix+" bulb on.")
|
||||
} else {
|
||||
targetLight.classList.remove(lightPrefix);
|
||||
console.log(lightPrefix+" bulb off.")
|
||||
}
|
||||
})
|
||||
|
||||
let status;
|
||||
|
||||
if (event.target === stopButton) {
|
||||
status = stopLight.classList.contains('stop') ? 'on' : 'off';
|
||||
|
||||
// or...
|
||||
// if (stopLight.classList.contains('stop')) {
|
||||
// status = 'on';
|
||||
// }
|
||||
// else {
|
||||
// status = 'off';
|
||||
// }
|
||||
var buttons = document.getElementsByClassName("button");
|
||||
for (var i=0;i<buttons.length;i++) {
|
||||
buttons[i].addEventListener("mouseenter",(e)=>{
|
||||
console.log("Entered "+e.target.innerHTML+" button.")
|
||||
})
|
||||
buttons[i].addEventListener("mouseleave",(e)=>{
|
||||
console.log("Left "+e.target.innerHTML+" button.")
|
||||
})
|
||||
}
|
||||
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