- When the user clicks the
.signin
button,display
(or fade in) the.modal
window - When the user clicks the
.close
button,display
(or fade out) out the.modal
window - When the user clicks the
.submit
button, add an.error
class to both<input>
elements - When the user puts their cursor in one of the input fields, remove the
.error
class from both input elements - Now only remove the
.error
class from an individual<input>
when the cursor enters it - (Advanced) Allow the user to click the
.modal
to close itself
- Consider what happens when two elements that are overlapping are both waiting for a click: Click events will "bubble" (propagate) up the DOM tree. How could we stop an event from triggering on it's parents?
- (Advanced) When the user clicks
.submit
, only add the.error
class to the elements that have aval()
of "" (blank, meaning any text will prevent an error) - What happens if the user just adding spaces to the field? Find a function that will trim off the white spaces in a field to validate it.
- (Advanced) Try validating a field by adding/removing
.error
immediately after the cursor leaves one of the individual<input>
(rather than on submit)