Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 110dd51

Browse files
Words counter
1 parent 63ff059 commit 110dd51

File tree

3 files changed

+105
-0
lines changed

3 files changed

+105
-0
lines changed

‎088. World Counter/app.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const textInput = document.querySelector(".text-input");
2+
const worldCountElement = document.querySelector(".word-count");
3+
const letterCountElement = document.querySelector(".letter-count");
4+
const spaceCountElement = document.querySelector(".space-count");
5+
6+
const checks = [atLeastTwoCharacters, abscenceOfThreeConsecutiveCharacters];
7+
8+
function atLeastTwoCharacters(text) {
9+
const letters = text.match(/[a-z]/gi) || [];
10+
return letters.length >= 2;
11+
}
12+
13+
function abscenceOfThreeConsecutiveCharacters(text) {
14+
for (const character of text) {
15+
const occurrences = Array.from(text).filter((v) => v == character).length;
16+
17+
if (occurrences >= 3) {
18+
return false;
19+
}
20+
}
21+
22+
return true;
23+
}
24+
25+
textInput.addEventListener("input", () => {
26+
const splitted = textInput.value.trim().split(/[\s-]/);
27+
const letterCount = (textInput.value.match(/[a-z]/gi) || []).length;
28+
const spaceCount = (textInput.value.match(/\s+/g) || []).length;
29+
let wordCount = 0;
30+
31+
outer: for (const text of splitted) {
32+
for (const check of checks) {
33+
if (!check(text)) {
34+
continue outer;
35+
}
36+
}
37+
wordCount++;
38+
}
39+
40+
worldCountElement.textContent = wordCount;
41+
letterCountElement.textContent = letterCount;
42+
spaceCountElement.textContent = spaceCount;
43+
});

‎088. World Counter/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Word Counter</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<h2 class="title">Word Counter</h2>
12+
<textarea class="text-input" placeholder="Paste text here..."></textarea>
13+
<section>
14+
<strong>Word Count: </strong>
15+
<span class="word-count">0</span>
16+
</section>
17+
<section>
18+
<strong>Letter Count: </strong>
19+
<span class="letter-count">0</span>
20+
</section>
21+
<section>
22+
<strong>Number Of Spaces: </strong>
23+
<span class="space-count">0</span>
24+
</section>
25+
</section>
26+
27+
<script src="app.js"></script>
28+
</body>
29+
</html>

‎088. World Counter/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
body {
2+
margin: 0;
3+
font-family: sans-serif;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
}
10+
11+
.container {
12+
width: 400px;
13+
margin: 25px;
14+
padding: 25px;
15+
border: 1px solid #ccc;
16+
border-radius: 5px;
17+
line-height: 1.4;
18+
box-shadow: 2px 1px 5px 1px;
19+
}
20+
21+
.title {
22+
margin-top: 0;
23+
margin-bottom: 25px;
24+
}
25+
26+
.text-input {
27+
width: 100%;
28+
height: 225px;
29+
margin-bottom: 25px;
30+
resize: none;
31+
padding: 10px;
32+
box-sizing: border-box;
33+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /