-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode.html
275 lines (224 loc) · 14.4 KB
/
code.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
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
269
270
271
272
273
274
275
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Fuzzy: A Coding Exercise</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
<link href="/css/site.css" rel="stylesheet">
<link rel="icon" type="image/png" href="/img/favicon.ico">
<link href="css/prism.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,700&display=swap" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- ==== Nav Section ==== -->
<nav class="navbar navbar-expand-md navbar-dark text-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand navFont" href="#"><img src="/img/FIZZBuzz-Nav.png" class="d-inline-block align-text-top" alt="Fuzzy Logo" width="42" height="42"> FUZZY</a>
<button class="navbar-toggler" 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/apnihiser/fizzbuzz">Git Repo</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" target="_blank" href="https://anihiser-portfolio.netlify.app/">About</a>
</li> -->
</ul>
</div>
</div>
</nav>
<!-- ==== Main Section ==== -->
<main class="flex-shrink-0">
<div class="container py-5 px-5 mt-5">
<H2 class="border-1 border-bottom border-dark">The Code for FUZZY</H2>
<div class="row row-cols-1 row-cols-lg-2">
<!-- CODE HERE -->
<div class="col-lg-8">
<pre class="line-numbers"><code class="language-javascript">
//controller function
//get values from user
function getValues(){
let fizzValue = document.getElementById("fizzValue").value;
let buzzValue = document.getElementById("buzzValue").value;
//validate information by use of boolean statement
//parse for numbers, check that numbers are ints
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
//call logic function
let resultant = fizzBuzz(fizzValue, buzzValue);
//call display function
displayFizzBuzz(resultant , fizzValue, buzzValue);
} else {
alert("Please enter an integer!");
}
}
//logic function
//increment range using forloop
//use modulo to check if number id divisible by 3 or 5, or both 3 and 5 (booleans)
//push to array and return
function fizzBuzz(fizzValue, buzzValue){
let fizzBuzzValues = [];
for(i = 1; i <= 100; i++){
if ((i % fizzValue == 0) && (i % buzzValue == 0)){
fizzBuzzValues.push("FizzBuzz");
} else if (i % fizzValue == 0) {
fizzBuzzValues.push("Fizz");
} else if (i % buzzValue == 0){
fizzBuzzValues.push("Buzz");
} else {
fizzBuzzValues.push(i);
}
}
return fizzBuzzValues;
}
//view function
//declare string to write
//display function to DOM
function displayFizzBuzz(fbData, fizzValue, buzzValue){
//get the table body element from the page
let tableBody = document.getElementById("results");
//get the template row
let templateRow = document.getElementById("fbTemplate");
//clear table first
tableBody.innerHTML = "";
for (let i = 0; i < fbData.length; i += 5) {
let tableRow = document.importNode(templateRow.content, true);
//grab just the tds and put them into an array
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fbData[i]);
rowCols[0].textContent = fbData[i];
rowCols[1].classList.add(fbData[i + 1]);
rowCols[1].textContent = fbData[i + 1];
rowCols[2].classList.add(fbData[i + 2]);
rowCols[2].textContent = fbData[i + 2];
rowCols[3].classList.add(fbData[i + 3]);
rowCols[3].textContent = fbData[i + 3];
rowCols[4].classList.add(fbData[i + 4]);
rowCols[4].textContent = fbData[i + 4];
tableBody.appendChild(tableRow);
}
}
</code>
</pre>
</div>
<!-- CODE DESCRIPTION HERE -->
<div class="col-lg-4">
<h5>FUZZY - The Breakdown</h5>
<p>FUZZY is a Javascript application written to gather a Fizz Value and a Buzz Value and display a table 1-100 where the numbers divisible by these values will be replaced with Fizz or Buzz respectively, or FizzBuzz if they are both divisible.</p>
<p>The application is broken in 3 sepereate areas of concern.</p>
<ul>
<li>The Controller function</li>
<li>The Logic function</li>
<li>The View function</li>
</ul>
<br>
<h5>Controller Fuction</h5>
<p>The Controller Function <span class="highlight">getValues()</span> works on several important discreet operations which receives inputs, validates data, and controls when other functions in the application are executed.</p>
<p>Lets break these operations down individually</p>
<h6>Input</h6>
<p>By using a form, we have structured the application in such a way that either by default or by using defined values, we can capture the necessary information to begin running the application. Once the input values have been entered into the web form, the user can submit the data by clicking on the button.</p>
<h6>Validation</h6>
<p>Validation is required here since the application will fail if a string or text char is provided by the user. Also the values provided will be a string data type. Therefore the <span class="highlight">parseInt()</span> and <span class="highlight">isInteger()</span> Javascript functions are used to ensure that all data sent to be processed are valid. If any of this fails validation, the webpage will alert the user with "You must enter integers"</p>
<h6>Function Calls</h6>
<p>Lastly, this controller function will pass these validated values into the appropriate functions next. Both <span class="highlight">fizzBuzz()</span> and <span class="highlight">displayFizzBuzz()</span> are self explanatory in their purpose, but see the Logic function and View function below for more details.</p>
<br>
<h5>Logic Function</h5>
<p>Fizz Buzz will operate on a simple algorithm. A for loop will count from 1 to 100 and each number will run an if statement checking if the current number is divisible by the fizzValue or buzzValue or both! If it does then push Fizz, Buzz or FizzBuzz respectively into an array. If the number is not divisible then simply push that current value into the array. Once the for loop has been completed then return the array. </p>
<br>
<h5>View Function</h5>
<p>The fbData array from the <span class="highlight">fizzBuzz()</span> function will need to be rendered on the webpage. Step one will be to loop through the arrays using a for loop. We have declared variables to capture a HTML Template Row as well as the results table that will be populated with this data. Per each 5 column row we will be selecting the 5 TD tags from the template, and storing them in an array to be poluated with the FizzBuzz array generated during the logic Function. Then in a 5 count increment per each cylcle of the for loop the table will be filled in and appnded to the results table.</p>
<p>One last interesting function used for formatting any "Fizz", "Buzz", or "FizzBuzz" values written into results table is how formating works via classList.add. The values from the fbData array will also be written into the table data cell class as well. These classes will be targetted by CSS.</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-lg-3">
<div
class="col order-last order-lg-first text-light d-flex align-items-end justify-content-start gy-2"
>
<div>
<span class="text-muted">©2021</span> Adam Nihiser |
</div>
</div>
<div
class="col d-flex align-items-end justify-content-start justify-content-lg-center gy-3"
>
<img
src="/img/ANihiser_NewWordmark.png"
alt="Adam Nihiser Logo"
height="32"
/>
</div>
<div
class="col d-flex align-items-end justify-content-start justify-content-lg-end gy-3"
>
<div class="row">
<div class="col social">
<a href="https://www.linkedin.com/in/anihiser/" target="_blank"
><i class="fab fa-linkedin fa-2x"></i
></a>
</div>
<div class="col social">
<a href="https://github.com/apnihiser" target="_blank"
><i class="fab fa-github fa-2x"></i
></a>
</div>
<div class="col social">
<a href="https://twitter.com/That_APN_Guy" target="_blank"
><i class="fab fa-twitter fa-2x"></i
></a>
</div>
<div class="col social">
<a
href="https://www.youtube.com/channel/UCZl9auJaZm4S3sOHCBcxgEQ"
target="_blank"
><i class="fab fa-youtube fa-2x"></i
></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>