Forms Solutions
Warm Up
This Warm Up is intended to give scholars the opportunity to start thinking about user experience (UX) and how important it is that we write our code with that in mind.
Turn & Talk
There are no right or wrong answers here - every user may approach an application with different expectations, so as developers we must design our applications in a clear way that help users shape expectations.
It’s recommended that you lead a short discussion/have scholars share out after doing some research!
Try It: HTML Forms
In a new CodePen, create an HTML with at least 4 inputs. Use at least 2 different types of inputs.
See the Pen Try It: HTML Forms by Turing KWK (@turing-kwk) on CodePen.
Turn & Talk
While referencing the CodePen above, do your best to answer each question with your parter.
- What is the name of the event handler?
getNameAndLogToConsole
- Based on the name of the event handler, what do you think its job is to do?
- Access the element where the user typed their name in, get the text they typed in, and log it to the console.
- Which part of this code looks new to you?
- the
.val()at the end of line 6
- the
- What do you predict that new piece of code does for us?
- It seems like it is probably extracting the text from inside the HTML element that we accessed with
$('.name-input'). So, pulling out the String that the user typed in the input field.
- It seems like it is probably extracting the text from inside the HTML element that we accessed with
Try It: Refactor into a Form
See the Pen Try It: Refactor to a FORM Solution by Turing KWK (@turing-kwk) on CodePen.
Practice: Forms
Create a new CodePen. Don’t forget to load jQuery into the pen!
Mild Challenge: Build a small site that has two input fields and a button to submit. You can choose what type of information the user needs to provide! Just make sure that the user gets clear directions on what they should enter. When the user clicks the button, they should see a message that includes both pieces of information that they provided appear on the screen.
See the Pen Practice: Forms by Turing KWK (@turing-kwk) on CodePen.
Medium Challenge: Build a small site that has two input fields and a button to submit. The user should see directions instructing them to create a new password, then type that same password in the second input field. When they click the button, they should get one of two messages: “Oops! Those don’t match.” or “Great password! It’s been reset.” based on if the two inputs match each other.
See the Pen Forms: Medium Practice by Turing KWK (@turing-kwk) on CodePen.
Spicy Challenge: You can add this on to either the Mild or Medium Challenge. If the user didn’t complete one of the input fields, don’t let them click the button. You’ll need to look into the HTML attribute disabled (and how to use it with jQuery specificallyu) and a conditional!
See the Pen Forms: Spicy Practice by Turing KWK (@turing-kwk) on CodePen.