-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
110 lines (85 loc) · 3.38 KB
/
index.html
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="Pangram checker" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- mobile-friendly -->
<title>Pangram checker</title>
<link rel="stylesheet" type="text/css" href="./sample.css">
</head>
<body>
<!-- ================================================================ -->
<h1><span class="boxed-text">Pangram checker</span></h1>
<p/> Enter text to see if it’s a <a href="https://en.wikipedia.org/wiki/Pangram">pangram</a>:
<p/>
<div>
<textarea placeholder="The quick brown fox jumped over the lazy dogs" rows=5 cols=100 id="pangram-checker-input">
</textarea>
<div>
<p/>
<div>
Letters present:
<span id="pangram-checker-present-output"> </span>
</div>
<div>
Letters absent:
<span id="pangram-checker-absent-output"> </span>
</div>
<p/>
<button class="maroon" id="alpha-button"> Alphabetize </button>
<button class="maroon" id="freq-button"> Arrange by frequency </button>
<button class="maroon" id="scramble-button"> Scramble </button>
<!-- ================================================================ -->
<hr/>
<p>
Source: <a href="https://github.com/johnkerl/pangram-checker">https://github.com/johnkerl/pangram-checker</a>
</p>
<!-- ================================================================ -->
<script src="./pangram-checker.js"></script>
<script>
const pangramChecker = new PangramChecker();
const inputElement = document.getElementById('pangram-checker-input');
const presentOutputElement = document.getElementById('pangram-checker-present-output');
const absentOutputElement = document.getElementById('pangram-checker-absent-output');
const alphaButton = document.getElementById('alpha-button')
const freqButton = document.getElementById('freq-button')
const scrambleButton = document.getElementById('scramble-button')
inputElement.addEventListener('input', function(event) { showCounts(event) });
alphaButton.addEventListener('click', function(event) { alphabetize(event) });
freqButton.addEventListener('click', function(event) { arrangeByFrequency(event) });
scrambleButton.addEventListener('click', function(event) { scramble(event) });
// Initial render:
// * Show the present/absent lists -- all present, no absent, if the text hasn't been entered yet
// * Or, if there was a page reload with text in the textarea, acknowledge it
update(inputElement.value)
function showCounts(event) {
update(event.target.value)
}
function alphabetize(event) {
pangramChecker.alphabetize();
update(inputElement.value);
}
function arrangeByFrequency(event) {
pangramChecker.arrangeByFrequency();
update(inputElement.value);
}
function scramble(event) {
pangramChecker.scramble();
update(inputElement.value);
}
function update(text) {
const counts = pangramChecker.getCounts(text)
presentOutputElement.textContent = formatLetters(counts.present)
if (counts.absent.length == 0) {
absentOutputElement.textContent = "none -- hurray!"
} else {
absentOutputElement.textContent = formatLetters(counts.absent)
}
}
function formatLetters(letters) {
return letters.join(' ').toUpperCase()
}
</script>
<!-- ================================================================ -->
</body>
</html>