-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.html
285 lines (262 loc) · 10.5 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
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<title>Rewind.ly: A Coding Project</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"
/>
<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" />
</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 barlowfont" href="#"
><img
src="/img/rewindly-no-title.png"
class="d-inline-block align-text-top"
alt="Rewindly Logo"
width="75"
height="40"
/>
REWIND.LY</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/rewind"
>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 APP NAME.
</h2>
<div class="row row-cols-1 row-cols-lg-2">
<div class="col-lg-8">
<pre class="line-numbers"><code class="language-javascript">
//Get the string from the page
//Controller Function
function getValue(){
document.getElementById("alert").classList.add("invisible");
let stringValue = document.getElementById("userString").value;
let revString = reverseString(stringValue);
displayString(revString);
}
//Reverse string
//Logic Function
function reverseString(stringValue){
let revString = [];
//reverse a string using a for loop
for (let i = stringValue.length - 1; i >= 0; i--){
revString.push(stringValue[i]);
}
return revString.join('');
}
//Display reversed string
//View Function
function displayString(revString){
//write to the page
document.getElementById("msg").innerHTML = `Your string reversed is ${revString}`;
//show the alert box
document.getElementById("alert").classList.remove("invisible");
}
</code>
</pre>
</div>
<div class="col-lg-4">
<h1>REWIND.LY</h1>
<p>
An application designed to return your entered string in reverse
order.
</p>
<h5>Controller</h5>
<p>
The Controller function
<span class="function">getValue()</span> is designed to control
the flow of operations within the application. This control is
dependent on previous steps before being executed. These
operations can be summarized in 4 steps.
</p>
<ol>
<li>
Reset the DIV <span class="id">alert</span> element, by clearing
any previous results
</li>
<li>Gather a string to reverse</li>
<li>
Set a variable as the reversed string by running the logic
function
</li>
<li>
Display the reversed string by writing the results into the DOM
and removing the "invisible" class from the DIV
<span class="id">alert</span> element.
</li>
</ol>
<h5>Logic</h5>
<p>
This will be an excersize using arrays. Because of this we will
need to <span class="function">push()</span> the built in method
since it is an array method instead of something like the
<span class="function">+=</span> operator. Javascript is designed
to convert any declared arrays into strings if
<span class="function">+=</span> is used since it is a string
operator designed to concatenate.
</p>
<p>That being said, the logic will be performed in 3 statements.</p>
<ol>
<li>
Declare array variable <span class="variable">revString</span>
</li>
<li>
By use of for loops, <span class="function">push()</span> the
last indexed character of the string into the array
</li>
<li>
Return <span class="variable">revString</span> once the loop has
completed.
</li>
</ol>
<h5>View</h5>
<p>
Once called, the view fuction
<span class="function">displayString()</span> will display the
contents of the reversed string onto the user's screen by use of
the
<span class="function">classlist.remove("invisible")</span> method
on the DIV <span class="id">alert</span>. Now visable, the results
can be written to the DOM via the
<span class="function">innerHTML</span> method. If the application
is ran again the invisible class will be set "on" via the
controller function thus hidding the DIV
<span class="id">alert</span> ID element.
</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 |
anihiser@gmail.com
</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/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>