These are snippets of code from the core of this project. Features such as animations and dynamic DOM changes are not included here.
//function that finds all matches
function sumOfAllFearsA(fears, k) {
matches = [];
for (r = 0; r < fears.length; r++) {
for (i = r + 1; i < fears.length; i++) {
if (fears[r] + fears[i] == k) {
matches.push([fears[r], fears[i]])
}
}
}
return matches;
}
//function that returns true or false
function sumOfAllFearsB(fears, k) {
for (r = 0; r < fears.length; r++) {
for (i = r + 1; i < fears.length; i++) {
if (fears[r] + fears[i] == k) {
return true;
}
}
}
return false;
}
<!-- Page Content -->
<div class="content content-centered">
<div class="container full-height" id="content-container">
<div class="row text-center">
<div class="col">
<h1>Sum Of All Fears</h1>
<p>Provide a number and see which sets of numbers will add to that number.</p>
</div>
</div>
<div class="row text-center bottom-buffer">
<div class="col-xl-10 col-sm-12">
<input type="text" id="answer-input" class="input-string" value="" placeholder="Answer Value" />
</div>
<div class="col-xl-2 col-sm-12">
<button class="custom-button full-width" id="run"><span class="glyphicon glyphicon-repeat"></span>RUN</button>
</div>
</div>
<div class="row">
<div class="col">
<div class="grid-container" id="grid-container">
</div>
</div>
</div>
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat( 12, minmax(50px, 1fr) );
}
@media (max-width: 992px) {
.grid-container {
grid-template-columns: repeat( auto-fill, minmax(50px, 1fr) );
}
}
.grid-item {
border: 1px solid white;
font-size: 30px;
text-align: center;
transition: background-color 0.15s ease-in;
}