Skip to content

Commit cdb6f9a

Browse files
jigar-sablejigar-sable
committed
word counter added
1 parent 20a82db commit cdb6f9a

4 files changed

Lines changed: 102 additions & 0 deletions

File tree

‎projects/wordcount/assests/favic.ico‎

176 KB
Binary file not shown.

‎projects/wordcount/assests/script.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const textArea = document.getElementById('textArea');
2+
3+
textArea.addEventListener('input', function() {
4+
let text = this.value;
5+
document.getElementById('char').innerHTML = text.length
6+
text = text.trim();
7+
let words = text.split(" ");
8+
// console.log(words);
9+
let wordArr = words.filter(elm => elm != "");
10+
// console.log(wordArr);
11+
document.getElementById('word').innerHTML = wordArr.length;
12+
});

‎projects/wordcount/assests/style.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
min-height: 100vh;
11+
width: 100%;
12+
font-size: 62.5%;
13+
overflow: hidden;
14+
background: linear-gradient(to right, #8e2de2, #4a00e0);
15+
font-family: 'Poppins', sans-serif;
16+
}
17+
.container {
18+
background: rgba(255, 255, 255, 0.4);
19+
transform-style: preserve-3d;
20+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
21+
max-width: 35rem;
22+
width: 100%;
23+
margin: 6rem auto;
24+
padding: 1rem 2rem;
25+
border-radius: .5rem;
26+
transition: .3s;
27+
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
34+
35+
h1 {
36+
font-size: 1.7rem;
37+
text-align: center;
38+
color: #111;
39+
}
40+
textarea {
41+
resize: none;
42+
margin-top: .8rem;
43+
width: 100%;
44+
border-radius: .5rem;
45+
font-size: 1.3rem;
46+
padding: .5rem;
47+
outline: none;
48+
border: 2px solid rgb(55, 0, 158);
49+
}
50+
p {
51+
font-size: 2.1rem;
52+
font-weight: bold;
53+
color: rgb(83, 0, 0);
54+
padding: .8rem;
55+
}
56+
p #word, #char{
57+
color: #000000;
58+
}
59+
60+
@media screen and (max-width:570px) {
61+
html {
62+
font-size: 65%;
63+
}
64+
}

‎projects/wordcount/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="shortcut icon" href="./assests/favic.ico" type="image/x-icon">
8+
<title>Word Char Counter</title>
9+
<link rel="stylesheet" href="./assests/style.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
14+
<h1>Word & Character Counter</h1>
15+
<textarea id="textArea" cols="30" rows="10"></textarea>
16+
<p>
17+
<span id="word">0</span> Words
18+
<span id="char">0</span> Character
19+
</p>
20+
21+
</div>
22+
23+
24+
<script src="./assests/script.js"></script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)