For this assignment you'll be creating a Javascript painting app. When you're done, it should display this functionality.
Use the starter code and commit each step of the exercise.
- HTML, CSS & JavaScript
- The DOM & DOM Selectors
- Event Listeners & Event Handlers
- Fork and clone this repository.
- Fullfill the listed requirements.
- Make a pull request to turn your work in.
- When I click the "Set Color" button, it should change the color of the "brush" box to the color I specify in the input field.
- You can use
document.querySelector
(or another document method) to select the element, then add an event listener.
HINT: You will notice that the page refreshes whenever you click the button. You need to prevent this from happening using a method you have not used before. Google "javascript event prevent default". You can also reference this portion of the Events & Callbacks lesson plan.
- The same thing should happen when I press the enter key from inside the input field
- Create 20 divs of the "square" class and append them to the body
- Hint: use
.appendChild()
- Hint: use
- Add functionality so that when I click on each "square", it changes the color of that individual square to "green"
- Hint: either add the event listener while creating the squares, or listen for events on the
body
element
- Hint: either add the event listener while creating the squares, or listen for events on the
- Modify your code so that when I click on each "square", it changes to the color I set using my input instead of "green" every time.
- Modify the CSS so that the "square" class has a height and width of 10px and a margin of 0.
- Modify your code so that you are creating 8000 divs instead of 20.
- Change the event that changes your box colors from 'click' to 'mouseover'
- Paint a picture!
- Add a color swatch. You should have 3 boxes with the most recent 3 colors used. When you click on each of those boxes, it should set the current brush color back to that color.
- Refactor your code using event propogation.
Take a moment to refamiliarize yourself with the Plagiarism policy. Plagiarized work will not be accepted.
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.