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
|
||||
|
||||
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
|
||||
* 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)
|
||||
**TIP**: All three bulbs can be on/off independently of one another.
|
||||
|
||||
### 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 {
|
||||
float: left;
|
||||
padding-top: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin: 90px 40px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin: 90px 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#traffic-light {
|
||||
height: 550px;
|
||||
width: 200px;
|
||||
float: left;
|
||||
background-color: #ababab;
|
||||
border-radius: 40px;
|
||||
margin: 30px 0;
|
||||
height: 550px;
|
||||
padding: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.bulb {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color: #111;
|
||||
border-radius: 50%;
|
||||
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>
|
||||
<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="index.js"></script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="controls">
|
||||
<h1 id="stopButton" class="button">Stop</h1>
|
||||
<h1 id="slowButton" class="button">Slow</h1>
|
||||
<h1 id="goButton" class="button">Go</h1>
|
||||
<div id="stopButton" class="button">Stop</div>
|
||||
<div id="slowButton" class="button">Slow</div>
|
||||
<div id="goButton" class="button">Go</div>
|
||||
</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>
|
||||
|
||||
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