Apply Today to our Software Engineering Program & check out our scholarships!

Go Back

User Input

Our programs haven’t been very exciting so far because we already know what will happen just by looking at the code. What if your program incorporated dynamic input from the user? For Front-End development, that’s where HTML comes into play!

What is HTML?

Of all of the major technologies used on the web, on either the Front-End or the Back-End, HTML, or Hyper Text Markup Language, is the oldest. In the beginning, the web was just a bunch of HTML documents that you wrote by hand. They had these cool things called hyperlinks that would allow a user to click on a word on one page and be taken to another page.

HTML is still an essential part of modern web applications. It holds the content and creates the structure of a webpage.

Explore

To begin, let's look at the code in this Replit.

After forking the replit, be sure to open the dev tools, then take a few minutes to look through the code in all the different files.

Here are some things to consider as you explore:

  • Does anything happen when you hit the green Run button?
  • What about if we type something in the input and click on the button - do we see anything print out in the console?

After exploring, let’s take a look at some specific parts of the code below:

Note: We are going to look at the code bit by bit, so we are not seeing all the parts of the code at once.

HTML

<p>Hello World!</p>
<input type="text" placeholder=" type something..." />
<button>Click Me!</button>

HTML is made up of a series of elements. Each of the lines above represents a different element. In order, we have one for putting text on the page, another for grabbing input from the user, and lastly a button that can be clicked on!

JavaScript

var paragraph = document.querySelector('p'); // a variable for the paragraph element
var input = document.querySelector('input'); // a variable for the input element

var userInput = input.value; // a variable that stores the input from the user
console.log(paragraph.innerText); // printing the text of the paragraph to the console
console.log(userInput); // printing any text the user writes to the console

Takeaways

  • We have some variables declared that represent HTML elements, such as the paragraph variable and the input variable.
  • The userInput variable repesents what the user types into the input field in the browser.
  • paragraph.innerText represents the text inside of our paragraph element.

Changing HTML from JavaScript

Displaying the information that’s already on the page, in the console, is not all that helpful. It was just a stepping stone.

The next stepping stone is learning how to change the text inside an HTML element from our JavaScript code.

Apply & Explore

Using the Replit you just forked:

  1. On line 6 in your script.js file, type something like: paragraph.innerText = "new text";
  2. Hit Run and look in the mini browser - it should display the text you typed in that last line of code!

Listening for Button Clicks

You may have noticed that the code you wrote changed the title of the page whenever we hit the Run button, and there were some other lines of code that only printed to the console when we clicked on the Click Me! button from the user interface.

What if we want to run some code that only happens when the button is clicked?

For now, we just need to know that the following code is responsible for running the code that happens when the button is cliked:

var button = document.querySelector('button');

button.addEventListener('click', doSomething);

function doSomething() {
  // code you want to be run ONLY when button
  // is clicked, goes here.
}

Next Level

In the previous `Apply and Explore`, we changed the title in our HTML, but it happened on page load, so it wasn't very exciting.

Your Challenge: Combine the two new pieces of knowledge/skill you have to allow the user to change the title when the button is clicked.

Hint: You will need to use the paragraph.innerText and set it equal to userInput

Solution:

Here is our revised script.js file:

The code for the script.js file. The first 3 lines declare varaibles for the paragraph element, input element, and button element. The fourth line adds an event listener to the button element. Lines 7 - 10 are the code to run when the button is clicked. The code changes the text of the parapgrah to match what the user wrote in the input field.

Inside of the doSomething() function, we set the text of the paragraph equal to the value that the user typed into the input field!

Building a "Guess the Number" Game

Use this replit as a starting point. We are going to build a “Guess the Number” game for a user in the console. In the starter kit, you already have a secretNumber variable assigned to 6 and a some other JavaScript that connects the HTML to the game. Follow the steps below to keep going!

Inside of the checkGuess function, write some code that will do the following:

  1. If the guess is less than the secret number, tell the user, "Not quite. Too low."
  2. If the guess is greater than the secret number, tell the user, "Oops. Too high."
  3. Otherwise, tell the user they guessed the number with the statement, "You did it!"
  4. Test your code a few times to make sure you can generate all 3 responses.

Hint: You will need to put together what we learned about Control Flow in the previous lesson, with changing the text on the screen.

Up Next