-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
172 lines (151 loc) · 7.49 KB
/
Copy pathcode.html
File metadata and controls
172 lines (151 loc) · 7.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Evil Olive: A Coding Challange</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<!-- Devicons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<!-- Prism CSS -->
<link rel="stylesheet" href="/css/prism.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<header>
<nav id="mainNav" class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="/index.html">
<img src="/img/Base Logo Vector Files Blue Red.svg" height="50" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon-mrb">
<i class="bi bi-list"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/app.html">App</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/code.html">The Code</a>
</li>
<li class="nav-item">
<!-- Change This Before Publishing -->
<a class="nav-link" href="https://github.com/MattBridges/EvilOlive">The Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mattbridgesportfolio.netlify.app/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="content container">
<div class="row">
<h1 class="border-bottom botder-2 border-dark">The Code</h1>
<!-- The Source Code -->
<div class="col-12 col-lg-8">
<pre class="line-numbers">
<code class="language-js">
//Entry Point
function GetValues() {
//Get the input string
let inputString = document.getElementById('userString').value;
DisplayResults(inputString,CheckForPalindrome(inputString));
}
//Logic Function
function CheckForPalindrome(stringToCheck) {
//Remove any character thats not a letter or number regardless of case.
let cleanedString = stringToCheck.replace(/[^a-z0-9]/gi, '').toLowerCase();
//Iterate from outside to inside to see if input is palindrome and return false if not.
for(let i = 0; i<=(cleanedString.length/2);i++){
if(cleanedString[i] != cleanedString[cleanedString.length-i-1]){
//Not a palindrome
return false;
}
}
//If we make it through the check, the word is a palindrome so we return true
return true;
}
//View Function
function DisplayResults(inputString, result) {
let alertElement = document.getElementById('alert');
let alertHeading = document.getElementById('alertHeading');
let results = document.getElementById('results');
let inputReversed = inputString.replace(/[^a-z0-9]/gi, '').toLowerCase().split('').reverse().join('');
if (result) {
alertElement.classList.replace('alert-danger', 'alert-success');
alertHeading.textContent = 'Well Done!You entered a Palindrome';
results.textContent = `Your phrase reversed is: ${inputReversed}`;
alertElement.classList.remove('invisible');
}
else {
alertElement.classList.replace('alert-success', 'alert-danger');
alertHeading.textContent = 'Sorry, you did not enter a Palindrome!';
results.textContent = `Your phrase reversed is: ${inputReversed}`;
alertElement.classList.remove('invisible');
}
}
</code>
</pre>
</div>
<div class="col-12 col-lg-4">
<p>The code is structured with three functions.</p>
<h5><code class="code-writeup">GetValues()</code></h5>
<p>This function our entry point, and grabs the text input string then passes the value to our display function</p>
<h5><code class="code-writeup">CheckForPalindrome()</code></h5>
<p>This function takes the input string, removed any spaces or special characters, then makes the remaining characters lower case. After it has cleaned the string, loops through each character starting with the first letter and checks if its value is equal to its equivalent position working backwards from the last character. If at any point these values are not equal the word is not a palindrome, and the loop returns false. Once we hit the middle of the word, all characters have been checked and passed so we return true.</p>
<h5><code class="code-writeup">DisplayResults()</code></h5>
<p>This function takes the users input that we passed into it in our entry point, then uses the CheckForPalindrome function to see if the input is a palindrome or not. If the word/phrase is a palindrome we display a green success alert card with the results. If the word/phrase is not a palindrome, we display a red failed card letting the user know the word is not a palindrome</p>
</div>
</div>
</main>
<footer class="container-fluid py-3">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 align-items-center order-last order-lg-first">
<div class="col text-center text-lg-start ">©2023 Matt Bridges</div>
<div class="col text-center">
<img src="/img/Light_Grey_Signature_Long.svg" height="40" alt="">
</div>
<div class="col d-flex justify-content-center justify-content-lg-end my-2">
<a href="https://www.linkedin.com/in/themattbridges/" target="_blank" class="socialicons"><i class="bi bi-linkedin"></i></a>
<a href="https://twitter.com/MattBridgesDev" target="_blank" class="socialicons"><i class="bi bi-twitter"></i></a>
<a href="https://www.instagram.com/mattbridgesdev/" target="_blank" class="socialicons"><i class="bi bi-instagram"></i></a>
<a href="https://github.com/MattBridges" target="_blank" class="socialicons"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- Prism 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>