readme.md

Javascript Basics 2 - Working with the DOM

• Fork this repository
• Clone your fork on your pc
• Each step has a prepared html file to work with, use it
• COMMIT AFTER EACH STEP, call each commit by the name of the step

References

• https://www.codecademy.com/learn/learn-javascript
• http://eloquentjavascript.net/
• https://learnxinyminutes.com/docs/javascript/

Goals:

• Learn basic DOM operations
• Competencies:
  • mouseover
  • form events
  • functions

Step 1

1. Target the image (use querySelector)
2. Add an event listener to it (use onMouseOver or addEventListener)
3. Change the image when the mouse is over it
4. Commit 🔑

Step 2

1. Target the input (use querySelector)
2. When the input loses focus, show a dialog saying "thank you for participating!" (user onblur or addEventListener)
3. Commit 🔑

Step 3

1. Create a div
2. target the div
3. target the input
4. When the input changes, display the new text in the div
5. Commit 🔑

Step 4

1. When "Reset" is pressed, clear all fields in the form
2. When "Reset" is pressed, show a "yes/no" dialog, and clear all fields IF the user presses "yes"
3. Commit 🔑

Step 5

1. Same as Step 1, but with 5 images.
2. Do it with one function!
3. Commit 🔑🔑

Step 6

1. Same as Step 5, but restore the original image when mouse is out of the image.
2. Do it with only two functions!
3. Commit 🔑🔑

Congrats!

You finished Javascript Basics 1! Send a merge/pull request