-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.html
170 lines (155 loc) · 8.95 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>TacoCat: A coding Project by Helena Vaquera</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">
<link href="css/site.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet">
<link rel="icon" type="image/png" href="img/applogo.png">
<!-- font-awesome -->
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
</head>
<body class="d-flex flex-column h-100">
<!-- ======== Nav Section ======== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./img/applogo.png" height="25px">TacoCat</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/helenalvp/tacocat">Git Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://helenalvp.com/">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ======= Main Section ======== -->
<main class="flex-shrink-0">
<div class="container py-4 px-5 pt-5 mt-lg-5">
<h2 class="title border-1 border-bottom border-dark">The Code for TacoCat</h2>
<div class="row row-cols-1 row cols-lg-2 ">
<div class="col-lg-8">
<pre class="line-numbers">
<code class="language-javascript">
function getString(){
let originalString = document.getElementById("userString").value;
if(originalString != "" && originalString.length > 1){
let userStr = originalString.replace(/\W/g, '').toLowerCase();
let msgObj = checkPalindrome(userStr)
displayMessage(msgObj)
} else {
alert("Please enter a phrase or word")
}
}
function checkPalindrome(str){
let revStr = "";
let msgObj = {}
for( let i = str.length -1; i >= 0 ; i --){
revStr += str[i];
}
(revStr == str)?(msgObj ={
heading : `You entered a Palindrome!`,
msg :`Your palindrome is ${str}.`
}):(msgObj ={
heading : `You did not enter a palindrome`,
msg : `${str} is not the same as ${revStr}`
})
return msgObj;
}
function displayMessage(obj){
document.getElementById("alert-header").innerHTML = obj.heading;
document.getElementById("msg").innerHTML = obj.msg;
document.getElementById("alert").classList.remove("invisible");
}
</code>
</pre>
</div>
<div class="col-lg-4">
<p>
This project retrieves the user's string and checks to see if the string is a palindrome or not, and displays its results to the user.
</p>
<h5 class="info-font">
getString
</h5>
<p>
<span class="text-danger">getString</span> gets the user's input and validates the input value, making sure that it is a string.
If it is not, then it will ask the user to enter a phrase or word.
If it is, then it will change the string to lowercase and user regex to take out spaces and special characters. Then it will call <span class="text-danger">checkPalindrome</span> and use that result to call <span class="text-danger">displayMessage</span>.
</p>
<h5 class="info-font mt-lg-4">
checkPalindrome
</h5>
<p>
<span class="text-danger">checkPalindrome</span> uses a for loop to create a new reversed string of the user's string.
The function will then return a message object according to the results fo the palindrome check to be used in <span class="text-danger">displayMessage</span>.
</p>
<h5 class="info-font mt-lg-5">
displayMessage
</h5>
<p>
<span class="text-danger">displayMessage</span> uses the results of <span class="text-danger">checkPalindrome</span>, takes out the class that makes the alert visible, and adds the message of the results to the alert dialoge box for the user to see.
</p>
</div>
</div>
</div>
</main>
<!-- ======== Footer Section ======== -->
<footer class="footer mt-auto py-3 bg-dark text-light sticky-footer">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-lg-3 gy-2">
<div class="col text-light order-last order-lg-first">
<div><span class="text-muted">©2021</span> Helena Vaquera | helenalvp@gmail.com</div>
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-center">
<img src="img/self-logo/logo-circle.png" alt="Helena Vaquera Logo" height="40">
</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://linkedin.com/in/helenalvp/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="https://github.com/helenalvp" target="_blank"><i class="fab fa-github fa-2x"></i></a></div>
<div class="col social"><a href="https://twitter.com/helenalvp" target="_blank"><i class="fab fa-twitter fa-2x"></i></a></div>
<div class="col social"><a href="https://dev.to/helenalvp" target="_blank"><i class="fab fa-dev 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>