Making a straightforward but dynamic word counter application is a great way to start working with web development. This blog will go into additional detail about how it functions and is built using javascript, css and html.
Setting up our web dev project.
First, we’ll create our project directory, which will be called, for example, “Codespeedy”. After that, enter this directory in Visual Studio Code. Three additional files are required: let index.html, style.css and script.js.
1. index.html
The web application’s structure is provided by the html file. It consists of following components:
- The <head> section includes connections to external resources, the document title, and meta data.
- <div class>,<span id>,<script> tag to link external scripts
- <h1> for the display title and <textarea> for user input are all included in the <body> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<textarea id="textInput" placeholder="Write Your Text"></textarea>
<div class="word-count">
<p>Word Count: <span id="wordCount">0</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. style.css
The web application can be visually attractive by improving with the help of Css file. Important key elements includes:
- Font family is use for body styling
- Container styling consist of background and padding
- Textarea styling make adjustment in font size, width and height
- Word count styling is use to style the word count and text count.
body {
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: white;
}
.container {
background-color: aqua;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
h1 {
margin-bottom: 20px;
color: red;
font-weight: 700;
}
textarea {
width: 75%;
height: 150px;
padding: 15px;
border: 1px solid aqua;
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
resize: none;
box-shadow: insert 0 1px 3px rgba(0, 0, 0, 0.1);
transition: border 0.3 ease;
}
textarea:focus {
border: 1px solid green;
outline: none;
}
.word-count {
font-size: 18px;
color: blueviolet;
}
#wordCount {
font-weight: 500;
color: blue;
}
3. script.js
The js code updates the word count dynamically as the user types, adding interaction to the web application. the primary role includes:
- Event Listener : keep an eye out for text area input events.
- Calculates the word count by measuring the length of the word array and then refreshes the word count display.
document.getElementById('textInput').addEventListener('input',function() {
const text = this.value.trim();
const wordCount = text === '' ? 0 : text.split(/\s+/).length;
document.getElementById('wordCount').textContent = wordCount;
});
- OUTPUT
The Word Counter Application is a unified, functional and very pleasing result of integration of Html, Css and Javascript.