Disclaimer: The following article was written from the perspective of a Visual Studio Code/Mac user.
This article details the process of creating a web app that counts the number of words in a user's input.
Step 1: Create an empty folder (directory) in your text editor and navigate to that folder
Your text editor is the piece of software you use to write your code (e.g., Visual Studio Code, Atom, Sublime Text). You can create an empty folder in your text editor via your computer's Terminal. Open the Terminal and, assuming you are in a fresh Terminal session, type in
mkdir word-counter
cd word-counter
mkdir word-counter will create a new folder called word-counter. cd word-counter will navigate you inside that folder. Now, enter in the command that opens up your text editor. For instance, if you have VSCode, type in
code .
Step 2: Assuming you have pulled up an empty folder in your text editor, create your index.html file
Your index.html file will contain your HTML code. Create a new file and call it index.html. Copy and paste the standard HTML boilerplate code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<script src="" async defer></script>
</body>
</html>
Between the body tags (between <body> and </body>) and above the script tag (above <script src="" async defer></script>), type in the following code:
<h1>Word Counter</h1>
This will create a header with the text "Word Counter".
Now we need to make a form for our user's input. Here is the code for that:
<form id="form">
<label>Enter text:</label>
<br />
<input type="text" id="user-input-box" style="width:650px" />
<br />
<br />
<input type="submit" style="width:200px" value="Get word count" />
</form>
This code has a label, a text input box, and a submit button. From top to bottom:
-
<form id="form">creates an HTML form and gives the entire form an id of "form". We will later use JavaScript to select this form based on its unique id of "form". This HTML tag needs a closing tag of</form>, which we will write when we're done writing the innards of the form. -
<label>Enter text:</label>gives the form a label of "Enter text:". -
<br />denotes a new line. -
<input type="text" id="user-input-box" style="width:650px" />creates a text input box with an id of "user-input-box" and stretches its width out to a length of 650 pixels. -
<input type="submit" style="width:200px" value="Get word count" />creates a submit button, stretches it out to 200px in length, and replaces the submit button's text with "Get word count". -
</form>closes the form that was opened on the first line (<form id="form">).
Now we need to display the word count to the user via the following code:
<h3 id="word-count-area">The word count is 0.</h3>
(Notice that the word count is initialized to 0. Our future JavaScript code will change that 0 into the proper word count.)
Next, we need to update our HTML script tag to include our soon to be created JavaScript file. We do this by locating this line (just above the </body>):
<script src="" async defer></script>
and adding some text inside the parentheses. Now the line should read:
<script src="index.js" async defer></script>
THE COMPLETED HTML FILE (index.html) SHOULD LOOK LIKE THIS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>Word Counter</h1>
<form id="form">
<label>Enter text:</label>
<br />
<input type="text" id="user-input-box" style="width:650px" />
<br />
<br />
<input type="submit" style="width:200px" value="Get word count" />
</form>
<br />
<h3 id="word-count-area">The word count is 0.</h3>
<script src="index.js" async defer></script>
</body>
</html>
Step 3: Uh oh, looks like it's JavaScript time
In your text editor, create a new file called index.js. This file will be where our JavaScript code lives.
First, we need to select the appropriate HTML elements with JavaScript. We will begin by selecting our HTML form with this line:
let form = document.getElementById("form");
More exactly, this JavaScript code selects the HTML code with the id of "form".
Now we need to select the user's input box and the area in which we will update the word count. This is accomplished with the following two lines:
let userInputBox = document.getElementById("user-input-box");
let wordCountArea = document.getElementById("word-count-area");
Now we need to add an event listener to our form. Whenever the form's submit button is clicked, we want the code within the event listener function to fire. The foundation of the event listener code is the following:
form.addEventListener("submit", event => {
// When the form's submit button is clicked, the code in
// this area will run.
})
Now we need to fill in the area where the code will run with some JavaScript. Inside the event listener function:
- We'll first prevent the page from refreshing upon submit with this line:
event.preventDefault();. - We'll get the user's input with this line:
let userInput = userInputBox.value.trim();. - We'll split the user's input string into an array where each word is a separate element in the array with this line:
let array = userInput.split(" ");. - We'll get the number of elements in the array with this line:
let count = array.length;. This will be our final word count answer. - We'll update the HTML file with the word count by writing this code:
wordCountArea.innerText = `The word count is ${count}.`;
THE COMPLETED JAVASCRIPT FILE (index.js) SHOULD LOOK LIKE THIS:
let form = document.getElementById("form");
let userInputBox = document.getElementById("user-input-box");
let wordCountArea = document.getElementById("word-count-area");
form.addEventListener("submit", event => {
event.preventDefault();
let userInput = userInputBox.value.trim();
let array = userInput.split(" ");
let count = array.length;
wordCountArea.innerText = `The word count is ${count}.`;
})
Step 4: Test the app
Open up your app in a new internet browser tab by typing into your text editor's terminal open index.html. See if your app works by entering in a piece of text, clicking the submit button ("Get word count") and verifying that the word count the app displays is correct.
Top comments (0)