Building Dynamic User Experiences
Now that we know how to create paths for different outcomes (if statements) and change what the user sees in the browser, let’s combine those big areas of knowledge to build a small app!
For this final section, we will all start with 🍴 this starter kit!
Warm Up
The first steps of building this Number Guesser will be very similar to the work you just did!
STEP 1: Write an event listener and a function skeleton.
STEP 2: When the function runs, log a message to the user letting them know they clicked the button.
Collect User Input
The one piece of information you don’t yet have is how to collect input from a user. Notice that in the HTML code we have an input tag:
<input type="number">
The input tag is a bit different from others in that it is self-closing, or doesn’t have a closing tag. That’s because there is no content that we would ever need to contain inside of the opening and closing tags!
To collect a numerical value that the user may have typed into a given input element, we can use the following JavaScript code:
var input = $('input');
var userInput = parseInt(input.val());
console.log(userInput);
Update Your Function
The work you do for this step should take place inside of your function:
STEP 3: Create a variable for the input element. Get the value of that element, and log it to the console to show the value they typed in. To check that this is working, you'll need to enter a number in the input field and click the button!
That’s a great start! Those console.logs() don’t show for the user though! They are a tool for developers only, but they won’t show on the browser. Instead of using a console.log, let’s show the user the number they typed, in the browser. We can use code like this:
feedbackText.text(userInput);
This line of code says “for the feedbackText variable, change the text inside of it’s HTML tags to be the value that is stored in the userInput variable”.
Final Touches
Think way back to the earlier section on if statements, because this is where they come in:
STEP 4: Instead of notifying your user of the number they typed, write an if statement to compare the users guess to the correct number.
Depending on if the user's guess is correct or incorrect, change the text of the "feedbackText" paragraph to a relevant message!
Building Dynamic User Experiences
- One we have a variety of tools - if statements and event listeners - we can combine them in different way to achieve different outcomes
- If you find yourself wondering “is it possible to…”, the answer is most likely “yes”!