-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
180 lines (146 loc) · 10.1 KB
/
code.html
File metadata and controls
180 lines (146 loc) · 10.1 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Poop!: A Coding Project by Clara Lopez-Uribe</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.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
<link href="css/site.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/site.webmanifest">
</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/android-chrome-CLU_dark-192x192.png" alt="ClaraLopezUribe Initials Logo" class="d-inline-block align-text-top me-3" height="24" width="24">Poop!</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/ClaraLopezUribe/TACOCAT.git">Git Repo (Opens a new tab)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!--=== Main Section ===-->
<main class="flex-shrink-0">
<div class="container col-xxl-8 py-5 mt-5">
<div>
<h1 class="display-4 lh-2 fw-bold">Poop!</h1>
<h2 class="subheading display-3 lh-2 mb-4 border-1 border-bottom border-dark"> The Code</h2>
</div>
<div class="row row-cols-1 row-cols-lg-2 g-5 py-1">
<div class="col order-last order-lg-first col-lg-8">
<pre class="line-numbers"><code class="language-javascript">
// ----- CONTROL ----- //
function initiate() {
// Resets alert box to invisible from previous uses
document.getElementById("alert").classList.add("invisible");
// Gets the user input from the DOM and assigns it to a variable so it can be accessed from another function
let userString = document.getElementById("userString").value;
let returnObject = checkPalindrome(userString);
displayResults(returnObject);
}
// ------ LOGIC -----//
function checkPalindrome(userString) {
// Cleans up the user input to ignore special characters and removes spaces (RegEx), and converts all characters to lowercase to facilitate comparison
let cleanString = userString.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
let reversedString = [];
let returnObject = {};
// Checks for length of the string to decrement starting from last index. The same results can be achieved using a chain of methods as follows: let reversedString = cleanString.split("").reverse().join("");
for (let i = cleanString.length - 1; i >= 0; i--) {
// ???: Why use += versus .push?
reversedString += cleanString[i];
}
if (userString == "" || userString.length == 1) {
returnObject.message = `Yeah, ok...0-1 character strings are technically a palindrome, but why don't you 'push' a little harder by using a few more characters`;
} else if (reversedString == cleanString) {
returnObject.message = `You came out smelling like roses!!!<br><br>"${userString}" is a palindrome!`;
} else {
returnObject.message = `Well, that stinks...<br><br>"${userString}" is not a palindrome! Try again!`;
}
returnObject.reversed = reversedString;
return returnObject;
}
// ----- DISPLAY -----//
function displayResults(returnObject) {
document.getElementById("alertHeader").innerHTML = `Your text reversed is: ${returnObject.reversed}`;
document.getElementById("result").innerHTML = returnObject.message;
document.getElementById("alert").classList.remove("invisible");
}
</code></pre>
</div>
<div class="col-lg-4 py-2">
<img src="img/poop-emoji-color.svg" alt="Smiling poop emoji" class="img-fluid center-block d-block mb-auto" width="300" height="300">
<a href="https://iconscout.com/icons/poop-emoji" class="text-underline font-size-sm" target="_blank">Poop Emoji</a> by <a href="https://iconscout.com/contributors/kolo-design" class="text-underline font-size-sm">Kalash</a> on <a href="https://iconscout.com" class="text-underline font-size-sm">IconScout</a>
<p class="display-6 mt-4">The code is structured in three functions:</p>
<h2>initiate()</h2>
<p>This function is triggered with an event listener when the user activates the button to submit their string. It's primary purpose is to retrieve the user input from the Document Object Model (DOM), declare and assign values to the variables that will be passed to other functions, and control the flow of the program with function calls </p>
<h2>checkPalindrome(userString)</h2>
<p>Using a chain of Javascript methods, this function prepares the userString for analysis by removing special characters and spaces, then converting all characters to lowercase. Then, using a decrementing for loop begining at the last index, each character of the resulting cleanString is stored in a new array in reverse order.</p>
<p>Finally, several conditions are tested to determine if the userString meets the criteria to be a palindrome, and a unique message for each is defined in an if/else-if/else statement. The message, along with the reversedString are stored in an object to be passed to the next function.</p>
<h2>displayResults(returnObject)</h2>
<p>This function uses the getElementById method and innerHTML propery to locate and set the content of the corresponding elements to the value of the reversed and message keys stored in the returnObject. Then, to display the message on the browser, the "invisible" class is removed from the div element containing the alert using the remove method on the classList propery.</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 d-flex align-items-center justify-content-center justify-content-md-start justify-content-xxl-center order-last order-md-first text-light">
<div><span class="text-muted">©2024</span> Clara Lopez-Uribe | claralopezuribe.com</div>
</div>
<div class="col d-flex align-items-center justify-content-center">
<img src="img/Signature White_CLUdark.png" alt="Clara Lopez-Uribe Signature Logo" height="40">
</div>
<div class="col d-flex align-items-center justify-content-center justify-content-md-end justify-content-xxl-center">
<div class="row">
<div class="col social"><a href="#" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="#" target="_blank"><i class="fab fa-github fa-2x"></i></a></div>
<div class="col social"><a href="#" target="_blank"><i class="fab fa-twitter fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" 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>