Skip to content

Commit c4d9c50

Browse files
SMD-1SMD-1
committed
Text analyzer added
1 parent 304bda7 commit c4d9c50

File tree

4 files changed

+200
-0
lines changed

4 files changed

+200
-0
lines changed

‎TextAnalyzer/app.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
let textareaEl = document.querySelector("#text");
2+
let text = null;
3+
let data = {
4+
words: 0,
5+
sentences: 0,
6+
uppercaes: 0,
7+
lowercase: 0,
8+
spaces: 0,
9+
digits: 0,
10+
vowels: 0,
11+
consonants: 0,
12+
};
13+
14+
const findLength = (item) => (item == null ? 0 : item.length);
15+
16+
const setText = () => {
17+
text = textareaEl.value;
18+
if (text != null) {
19+
data.sentences = findLength(text.match(/\056/g));
20+
data.words = findLength(text.match(/[a-zA-Z]+/g));
21+
data.spaces = findLength(text.match(/\s/g));
22+
data.uppercaes = findLength(text.match(/[A-Z]/g));
23+
data.lowercase = findLength(text.match(/[a-z]/g));
24+
data.digits = findLength(text.match(/\d/g));
25+
data.vowels = findLength(text.match(/[aeiou]/gi));
26+
data.consonants = findLength(text.match(/[bcdfghjklmnpqrstvwxyz]/gi));
27+
}
28+
localStorage.setItem("data", JSON.stringify(data));
29+
30+
window.location = "info.html";
31+
};
32+
33+
const getData = () => {
34+
return JSON.parse(localStorage.getItem("data"));
35+
};
36+
37+
const showData = () => {
38+
let data = getData();
39+
let htmlContent = "";
40+
for (item in data) {
41+
htmlContent += `<div class="box">
42+
<h2>${data[item]}</h2>
43+
<p>${item}</p>
44+
</div>`;
45+
}
46+
document.querySelector(".info-wrapper").innerHTML = htmlContent;
47+
};

‎TextAnalyzer/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<title>Text</title>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
10+
<div class="text-wrapper">
11+
<textarea
12+
id="text"
13+
spellcheck="false"
14+
placeholder="Enter your text here...."
15+
></textarea>
16+
<button onclick="setText()" class="btn">Generate Info</button>
17+
</div>
18+
19+
<!-- textInfo.js -->
20+
<script src="./app.js"></script>
21+
</body>
22+
</html>

‎TextAnalyzer/info.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<title>Text Info</title>
7+
8+
<!-- style.css -->
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
<body>
12+
<div class="info-wrapper"></div>
13+
14+
<script src="app.js"></script>
15+
16+
<script>
17+
window.onload = () => {
18+
showData();
19+
};
20+
</script>
21+
</body>
22+
</html>

‎TextAnalyzer/style.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body,
8+
html {
9+
width: 100%;
10+
height: 100%;
11+
}
12+
13+
body {
14+
font-family: "Roboto", sans-serif;
15+
}
16+
17+
.info-wrapper {
18+
width: 100%;
19+
height: 100%;
20+
padding: 40px;
21+
display: grid;
22+
grid-template-columns: repeat(4, 1fr);
23+
grid-gap: 2rem;
24+
}
25+
26+
.text-wrapper {
27+
width: 100%;
28+
height: 100%;
29+
padding: 50px;
30+
}
31+
32+
textarea {
33+
background: rgb(255, 174, 174);
34+
color: rgb(0, 0, 0);
35+
width: 100%;
36+
height: 90%;
37+
padding: 20px;
38+
font-size: 1.5rem;
39+
border-radius: 4px;
40+
margin-bottom: 10px;
41+
resize: none;
42+
border: none;
43+
}
44+
45+
button {
46+
border: none;
47+
color: #fff;
48+
background-color: #000;
49+
padding: 15px 40px;
50+
border-radius: 4px;
51+
cursor: pointer;
52+
}
53+
54+
button:hover {
55+
border: 1px solid #000;
56+
background: rgb(255, 174, 174);
57+
color: #000;
58+
}
59+
60+
textarea:focus {
61+
outline: none;
62+
}
63+
64+
.box {
65+
border: 2px solid #000;
66+
border-radius: 10px;
67+
display: flex;
68+
flex-direction: column;
69+
justify-content: center;
70+
align-items: center;
71+
text-align: center;
72+
min-height: 200px;
73+
}
74+
75+
.box h2 {
76+
font-size: 4rem;
77+
font-weight: 100;
78+
color: #000000;
79+
}
80+
81+
.box:hover h2,
82+
.box:hover,
83+
.box:hover p {
84+
background-color: #000;
85+
color: #fff;
86+
scale: 2;
87+
}
88+
89+
.box p {
90+
font-size: 20px;
91+
background-color: #fff;
92+
color: #283618;
93+
padding: 5px 20px;
94+
border-radius: 27px;
95+
}
96+
97+
@media screen and (max-width: 768px) {
98+
.info-wrapper {
99+
grid-template-columns: repeat(2, 1fr);
100+
gap: 40px;
101+
}
102+
}
103+
104+
@media screen and (max-width: 576px) {
105+
.info-wrapper {
106+
grid-template-columns: repeat(1, 1fr);
107+
gap: 40px;
108+
}
109+
}

0 commit comments

Comments
 (0)