Complete these steps to create a signin prototype:
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 a val() 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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent