-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode.html
242 lines (194 loc) · 14 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>TACO CAT: 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/icon.png">
<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" href="#"><img src="img/icon.png" class="d-inline-block align-text-top" alt="Adam Nihiser Logo" width="24" height="24"> TACO CAT</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://anihiser-portfolio.netlify.app/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://anihiser-portfolio.netlify.app/">Git Repo</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 TACO CAT</H2>
<div class="row row-cols-1 row-cols-lg-2">
<div class="col-lg-8">
<!-- Code -->
<pre class="line-numbers"><code class="language-javascript">
//Control Function
//Receive Values
function getValue() {
//Set the default state to the "alert" div to invis
document.getElementById("alert").classList.add("invisible");
//target userString input element and grab value after pressing btnSubmit
//triggering evenlistener.
let origString = document.getElementById("userString").value;
origString = origString.toLowerCase();
//Validate if string is empty, if so start again and provide alert to user.
if(origString == "") {
alert("Please enter something!");
} else {
//Continue to validate and format text
let validatedString = "";
for (let i = 0; i < origString.length; i++) {
if (isAlpha(origString[i])) {
//Once a character has been validated as an alpha char add to new
//string which contains only alpha chars. This will be the string
//used to compare as a palindrome.
validatedString += origString[i];
}
}
//Reverse validated string and lowercase
let reversedString = reverseString(validatedString);
//Compare the validated string and the reversed string, if they are the same
//then this fulfils the condition to be considered a palindrome.
let isPalindrome = palindromeCheck(validatedString, reversedString);
//write to the DOM
displayResults(isPalindrome, reversedString);
}
}
//Logic Function used to validate if char is alpha char
function isAlpha(char) {
//Using REGEX to check if the char is Alpha. This will only work for English chars.
return (/[a-zA-Z]/).test(char);
}
//Logic Function Reverse String
function reverseString(stringToReverse) {
//declare variable to store reversed characters from the validated string.
let reversedString = "";
for (let i = stringToReverse.length - 1; i >= 0; i--) {
//using a for loop this will count backwards from the last index, storing each
//into a new string starting from the 0 index.
reversedString += stringToReverse[i];
}
return reversedString;
}
//Logic Function to determine if string is a palindrome
function palindromeCheck(forwardString, reversedString) {
//simple statement comparing the two forward, and reversed strings. If they are
//equal then return true.
return forwardString == reversedString;
}
//Display Results with a bit of formatting.
function displayResults(boolResult, reverse) {
//Status message is determined by the boolResult value.
if (boolResult == true) {
//write status message to HTML Heading and msg DIV elements.
document.getElementById("heading").innerHTML = `Well Done! You entered a palindrome!`;
document.getElementById("msg").innerHTML = `Your phrase reversed is: ${reverse}`;
//reveal hidden div element and update the background color, nice success
//green for a positive palindrome result.
document.getElementById("alert").classList.remove("alert-danger");
document.getElementById("alert").classList.add("alert-info");
document.getElementById("alert").classList.remove("invisible");
} else {
//write status message to HTML Heading and msg DIV elements.
document.getElementById("heading").innerHTML = `Sorry... This isn't a palindrome. `;
document.getElementById("msg").innerHTML = `Your phrase reversed is: ${reverse}`;
//reveal hidden div element and update the background color, dire alert
//red for a negative palindrome result.
document.getElementById("alert").classList.remove("alert-info");
document.getElementById("alert").classList.add("alert-danger");
document.getElementById("alert").classList.remove("invisible");
}
}
</code>
</pre>
</div>
<!-- Code Description -->
<div class="col-lg-4">
<h3>TACO CAT</h3>
<p>The Taco Cat application operates off a controller function, a few logic functions, and display functions. These operate together to gather information from the user, validate and format the string for processing, reverse and compare against the formated original string. Finally compare the forward and reversed strings to detemine if the provided value is a palindrome. If so write the results to the DOM along with a bit of styling.
<h4>Controller function getValue</h4>
<p>The controller fuction will gather data from the HTML form and enforce validation as well as control the flow of data between other functions in this application</p>
<h4>Logic function palindromeCheck</h4>
<p>The definition of a palindrome is a fragment of text that is the same forward and backwards. The controller function has removed any special characters, form validation ensured only strings could be presented and all white space has been removed as well. This will ensure that a phrase like TaCo CaT! will pass as a palindrome. palindromeCheck with accept the validated text as well as the reversed version but this function will depend on a couple other helper functions that will make sure the text is passed in correctly.</p>
<h5>Helper function isAlpha</h5>
<p>This function uses REGEX statements to check the value against the english alphabet. It will return true if it passes the test</p>
<h5>Helper function reverseString</h5>
<ol>
<li>Declare string variable reversedString </li>
<li>By use of for loops concatenate the last indexed character of the string into the declared reversedString.</li>
<li>Return reversedString once the loop has completed.</li>
</ol>
<h4>Display function</h4>
<p>There are two outcomes, successfully palindrome or failed palindrome check. If the string is a palindrome then display a success message along with the reversed string. There is a light green background shown. The same happens with a negative palindrome check except the background is red and a failed message is displayed. </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 gy-2">
<div class="col order-last order-lg-first text-light d-flex align-items-center justify-content-start">
<div><span class="text-muted">©2021</span> Adam Nihiser | [email protected]</div>
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-center">
<img src="/img/adam_p_nihiser_logo_notitle.png" alt="Adam Nihiser Logo" height="48">
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-end">
<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/MerkkieMer" 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>