/
textreverser.js
36 lines (36 loc) · 1.27 KB
/
textreverser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const dangerClass = "red";
const s = "s";
let input = document.getElementById("input");
let characterNotice = document.getElementById("character-notice");
let characterCount = document.getElementById("character-count");
const maxCharacters = parseInt(characterCount.textContent);
let sSpan = document.getElementById("s");
let output = document.getElementById("output");
const reversedPlaceholder = output.textContent;
input.addEventListener("input", function (event) {
let count = maxCharacters - event.target.value.length;
characterCount.textContent = count;
if (count <= 10) {
characterNotice.classList.add(dangerClass);
} else {
characterNotice.classList.remove(dangerClass);
}
if (count === 1) {
sSpan.textContent = "";
} else {
sSpan.textContent = s;
}
if (count === maxCharacters) {
output.textContent = reversedPlaceholder;
} else {
output.textContent = event.target.value.split("").reverse().join("");
}
});
document.getElementById("clear").addEventListener("click", function () {
input.value = "";
input.focus();
characterNotice.classList.remove(dangerClass);
characterCount.textContent = maxCharacters;
sSpan.textContent = s;
output.textContent = reversedPlaceholder;
});