sigonasr2/stoplight-event-exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve solution

Browse Source
This commit is contained in:
Ryan Sobol 2016-11-11 05:44:34 -08:00
parent 549e267eea
commit eec0a7ed3d
2 changed files with 69 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<title>Stoplight Exercise</title>
<link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8">
<script defer src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="controls">
@ -11,11 +12,11 @@
<h1 id="slowButton" class="button">Slow</h1>
<h1 id="goButton" class="button">Go</h1>
</div>
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<script src="script.js"></script>
</body>
</html>

118
script.js
View File

@ -9,68 +9,82 @@
the bottom light should turn green.
*/
var stopButton = document.querySelector("#stopButton");
var stopLight = document.getElementById('stopLight');
(function() {
'use strict';
stopButton.addEventListener("click", function(){
var color;
stopLight.style.backgroundColor === "red" ? color = "" : color = "red";
stopLight.style.backgroundColor = color;
});
const stopButton = document.querySelector('#stopButton');
const slowButton = document.querySelector('#slowButton');
const goButton = document.querySelector('#goButton');
stopButton.addEventListener("mouseenter", function(){
console.log(`Entered ${this.textContent} button`);
});
const stopLight = document.querySelector('#stopLight');
const slowLight = document.querySelector('#slowLight');
const goLight = document.querySelector('#goLight');
stopButton.addEventListener("mouseleave", function(){
console.log(`Left ${this.textContent} button`);
});
const controls = document.querySelector('#controls');
var slowButton = document.querySelector("#slowButton");
var slowLight = document.getElementById('slowLight');
// stopButton
stopButton.addEventListener('click', () => {
const color = stopLight.style.backgroundColor === 'red' ? '' : 'red';
slowButton.addEventListener("click", function(){
var color;
slowLight.style.backgroundColor === "orange" ? color = "" : color = "orange";
slowLight.style.backgroundColor = color;
});
stopLight.style.backgroundColor = color;
});
slowButton.addEventListener("mouseenter", function(){
console.log(`Entered ${this.textContent} button`);
});
stopButton.addEventListener('mouseenter', (event) => {
console.log(`Entered ${event.target.textContent} button`);
});
slowButton.addEventListener("mouseleave", function(){
console.log(`Left ${this.textContent} button`);
});
stopButton.addEventListener('mouseleave', (event) => {
console.log(`Left ${event.target.textContent} button`);
});
var goButton = document.querySelector("#goButton");
var goLight = document.getElementById('goLight');
// slowButton
slowButton.addEventListener('click', () => {
const color = slowLight.style.backgroundColor === 'orange' ? '' : 'orange';
goButton.addEventListener("click", function(){
var color;
goLight.style.backgroundColor === "green" ? color = "" : color = "green";
goLight.style.backgroundColor = color;
});
slowLight.style.backgroundColor = color;
});
goButton.addEventListener("mouseenter", function(){
console.log(`Entered ${this.textContent} button`);
});
slowButton.addEventListener('mouseenter', (event) => {
console.log(`Entered ${event.target.textContent} button`);
});
goButton.addEventListener("mouseleave", function(){
console.log(`Left ${this.textContent} button`);
});
slowButton.addEventListener('mouseleave', (event) => {
console.log(`Left ${event.target.textContent} button`);
});
var controls = document.querySelector('#controls');
// goButton
goButton.addEventListener('click', () => {
const color = goLight.style.backgroundColor === 'green' ? '' : 'green';
controls.addEventListener('click', function(event) {
var text = event.target.textContent;
var status;
if (text === 'Stop') {
status = stopLight.style.backgroundColor === 'red' ? 'on' : 'off';
} else if (text === 'Slow') {
status = slowLight.style.backgroundColor === 'orange' ? 'on' : 'off';
} else {
status = goLight.style.backgroundColor === 'green' ? 'on' : 'off';
}
console.log(`${text} bulb ${status}`);
});
goLight.style.backgroundColor = color;
});
goButton.addEventListener('mouseenter', (event) => {
console.log(`Entered ${event.target.textContent} button`);
});
goButton.addEventListener('mouseleave', (event) => {
console.log(`Left ${event.target.textContent} button`);
});
// controls
controls.addEventListener('click', (event) => {
if (event.target === controls) {
return;
}
let status;
if (event.target === stopButton) {
status = stopLight.style.backgroundColor === 'red' ? 'on' : 'off';
}
else if (event.target === slowButton) {
status = slowLight.style.backgroundColor === 'orange' ? 'on' : 'off';
}
else {
status = goLight.style.backgroundColor === 'green' ? 'on' : 'off';
}
console.log(`${event.target.textContent} bulb ${status}`);
});
})();