Skip to content

Commit 0c4ded0

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #129 from khushi-purwar/dev-khushi
Add Text Analyzer
2 parents 92c4c56 + aaa3dfc commit 0c4ded0

File tree

6 files changed

+264
-0
lines changed

6 files changed

+264
-0
lines changed

‎Text Analyzer/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Text Anaylzer
2+
3+
## Description
4+
The Text Analyzer analyze the text entered by the user. After clicking on the process text, it will give information such as word count, character count, number of sentences, number of spaces, number of punctuators used in the text.
5+
6+
## Stacks Used
7+
* JavaScript
8+
* HTML
9+
* CSS
10+
11+
### How to setup Project
12+
13+
- Download or clone the repository
14+
`
15+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
16+
`
17+
18+
- Go to the Web-dev-mini-projects directory by running the command ` cd Web-dev-mini-projects ` in the terminal
19+
- Run the index.html file
20+
- Start typing your text!
21+
22+
## ScreenShot
23+
24+
Starting Of UI
25+
26+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/Text%20Analyzer/SS1.png"/>
27+
28+
After Writing Text
29+
30+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/Text%20Analyzer/SS2.png" />

‎Text Analyzer/SS1.png

129 KB
Loading

‎Text Analyzer/SS2.png

160 KB
Loading

‎Text Analyzer/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
<title>Text Analyzer</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="container-content">
13+
<div class="text-entry">
14+
<h2>Text Analyzer</h2>
15+
<textarea
16+
name=""
17+
id="textarea"
18+
cols="30"
19+
rows="10"
20+
placeholder="Type or Paste your text here ..."
21+
></textarea>
22+
<button type="button" id="process-btn">Process Text</button>
23+
</div>
24+
25+
<div class="text-info">
26+
<h2>Text Analysis</h2>
27+
<ul class="text-info-list">
28+
<li>
29+
<p>Character Count:</p>
30+
<span id="char">0</span>
31+
</li>
32+
<li>
33+
<p>Word Count:</p>
34+
<span id="word">0</span>
35+
</li>
36+
<li>
37+
<p>Sentences:</p>
38+
<span id="sentences">0</span>
39+
</li>
40+
<li>
41+
<p>Spaces:</p>
42+
<span id="spaces">0</span>
43+
</li>
44+
<li>
45+
<p>Punctuations:</p>
46+
<span id="punctuations">0</span>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<script src="script.js"></script>
54+
</body>
55+
</html>
56+

‎Text Analyzer/script.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
let charCount = document.getElementById("char");
2+
let wordCount = document.getElementById("word");
3+
let sentences = document.getElementById("sentences");
4+
let spaces = document.getElementById("spaces");
5+
let punctuations = document.getElementById("punctuations");
6+
7+
const textArea = document.querySelector(".text-entry textarea");
8+
const btn = document.getElementById("process-btn");
9+
10+
11+
btn.addEventListener('click', () => {
12+
let text = textArea.value;
13+
charCount.innerHTML = text.length;
14+
wordCount.innerHTML = countWords(text);
15+
sentences.innerHTML = countSentences(text);
16+
punctuations.innerHTML = puncCount(text);
17+
spaces.innerHTML = text.split(" ").length - 1;
18+
})
19+
20+
function countWords(text) {
21+
22+
let tempText = text.replace(/[.,!%&*;:'"-()]/g, "");
23+
tempText = tempText.split(/\n/);
24+
25+
let tempList = [];
26+
tempText.forEach(word => tempList.push(word.split(" ")));
27+
28+
function extract(arr) {
29+
return arr.reduce((wordList, word) => {
30+
return wordList.concat(Array.isArray(word) ? extract(word) : word)
31+
}, []);
32+
}
33+
34+
let wordList = extract(tempList);
35+
return wordList.filter(char => char != '').length;
36+
}
37+
38+
function countSentences(text) {
39+
40+
const regex = /[\w|\)][.?!](\s|$)/g;
41+
let senCount = text.match(regex);
42+
return senCount ? senCount.length : 0;
43+
44+
}
45+
46+
function puncCount(text) {
47+
const regex = /[.,?;:'"!-(){}]/g;
48+
let puntuationCount = text.match(regex);
49+
return puntuationCount ? puntuationCount.length : 0;
50+
}
51+

‎Text Analyzer/style.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
line-height: 1.4;
9+
width: 100%;
10+
display: flex;
11+
justify-content: center;
12+
background: url("https://i.pinimg.com/originals/fb/2f/42/fb2f42619c64a29927ad64cd72dafe51.gif");
13+
background-repeat: no-repeat;
14+
background-size: cover;
15+
background-attachment: fixed;
16+
}
17+
18+
.container {
19+
margin-top: 40px;
20+
border-radius: 10px;
21+
padding: 44px;
22+
border: 2px solid #bfd200;
23+
box-shadow: 0px 2px 8px rgba(10, 10, 10, 10);
24+
}
25+
26+
.container-content {
27+
display: flex;
28+
gap: 10px;
29+
}
30+
31+
.text-entry {
32+
border-right: 3px dotted blue;
33+
}
34+
h2 {
35+
font-family: monospace;
36+
padding: 1rem 0;
37+
text-align: center;
38+
letter-spacing: 2px;
39+
color: white;
40+
}
41+
42+
textarea {
43+
width: 100%;
44+
border-radius: 20px;
45+
line-height: 1.5;
46+
resize: none;
47+
outline: none;
48+
padding: 1.5rem;
49+
font-size: 1rem;
50+
border: 3px solid #f72585;
51+
background: none;
52+
height: 220px;
53+
margin-left: -10px;
54+
color: white;
55+
box-shadow: 0px 2px 8px rgba(10, 10, 10, 10);
56+
}
57+
58+
textarea::placeholder {
59+
color: white;
60+
}
61+
62+
#process-btn {
63+
display: block;
64+
background: none;
65+
border: none;
66+
margin: 1rem auto;
67+
padding: 1rem 2rem;
68+
cursor: pointer;
69+
border: 2px solid #f72585;
70+
border-radius: 25px;
71+
font-size: 1rem;
72+
transition: 0.5s ease-in-out;
73+
color: white;
74+
box-shadow: 0px 2px 8px rgba(10, 10, 10, 10);
75+
}
76+
77+
#process-btn:hover {
78+
background-color: #ef476f;
79+
}
80+
81+
.text-info-list {
82+
list-style: none;
83+
border: 3px solid #f72585;
84+
border-radius: 20px;
85+
padding: 1rem 1.5rem;
86+
box-shadow: 0px 2px 8px rgba(10, 10, 10, 10);
87+
}
88+
89+
li {
90+
display: flex;
91+
margin: 0.2rem 0;
92+
padding: 0.2rem 0;
93+
align-items: center;
94+
}
95+
96+
li p {
97+
padding-right: 0.5rem;
98+
font-weight: 700;
99+
color: white;
100+
}
101+
102+
li span {
103+
font-weight: 700;
104+
background: white;
105+
border-radius: 25px;
106+
margin-left: 1.4rem;
107+
padding: 0.1rem 1rem;
108+
color: #538d22;
109+
}
110+
111+
@media screen and (max-width: 760px) {
112+
.container {
113+
border: none;
114+
}
115+
116+
.container-content {
117+
display: flex;
118+
flex-wrap: wrap;
119+
gap: 5px;
120+
}
121+
.text-entry {
122+
border-right: none;
123+
border-bottom: 3px dotted blue;
124+
}
125+
}
126+
127+

0 commit comments

Comments
 (0)