Compare commits
32 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
42cd4def25 | ||
|
|
43488eeaea | ||
|
|
0336132c61 | ||
|
|
4f58ad1fe5 | ||
|
|
eb209062e2 | ||
|
|
71e29f11e0 | ||
|
|
4764a09973 | ||
|
|
309de303d0 | ||
|
|
50ad6cc1c5 | ||
|
|
2ac097d1ac | ||
|
|
ba764541e2 | ||
|
|
f6a2117f78 | ||
|
|
c6c2d8603f | ||
|
|
030b3dad90 | ||
|
|
a66d9832f6 | ||
|
|
725a770a94 | ||
|
|
69ab2f12d0 | ||
|
|
7098962ce3 | ||
|
|
12ccebe93c | ||
|
|
a0c30c23ad | ||
|
|
e1e7877f94 | ||
|
|
34474839ec | ||
|
|
25674b5ce6 | ||
|
|
36ebf6f0b4 | ||
|
|
8cfc31392b | ||
|
|
480f94030e | ||
|
|
a5bc7aa76c | ||
|
|
d489b8e893 | ||
|
|
eec0a7ed3d | ||
|
549e267eea | ||
|
|
a68eb6a985 | ||
|
a3fcfe763f |
55
README.md
55
README.md
@ -1,15 +1,54 @@
|
|||||||
# Stoplight Exercise
|
# Stoplight Exercise
|
||||||
|
|
||||||
As always, fork and clone this repo. Submit a Pull Request when you are done.
|
As always, fork and clone this repository.
|
||||||
|
|
||||||
## Stoplight
|
|
||||||
|
|
||||||
Wire up the buttons to the left of the stoplight to toggle the on/off state of each bulb.
|
## Part 1
|
||||||
|
|
||||||
|
Add DOM event listeners and handlers to toggle the on/off state of three bulbs.
|
||||||
|
|
||||||
## Hints
|
- When a user clicks on the "Stop" button, toggle the [stop bulb's color][stop-color].
|
||||||
|
- When a user clicks on the "Slow" button, toggle the [slow bulb's color][slow-color].
|
||||||
|
- When a user clicks on the "Go" button, toggle the [go bulb's color][go-color].
|
||||||
|
|
||||||
* Retrieve a DOMElement with [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or similar method
|
**TIP**: All three bulbs can be on/off independently of one another.
|
||||||
* Attach event listeners with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
|
|
||||||
* Set the color of a bulb with [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
|
### Resources
|
||||||
|
|
||||||
|
- [MDN - `Document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
|
||||||
|
- [MDN - `EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
|
||||||
|
- [MDN - `click`](https://developer.mozilla.org/en-US/docs/Web/Events/click)
|
||||||
|
- [MDN - `Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
|
||||||
|
|
||||||
|
## Part 2
|
||||||
|
|
||||||
|
Add new DOM event listeners and handlers to log the mouse state of each button.
|
||||||
|
|
||||||
|
- When a user's mouse enters a button, log `"Entered <textContent> button"` to the console.
|
||||||
|
- When a user's mouse leaves a button, log `"Left <textContent> button"` to the console.
|
||||||
|
|
||||||
|
**TIP:** Each event type will need a separate event listener.
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
|
- [MDN - `mouseenter`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)
|
||||||
|
- [MDN - `mouseleave`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave)
|
||||||
|
- [MDN - `Event.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
|
||||||
|
|
||||||
|
## Bonus
|
||||||
|
|
||||||
|
Add **one** DOM event listener and **one** handler to log the state of each bulb.
|
||||||
|
|
||||||
|
- When a user clicks a button that just turned on, log`"<textContent> bulb on"` to the console.
|
||||||
|
- When a user clicks a button that just turned off, log`"<textContent> bulb off"` to the console.
|
||||||
|
|
||||||
|
**TIP:** A click on only a button should cause a message to be logged to the console.
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
|
- [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate)
|
||||||
|
|
||||||
|
[stop-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L39
|
||||||
|
[slow-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L43
|
||||||
|
[go-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L47
|
||||||
|
|||||||
@ -1,33 +1,49 @@
|
|||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
#controls {
|
#controls {
|
||||||
float: left;
|
margin-top: 30px;
|
||||||
padding-top: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background-color: gray;
|
background-color: gray;
|
||||||
color: white;
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 90px 40px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 90px 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#traffic-light {
|
#traffic-light {
|
||||||
height: 550px;
|
|
||||||
width: 200px;
|
|
||||||
float: left;
|
|
||||||
background-color: #ababab;
|
background-color: #ababab;
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
|
height: 550px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bulb {
|
.bulb {
|
||||||
height: 150px;
|
|
||||||
width: 150px;
|
|
||||||
background-color: #111;
|
background-color: #111;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 25px auto;
|
margin: 25px auto;
|
||||||
transition: background 500ms;
|
height: 150px;
|
||||||
|
transition: background 300ms;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stop {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slow {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.go {
|
||||||
|
background-color: green;
|
||||||
}
|
}
|
||||||
11
index.html
11
index.html
@ -3,19 +3,20 @@
|
|||||||
<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="index.js"></script>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="controls">
|
<div id="controls">
|
||||||
<h1 id="stopButton" class="button">Stop</h1>
|
<div id="stopButton" class="button">Stop</div>
|
||||||
<h1 id="slowButton" class="button">Slow</h1>
|
<div id="slowButton" class="button">Slow</div>
|
||||||
<h1 id="goButton" class="button">Go</h1>
|
<div id="goButton" class="button">Go</div>
|
||||||
</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>
|
||||||
|
|||||||
80
index.js
Normal file
80
index.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
(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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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}`);
|
||||||
|
});
|
||||||
|
})();
|
||||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
10
script.js
10
script.js
@ -1,10 +0,0 @@
|
|||||||
/*
|
|
||||||
Write JS to make this stoplight work.
|
|
||||||
|
|
||||||
When I click on the 'stop' button,
|
|
||||||
the top light should turn red.
|
|
||||||
When I click on the 'slow' button
|
|
||||||
the middle light should turn orange.
|
|
||||||
When I click on the 'go' button
|
|
||||||
the bottom light should turn green.
|
|
||||||
*/
|
|
||||||
BIN
stoplight.gif
Normal file
BIN
stoplight.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Loading…
x
Reference in New Issue
Block a user