Uncover the art of word analysis with our Word Count Tool project using JavaScript. In this article, we’ll guide you through the development process and provide the source code to create a handy utility for counting words, helping you manage and analyze text content with ease.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Word Length Calcuator</title>
</head>
<body>
<h1>Type a word in the box</h1>
<input type="text" id="str">
<div id="output"></div>
<button id="btn"><h2>Click to calculate word length</h2></button>
<script src="script.js"></script>
</body>
</html>
style.css
body{
background-color:#FA8072;
text-align: center;
}
input{
margin: 100px auto 100px;
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#output{
margin-top: 45px;
width: 100px;
background: lightgreen;
margin: 100px auto 100px;
}
#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:blue;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}
h1{
color: #000;
margin-top: 50px;
}
script.js
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `<h1>${count}</h1>`
});
Latest posts by ideasorblogs (see all)
- Create a Python program to find the DNS record - November 26, 2023
- Billing system using Python project with source code - November 20, 2023
- Python Programming questions with real examples PDF & slides - October 31, 2023