Skip to content

Commit 07f40d0

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1189 from dhruti26/new_files
Added Word Counter Website
2 parents c634668 + dbc13fc commit 07f40d0

3 files changed

Lines changed: 283 additions & 0 deletions

File tree

‎Projects/Word Counter/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!--Word Counter is a simple responsive website used to count number of words,characters,special character etc
2+
written in the message
3+
and Tech Stack used are :
4+
1.HTML
5+
2.CSS
6+
3.Javascript
7+
-->
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8">
12+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14+
<link rel="stylesheet" href="style.css">
15+
<title>Word Counter Website</title>
16+
</head>
17+
<body>
18+
<div class="ui-input-container">
19+
<h1> <center>Word Counter </center> </h1>
20+
<label class="ui-form-input-container">
21+
<textarea class="ui-form-input" id="word-count-input" placeholder="Enter your message here.."></textarea>
22+
</label>
23+
</div>
24+
<h3> <center> <button class="clear" onclick="reset()"> Clear Message </button> </center></h3>
25+
<div class="output">
26+
<div class="counts">
27+
<p id="word-count">0</p>
28+
<p id="character-count">0</p>
29+
<p id="alphabets">0</p>
30+
<p id="numbers">0</p>
31+
<p id="white-space">0</p>
32+
<p id="special-character">0</p>
33+
</div>
34+
<div class="names">
35+
<p>words</p>
36+
<p>characters</p>
37+
<p>Alphabets</p>
38+
<p>Numbers</p>
39+
<p>White Space</p>
40+
<p>Special Character</p>
41+
</div>
42+
</div>
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎Projects/Word Counter/script.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
var input = document.querySelector("#word-count-input");
2+
var total_word = document.querySelector("#word-count");
3+
var total_character = document.querySelector("#character-count");
4+
var alphabets = document.querySelector('#alphabets');
5+
var white_space = document.querySelector('#white-space');
6+
var number = document.querySelector('#numbers');
7+
var special_character = document.querySelector('#special-character');
8+
window.addEventListener(
9+
"input",
10+
function (event) {
11+
if (event.target.matches("#word-count-input")) {
12+
count();
13+
}
14+
},
15+
false
16+
);
17+
const reset = () => {
18+
document.getElementById("word-count").innerHTML="0";
19+
document.getElementById("character-count").innerHTML="0";
20+
document.getElementById("alphabets").innerHTML="0";
21+
document.getElementById("white-space").innerHTML="0";
22+
document.getElementById("numbers").innerHTML="0";
23+
document.getElementById("special-character").innerHTML="0";
24+
var textbox=document.getElementById("word-count-input");
25+
textbox.value="";
26+
}
27+
function count(){
28+
29+
let text = input.value;
30+
31+
//Count Total words
32+
var TotalWords = text.split(/[\n\r\s]+/g).filter(function (word) {
33+
return word.length > 0;
34+
});
35+
total_word.innerHTML = TotalWords.length;
36+
37+
//Count Total Characters
38+
let TotalCharacter = text.length;
39+
total_character.innerHTML = TotalCharacter;
40+
41+
//Count Alphabets
42+
// here /g means Global, and causes the replace call to replace all matches(every occurence),
43+
let text_Without_Whitespace = text.replace(/\s+/g, ""); // here \s matches with each whitespace replace with no space(remove it)
44+
let Alphabets_Without_Numbers = text_Without_Whitespace.replace(/[0-9]/g, "");
45+
let Alphabets_Without_Punctuation = Alphabets_Without_Numbers.replace(/[|\\+@<>'"?.,\/#!$%\^&\*;:{}\[\]=\-_`~()]/g, "");
46+
47+
alphabets.innerHTML = Alphabets_Without_Punctuation.length;
48+
49+
//Count Numbers
50+
let Number = text.replace(/[^\d]/g, ''); // here /d matches any single number - here replace all characters except number[^]
51+
number.innerHTML = Number.length;
52+
53+
//Count White-Space
54+
let WhiteSpace = text.replace(/[a-zA-Z0-9|\\+@<>'"?.,\/#!$%\^&\*;:{}\[\]=\-_`~()]/g, '');
55+
white_space.innerHTML = WhiteSpace.length;
56+
57+
//Count Special Characters
58+
let SpecialCharacter = text_Without_Whitespace.replace(/[a-zA-Z0-9]/g, '');
59+
special_character.innerHTML = SpecialCharacter.length;
60+
61+
// Changing Colours
62+
if(TotalWords.length > 0){
63+
total_word.style.color = 'red';
64+
}
65+
else{
66+
total_word.style.color = 'black';
67+
}
68+
69+
if(TotalCharacter > 0){
70+
total_character.style.color = 'red';
71+
}
72+
else{
73+
total_character.style.color = 'black';
74+
}
75+
76+
if(Alphabets_Without_Punctuation.length > 0){
77+
alphabets.style.color = 'red';
78+
}
79+
else{
80+
alphabets.style.color = 'black';
81+
}
82+
83+
if(Number.length > 0){
84+
number.style.color = 'red';
85+
}
86+
else{
87+
number.style.color = 'black';
88+
}
89+
90+
if(WhiteSpace.length > 0){
91+
white_space.style.color = 'red';
92+
}
93+
else{
94+
white_space.style.color = 'black';
95+
}
96+
97+
if(SpecialCharacter.length > 0){
98+
special_character.style.color = 'red';
99+
}
100+
else{
101+
special_character.style.color = 'black';
102+
}
103+
}

‎Projects/Word Counter/style.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
body{
8+
background-color: lightblue;
9+
}
10+
.ui-input-container {
11+
box-sizing: border-box;
12+
background-color: #fff;
13+
padding: 2rem 0;
14+
border-radius: 4px;
15+
width: 50%;
16+
margin: 0 auto;
17+
background-color: lightblue;
18+
}
19+
.ui-input-container h1 {
20+
font-family: sans-serif;
21+
margin-bottom: 20px;
22+
font-weight: 700;
23+
text-transform: capitalize;
24+
}
25+
.ui-form-input-container {
26+
position: relative;
27+
font-size: 1rem;
28+
display: block;
29+
}
30+
.ui-form-input {
31+
padding: 13px 15px;
32+
border-radius: 8px;
33+
border: 2px solid #1a73e8;
34+
outline: 0;
35+
width: 100%;
36+
font-size: 16px;
37+
}
38+
.form-input-label {
39+
position: absolute;
40+
top: -7px;
41+
left: 10px;
42+
color: #1a73e8;
43+
font-size: 0.85rem;
44+
padding-right: 0.33rem;
45+
padding-left: 0.33rem;
46+
background: #fff;
47+
font-family: sans-serif;
48+
text-transform: capitalize;
49+
}
50+
h1{
51+
text-align:center;
52+
background-color: #0067B0 ;
53+
margin:0;
54+
padding:10px;
55+
color:white;
56+
}
57+
textarea {
58+
min-height: 30vh;
59+
resize: none;
60+
}
61+
p {
62+
margin-top: 20px;
63+
}
64+
.output {
65+
display: flex;
66+
justify-content: center;
67+
width: 40%;
68+
height: 50vh;
69+
margin: 0 auto;
70+
font-size: 22px;
71+
font-weight: 700;
72+
}
73+
.clear{
74+
color:white;
75+
background:red;
76+
font-size:1.2rem;
77+
width:13%;
78+
justify-content: center;
79+
text-align: center;
80+
cursor:pointer;
81+
display: flex;
82+
}
83+
.counts {
84+
display: flex;
85+
flex-direction: column;
86+
align-items: center;
87+
width: 20%;
88+
height: 100%;
89+
}
90+
.names {
91+
display: flex;
92+
flex-direction: column;
93+
float: left;
94+
height: 100%;
95+
width: 80%;
96+
}
97+
@media screen and (max-width: 650px) {
98+
99+
.ui-input-container{
100+
width: 80%;
101+
}
102+
.clear{
103+
width:25%;
104+
}
105+
106+
.output {
107+
width: 70%;
108+
font-size: 20px;
109+
}
110+
111+
.counts {
112+
width: 20%;
113+
font-size: 20px;
114+
}
115+
}
116+
@media screen and (max-width: 310px) {
117+
118+
.output {
119+
width: 90%;
120+
}
121+
.clear{
122+
width:35%;
123+
}
124+
.counts {
125+
min-width: 20%;
126+
width:fit-content;
127+
font-size: 18px;
128+
}
129+
130+
.names {
131+
width: 100%;
132+
font-size: 18px;
133+
}
134+
}
135+

0 commit comments

Comments
 (0)