This repository was archived by the owner on Jul 20, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
268 lines (227 loc) · 14.2 KB
/
Copy pathcode.html
File metadata and controls
268 lines (227 loc) · 14.2 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>JS FizzBuzz: A Coding Project by Anthony Hamlin - The Code</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Custom style sheet -->
<link rel="icon" type="image/png" href="img/favicon-32x32.png" />
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/prism.css">
</head>
<body class="d-flex flex-column h-100">
<!-- Nav Section -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="d-inline-block ms-1" src="img/android-chrome-192x192.png"
alt="Hamberfim Logo" height="40"><span class="align-text-top"> JS FizzBuzz</span></a>
<button class="navbar-toggler ms-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app.html">The App</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="code.html">The Code</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/Hamberfim/jsFizzBuzz">Project Git
Repo</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Section -->
<main class="flex-shrink-0">
<div class="container-fluid py-4 px-5">
<h2 class="border-1 border-bottom border-dark mt-5">The Code</h2>
<div class="row row-cols-1 row-cols-md-2 my-2">
<div class="col-md-8 ">
<!-- Javascript Display -->
<pre class="line-numbers">
<code class="language-javascript">
"use strict";
//Start or Controll function - get needed values
function getValues() {
// get unique input values from the page
let startValue = document.getElementById('startValue').value;
let endValue = document.getElementById('endValue').value;
// Use the "parseInt()" function to cast/convert from string input to integers
startValue = parseInt(startValue);
endValue = parseInt(endValue);
// validate - check if above parsed input are integers
if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
// if true call generateNumbers() - generate the numbers return them in an array
let numbers = generateNumbers(startValue, endValue);
// Call the display function with "numbers" variable to display results on the page
displayNumbers(numbers);
} else {
alert("You must enter whole integers.");
}
}
//Logic function - Generate numbers based on the start and endvalue
function generateNumbers(sValue, eValue) {
// Declare an array variable called numbers and set it equal to []
let numbers = [];
// loop over the sValue and eValue from start to end.
for (let i = sValue; i <= eValue; i++) {
// add each number to the "numbers" array
numbers.push(i);
}
//Return the "numbers" array
return numbers;
}
//View/Display Function - display the results (numbers) to the screen
function displayNumbers(numbers) {
// array to hold fizz, buzz, fizzbuzz or the number
let fbArray = [];
// loop through the numbers array
for (let i = 0; i < numbers.length; i++) {
// declare "number" variable and set it equal to numbers[index]
let number = numbers[i];
// use "if-else-statement" to test each number against the zero modulus(%)
if ((number % 3 == 0) && (number % 5 == 0)) {
fbArray.push('FizzBuzz');
} else if (number % 3 == 0) {
fbArray.push('Fizz');
} else if (number % 5 == 0) {
fbArray.push('Buzz');
} else {
// push the number to the arry
fbArray.push(number);
}
}
// get the tbody element from the page by it's ID
let tableBody = document.getElementById('results');
// get the html template the defines the table row and the table data structure
let rowTemplate = document.getElementById('rowTemplate');
// make sure the html table is already clear
tableBody.innerHTML = "";
// loop thrugh fbArray in sets of five
for (let j = 0; j <= fbArray.length -1; j += 5) {
// get a copy of the template as document fragment to populate content in the page
let tableRow = document.importNode(rowTemplate.content, true);
// get just the template <td> and add them to an array
let rowCols = tableRow.querySelectorAll('td');
rowCols[0].classList.add(fbArray[j]); // add 'Fizz', 'Buzz' or "FizzBuzz" as a css class
rowCols[0].textContent = fbArray[j];
rowCols[1].classList.add(fbArray[j + 1]);
rowCols[1].textContent = fbArray[j + 1];
rowCols[2].classList.add(fbArray[j + 2]);
rowCols[2].textContent = fbArray[j + 2];
rowCols[3].classList.add(fbArray[j + 3]);
rowCols[3].textContent = fbArray[j + 3];
rowCols[4].classList.add(fbArray[j + 4]);
rowCols[4].textContent = fbArray[j + 4];
tableBody.appendChild(tableRow);
}
}
</code>
</pre>
</div>
<div class="col-md-4">
<!-- Code Description -->
<h4 class="hundredTitle">One-Hundred</h4>
<p>Using HTML, custom CSS, Bootstrap and Javascript we can design a responsive application that can
take user input (starting value and ending value), generate and display a count of the resulting
range of numbers and denote the even numbers in <span class="fw-bold">bold</span>.</p>
<h5 class="fw-bold">getValues() function:</h5>
<p>Here we use javascript to "Get" the values from the HTML file user input fields by using
<span class="fw-bold">document.getElementById</span>
to locate the html tags with id's of startValue and endValue</p>
<h5 class="fw-bold">Parse our input:</h5>
<p>Here we use the built in function <span class="fw-bold">parseInt()</span> to convert the input
values for startValue and endValue, which are strings, to integers</p>
<h5 class="fw-bold">Validate input:</h5>
<p>Using an if-statement we want to validate that the parsed input are actually integers since <span
class="fw-bold">parseInt()</span> will convert a non-number string to <span
class="fw-bold">NaN</span> (<em>meaing <span class="fw-bold">N</span>ot <span
class="fw-bold">a</span>
<span class="fw-bold">N</span>umber</em>). If if both values are integers, we call a
function that will generate an
array of integers based on the range of startValue and endValue input. If not, we display an
alert box message informing the user to input integers.</p>
<h5 class="fw-bold">generateNumbers() function:</h5>
<p>Both integers are then pass to the <span class="fw-bold">generateNumbers(sValue, eValue)</span>
function that will
loop from the start to end range populating the empty <span class="fw-bold">numbers = [ ]</span>
array and then
return that array.</p>
<h5 class="fw-bold">displayNumbers() function:</h5>
<p>After the populated array is returned the <span class="fw-bold">displayNumbers(numbers)</span>
function is called. Looping
through the array with an if-statement to check each number to see if it is a multiple of '3'
or/and
'5' against a zero modulus result. Each result is then pushed to the fbArray as either a string
of 'Fizz', 'Buzz', 'FizzBuzz' or the integer itself if false.</p>
<p>
Finally, we loop through the fbArray in sets of five, getting the html rowTemplate from the page
using <span class="fw-bold">document.importNode()</span>. Selecting all the 'td' tags within the
rowTemplate
as an array called 'rowCols' we set the class on each td and its' textContent to the same as its
value ('Fizz', 'Buzz',
'FizzBuzz' or the integer) in the fbArray and populating the page using <span
class="fw-bold">tableBody.appendChild(tableRow)</span>.
</p>
</div>
</div>
</div>
</main>
<!-- Footer Section -->
<footer class="footer mt-auto py-3 sticky-footer">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 gy-2">
<div class="col order-last order-md-first text-light">
<div class="text-nowrap">
<span class="text-muted">©2021</span> Anthony Hamlin
</div>
</div>
<div
class="col d-flex text-md-center align-items-center justify-content-start justify-content-md-center">
<div>
<img class="m-0" src="img/wht_fslogo.svg" alt="Hamberfim Logo" height="40">
</div>
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-md-end">
<div class="row">
<div class="col social"><a href="https://www.linkedin.com/in/hamberfim/" target="_blank"><i
class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="https://twitter.com/hamberfim" target="_blank"><i
class="fab fa-twitter fa-2x"></i></a></div>
<div class="col social"><a href="https://github.com/Hamberfim" target="_blank"><i
class="fab fa-github fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="js/prism.js"></script>
<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true
})
</script>
</body>
</html>