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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Stoplight Exercise</title> <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> </head>
<body> <body>
<div id="controls"> <div id="controls">
@ -11,11 +12,11 @@
<h1 id="slowButton" class="button">Slow</h1> <h1 id="slowButton" class="button">Slow</h1>
<h1 id="goButton" class="button">Go</h1> <h1 id="goButton" class="button">Go</h1>
</div> </div>
<div id="traffic-light"> <div id="traffic-light">
<div id="stopLight" class="bulb"></div> <div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div> <div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div> <div id="goLight" class="bulb"></div>
</div> </div>
<script src="script.js"></script>
</body> </body>
</html> </html>

104
script.js
View File

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