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

Improve solution

Browse Source
solution
Ryan Sobol 8 years ago
parent 549e267eea
commit eec0a7ed3d
2 changed files with 82 additions and 67 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      index.html
  2. 144
      script.js

5
index.html
Unescape 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>

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

Write Preview
Loading…
Cancel
Save