These are snippets of code from the core of this project. Features such as animations and dynamic DOM changes are not included here.
function tacocat(text) {
let latter = text.length - 1;
let halfwayPoint = latter / 2;
for (let former = 0; former < halfwayPoint; former++) {
if (text[former] != text[latter]) {
return false;
}
latter--;
}
}
<!-- Page Content -->
<div class="content content-centered">
<div class="container" id="content-container">
<div class="row text-center">
<div class="col">
<div >
<h1 class="text-center">TacocaT</h1>
</div>
<ul class="list-unstyled">
<li >Type some text to see if it's a palindrome!</li>
<li >The algorithm used for this compares the first & last letters, moving inward each iteration to maximize efficiency.</li>
</ul>
</div>
</div>
<div class="row text-center bottom-buffer">
<div class="col-md-12 col-xl-10 input-column">
<input id="input" class=" input-string" type="text" placeholder="Enter some text..." />
</div>
<div class="col-md-12 col-xl-2">
<button id="solve-button" class=" custom-button">
Check
</button>
</div>
</div>
<div class="row">
<div class="col">
<div class="output-container"></div>
</div>
</div>
</div>
</div>
.output-container {
color: #fcd088;
font-size: 20px;
padding: 12px;
width: 100%;
min-height: 58px;
border: 2px solid #fcd088;
display:flex;
overflow-x: hidden;
transition: border 0.5s ease;
}
.output-container div:nth-of-type(1) {
margin-left: auto;
}
.output-container div:nth-last-of-type(1) {
margin-right: auto;
}
.output-container div {
padding-left: 0.5vw;
padding-right: 0.5vw;
transition: background-color 0.5s ease;
}