Back to Setup Page

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, send an alert 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 any value that the user may have typed into a given input element, we can use the following JavaScript code:

var input = $('input');
var userInput = input.val();
alert(userInput);

We’ll want to take one more step, which may not feel necessary now but will save us a headache down the road. When we get user input from an input field, it comes through as a string - for example “6” or “17”. To use the comparison operators we learned about earlier, JavaScript needs to be provided with numbers. 6 is different from "6" in programming, as weird as it seems. So, we can parse the users input into an integer:

var input = $('input');
var userInput = parseInt(input.val());
alert(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 alert the user of 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 alerts can be really annoying though. Instead of sending an alert, let’s show the user the number they typed in, 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 store 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 users 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 …” to answer is most likely “yes”!

Next Section: Extensions

Wrap Up