Skip to content

Commit 9bd3079

Browse files
king04amanking04aman
committed
add project: word-counter
1 parent 4fd55bc commit 9bd3079

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎Word-Counter/README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Word Length Calculator
2+
3+
**A simple tool to calculate the length of a word**
4+
This project allows users to input a word, then calculates and displays the word's length when the button is clicked.
5+
6+
### Functionalities
7+
- **Word Input**: Users can input a word in the text field provided.
8+
- **Length Calculation**: The length of the word is calculated and displayed upon clicking the button.
9+
- **Clear Output Display**: The result is shown in a clean and easy-to-read format.
10+
11+
## Description
12+
This simple project demonstrates how to capture user input, process it, and display the result dynamically using JavaScript. The core functionality is centered around calculating the length of the inputted word and displaying it in real-time when a button is clicked.
13+
14+
### Key Concepts:
15+
- **DOM Manipulation**: The project uses native JavaScript to manipulate the DOM, capturing user input and updating the HTML dynamically.
16+
- **Event Handling**: A click event is used to trigger the calculation and update the result.
17+
18+
### Edge Cases & Assumptions:
19+
- If no word is entered, the result will display "0" as the length.
20+
- Whitespace before or after the word is counted as part of the string length, as there is no trimming applied.
21+
22+
## Prerequisites
23+
No additional libraries are required as the project uses native JavaScript, HTML, and CSS.
24+
25+
## Installing Instructions
26+
1. Clone the repository:
27+
```bash
28+
git clone https://github.com/your-username/All-In-One-Javascript-Projects.git
29+
```
30+
2. Navigate to the project directory:
31+
```bash
32+
cd All-In-One-Javascript-Projects/Word-Length-Calculator
33+
```
34+
3. Open index.html in your preferred web browser to run the application.
35+
36+
## Author
37+
Aman Kumar (@[king04aman](https://github.com/king04aman/))

‎Word-Counter/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Word Length Calculator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Type a word in the box</h1>
13+
<input type="text" id="str" placeholder="Enter a word...">
14+
<button id="btn">Click to calculate word length</button>
15+
<div id="output"></div>
16+
</div>
17+
<script src="main.js"></script>
18+
</body>
19+
</html>

‎Word-Counter/main.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let button = document.getElementById('btn');
2+
3+
button.addEventListener('click', function() {
4+
let input = document.getElementById('str').value;
5+
let charCount = input.length;
6+
let wordCount = input.trim().split(/\s+/).filter(Boolean).length;
7+
8+
// Display the word and character count
9+
let outputDiv = document.getElementById('output');
10+
outputDiv.innerHTML = `<h2>Character Count: ${charCount}</h2><h2>Word Count: ${wordCount}</h2>`;
11+
});

‎Word-Counter/style.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
background-color: #FA8072;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
margin: 0;
8+
font-family: Arial, sans-serif;
9+
}
10+
11+
.container {
12+
text-align: center;
13+
background-color: white;
14+
padding: 50px;
15+
border-radius: 15px;
16+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
17+
}
18+
19+
input {
20+
width: 350px;
21+
height: 40px;
22+
display: block;
23+
margin: 20px auto;
24+
text-align: center;
25+
border-radius: 5px;
26+
border: 2px solid #ddd;
27+
font-size: 18px;
28+
padding: 5px;
29+
}
30+
31+
#output {
32+
margin-top: 25px;
33+
font-size: 24px;
34+
color: #333;
35+
background: lightgreen;
36+
padding: 20px;
37+
border-radius: 10px;
38+
display: inline-block;
39+
}
40+
41+
#btn {
42+
width: 350px;
43+
height: 50px;
44+
color: #fff;
45+
background-color: blue;
46+
border: none;
47+
border-radius: 10px;
48+
font-size: 18px;
49+
cursor: pointer;
50+
margin-top: 20px;
51+
}
52+
53+
h1 {
54+
color: #333;
55+
}
56+
57+
#btn:hover {
58+
background-color: darkblue;
59+
}

0 commit comments

Comments
 (0)