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
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:
- On line 6 in your
script.js
file, type something like:paragraph.innerText = "new text";
- 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
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:
- If the guess is less than the secret number, tell the user, "Not quite. Too low."
- If the guess is greater than the secret number, tell the user, "Oops. Too high."
- Otherwise, tell the user they guessed the number with the statement, "You did it!"
- 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.