javascript-basics-02.md

Basics-02

• Get to your submission folder under exercises/javascript-basics-02

• Each step has a prepared html file to work with, use it

• You should create a javascript file for each step whitin the step folder.

  e.g : step_1 => index.html + Step_1.js

• 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 pull request