Skip to content

Commit 18151dc

Browse files
PBJIPBJI
authored
Merge pull request #737 from Sumitwarrior7/master
Word Counter is added
2 parents de5d901 + 9624d57 commit 18151dc

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed

‎WordCounter/Sumitwarrior7/index.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f2f2f2;
6+
}
7+
8+
.container {
9+
max-width: 600px;
10+
margin: 0 auto;
11+
padding: 20px;
12+
background-color: #fff;
13+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
14+
border-radius: 5px;
15+
margin-top: 20px;
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
color: #333;
21+
}
22+
23+
textarea {
24+
width: 100%;
25+
height: 150px;
26+
margin-bottom: 10px;
27+
padding: 10px;
28+
border: 1px solid #ccc;
29+
border-radius: 5px;
30+
resize: none;
31+
}
32+
33+
.controls {
34+
display: flex;
35+
flex-wrap: wrap;
36+
justify-content: space-between;
37+
align-items: center;
38+
}
39+
40+
#char-limit {
41+
width: 80px;
42+
}
43+
44+
button {
45+
padding: 8px 16px;
46+
background-color: #333;
47+
color: #fff;
48+
border: none;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
margin-top: 10px;
52+
}
53+
54+
button:hover {
55+
background-color: #555;
56+
}
57+
58+
.highlight {
59+
margin-top: 20px;
60+
}
61+
62+
input[type="text"] {
63+
width: 200px;
64+
padding: 5px;
65+
border: 1px solid #ccc;
66+
border-radius: 5px;
67+
margin-right: 10px;
68+
}
69+
70+
.highlight-button {
71+
background-color: #f2a154;
72+
color: #fff;
73+
}
74+
75+
.highlight-button:hover {
76+
background-color: #ff9933;
77+
}
78+
79+
.highlighted {
80+
background-color: yellow;
81+
font-weight: bold;
82+
}

‎WordCounter/Sumitwarrior7/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<link rel="stylesheet" href="index.css" />
7+
<title>Word Counter</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Word Counter</h1>
12+
<textarea
13+
id="text-input"
14+
placeholder="Enter your text here..."
15+
></textarea>
16+
<div class="controls">
17+
<div id="word-count">Words: 0</div>
18+
<div id="char-count">Characters: 0</div>
19+
<div id="para-count">Paragraphs: 0</div>
20+
<input type="number" id="char-limit" placeholder="Character Limit" />
21+
<button id="count-button">Count</button>
22+
<button id="clear-button">Clear</button>
23+
</div>
24+
</div>
25+
<script src="index.js"></script>
26+
</body>
27+
</html>

‎WordCounter/Sumitwarrior7/index.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// Get references to HTML elements
2+
const textInput = document.getElementById("text-input");
3+
const wordCount = document.getElementById("word-count");
4+
const charCount = document.getElementById("char-count");
5+
const paraCount = document.getElementById("para-count");
6+
const countButton = document.getElementById("count-button");
7+
const clearButton = document.getElementById("clear-button");
8+
const charLimitInput = document.getElementById("char-limit");
9+
const highlightButton = document.getElementById("highlight-button");
10+
const highlightWordInput = document.getElementById("highlight-word");
11+
12+
// Add an event listener to the count button
13+
countButton.addEventListener("click", countWords);
14+
15+
// Add an event listener to the clear button
16+
clearButton.addEventListener("click", clearText);
17+
18+
// Add an event listener to the highlight button
19+
highlightButton.addEventListener("click", highlightWords);
20+
21+
// Add an event listener to the character limit input
22+
charLimitInput.addEventListener("input", checkCharacterLimit);
23+
24+
// Save the text input and counts to local storage
25+
function saveData() {
26+
localStorage.setItem("text", textInput.value);
27+
localStorage.setItem("words", wordCount.textContent);
28+
localStorage.setItem("chars", charCount.textContent);
29+
localStorage.setItem("paras", paraCount.textContent);
30+
}
31+
32+
// Load the saved data from local storage
33+
function loadData() {
34+
textInput.value = localStorage.getItem("text") || "";
35+
wordCount.textContent = localStorage.getItem("words") || "Words: 0";
36+
charCount.textContent = localStorage.getItem("chars") || "Characters: 0";
37+
paraCount.textContent = localStorage.getItem("paras") || "Paragraphs: 0";
38+
}
39+
40+
// Function to count words, characters, and paragraphs
41+
function countWords() {
42+
const text = textInput.value;
43+
const words = text.split(/\s+/).filter((word) => word !== "");
44+
const characters = text.length;
45+
const paragraphs = text
46+
.split("\n")
47+
.filter((para) => para.trim() !== "").length;
48+
49+
wordCount.textContent = `Words: ${words.length}`;
50+
charCount.textContent = `Characters: ${characters}`;
51+
paraCount.textContent = `Paragraphs: ${paragraphs}`;
52+
53+
saveData();
54+
}
55+
56+
// Function to clear the textarea and counts
57+
function clearText() {
58+
textInput.value = "";
59+
wordCount.textContent = "Words: 0";
60+
charCount.textContent = "Characters: 0";
61+
paraCount.textContent = "Paragraphs: 0";
62+
63+
saveData();
64+
}
65+
66+
// Function to highlight specific words in the text
67+
function highlightWords() {
68+
const text = textInput.value;
69+
const wordToHighlight = highlightWordInput.value;
70+
const highlightedText = text.replace(
71+
new RegExp(wordToHighlight, "g"),
72+
'<span class="highlighted">$&</span>'
73+
);
74+
75+
// Display the highlighted text in the textarea
76+
textInput.innerHTML = highlightedText;
77+
78+
saveData();
79+
}
80+
81+
// Function to check character limit
82+
function checkCharacterLimit() {
83+
const charLimit = parseInt(charLimitInput.value);
84+
const text = textInput.value;
85+
const characters = text.length;
86+
87+
if (charLimit && characters > charLimit) {
88+
charCount.style.color = "red";
89+
charCount.textContent = `Characters: ${characters} (Exceeding limit)`;
90+
} else {
91+
charCount.style.color = "black";
92+
charCount.textContent = `Characters: ${characters}`;
93+
}
94+
95+
saveData();
96+
}
97+
98+
// Load saved data when the page loads
99+
window.addEventListener("load", loadData);

0 commit comments

Comments
 (0)