| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Color Picker</title> | |
| </head> | |
| <body> | |
| <h2>Click a color</h2> | |
| <div class="color-pickers"> | |
| <div class="color-picker" id="red"></div> | |
| <div class="color-picker" id="blue"></div> | |
| <div class="color-picker" id="yellow"></div> | |
| <div class="color-picker" id="green"></div> | |
| <div class="color-picker" id="orange"></div> | |
| </div> | |
| </body> | |
| </html> |
Using the provided starter HTML and CSS, make a color picker tool that works like this.
When you have finished this step, submit a snapshot.
Now a new challenge: change your code so that it works the same, but only contains the word click one time.
You should end up with about six lines of JavaScript code. (There is no specific rule about this, though)
Submit again.
Delete all the .color-picker <div> tags from the HTML. Add them back in with JavaScript.
| {"enabledLibraries":["jquery"],"hiddenUIComponents":["console", "editor.css"]} |
| h2 { | |
| text-align: center; | |
| } | |
| .color-pickers { | |
| display: flex; | |
| height: 20vh; | |
| } | |
| .color-picker { | |
| flex: 0 1 100%; | |
| cursor: pointer; | |
| } | |
| #red { | |
| background-color: red; | |
| } | |
| #blue { | |
| background-color: blue; | |
| } | |
| #yellow { | |
| background-color: yellow; | |
| } | |
| #green { | |
| background-color: green; | |
| } | |
| #orange { | |
| background-color: orange; | |
| } |