Skip to content

Instantly share code, notes, and snippets.

@ZacharyDigital

ZacharyDigital/index.html

Last active July 16, 2025 09:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZacharyDigital/2b3e191589d8818c2b54adecf89a62c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZacharyDigital/2b3e191589d8818c2b54adecf89a62c3 to your computer and use it in GitHub Desktop.
Download ZIP
Terminus Equation Calculator
Raw
index.html
<h1>Terminus Equation Calculator (BO6)</h1>
<h2>Select Values for x, y and z</h2>
<div class="variable" id="x-variables">
<h2>X:</h2>
<div class="image-option" onclick="selectVariable('x', 0)">
<img src="https://i.ibb.co/5rDRw30/symbols-01.jpg" alt="Value 0">
</div>
<div class="image-option" onclick="selectVariable('x', 10)">
<img src="https://i.ibb.co/PFmbJ00/symbols-02.jpg" alt="Value 10">
</div>
<div class="image-option" onclick="selectVariable('x', 11)">
<img src="https://i.ibb.co/FqXw4mG/symbols-03.jpg" alt="Value 11">
</div>
<div class="image-option" onclick="selectVariable('x', 20)">
<img src="https://i.ibb.co/TrNY7Qf/symbols-04.jpg" alt="Value 20">
</div>
<div class="image-option" onclick="selectVariable('x', 21)">
<img src="https://i.ibb.co/jfYKRth/symbols-05.jpg" alt="Value 21">
</div>
<div class="image-option" onclick="selectVariable('x', 22)">
<img src="https://i.ibb.co/bXGth05/symbols-06.jpg" alt="Value 22">
</div>
</div>
<div class="variable" id="y-variables">
<h2>Y:</h2>
<div class="image-option" onclick="selectVariable('y', 0)">
<img src="https://i.ibb.co/5rDRw30/symbols-01.jpg" alt="Value 0">
</div>
<div class="image-option" onclick="selectVariable('y', 10)">
<img src="https://i.ibb.co/PFmbJ00/symbols-02.jpg" alt="Value 10">
</div>
<div class="image-option" onclick="selectVariable('y', 11)">
<img src="https://i.ibb.co/FqXw4mG/symbols-03.jpg" alt="Value 11">
</div>
<div class="image-option" onclick="selectVariable('y', 20)">
<img src="https://i.ibb.co/TrNY7Qf/symbols-04.jpg" alt="Value 20">
</div>
<div class="image-option" onclick="selectVariable('y', 21)">
<img src="https://i.ibb.co/jfYKRth/symbols-05.jpg" alt="Value 21">
</div>
<div class="image-option" onclick="selectVariable('y', 22)">
<img src="https://i.ibb.co/bXGth05/symbols-06.jpg" alt="Value 22">
</div>
</div>
<div class="variable" id="z-variables">
<h2>Z:</h2>
<div class="image-option" onclick="selectVariable('z', 0)">
<img src="https://i.ibb.co/5rDRw30/symbols-01.jpg" alt="Value 0">
</div>
<div class="image-option" onclick="selectVariable('z', 10)">
<img src="https://i.ibb.co/PFmbJ00/symbols-02.jpg" alt="Value 10">
</div>
<div class="image-option" onclick="selectVariable('z', 11)">
<img src="https://i.ibb.co/FqXw4mG/symbols-03.jpg" alt="Value 11">
</div>
<div class="image-option" onclick="selectVariable('z', 20)">
<img src="https://i.ibb.co/TrNY7Qf/symbols-04.jpg" alt="Value 20">
</div>
<div class="image-option" onclick="selectVariable('z', 21)">
<img src="https://i.ibb.co/jfYKRth/symbols-05.jpg" alt="Value 21">
</div>
<div class="image-option" onclick="selectVariable('z', 22)">
<img src="https://i.ibb.co/bXGth05/symbols-06.jpg" alt="Value 22">
</div>
</div>
<div id="results">
<h3>Results:</h3>
<p id="result1">1° Number: </p>
<p id="result2">2° Number: </p>
<p id="result3">3° Number: </p>
</div>
<div class="donation-banner">
<button class="close-banner" onclick="removeBanner()">×</button>
<h3>Thank You!</h3>
<p>to all the people who have donated or will donate.<br> Your support is crucial 💙</p>
</div>
<div class="footer">
<p>Made by Simo22
<a href="https://paypal.me/sim022" target="_blank">
Help me buy another month of game pass
</a>
</p>
</div>
Raw
script.js
let xValue = null;
let yValue = null;
let zValue = null;
function selectVariable(variable, value) {
if (variable === 'x') {
xValue = value;
} else if (variable === 'y') {
yValue = value;
} else if (variable === 'z') {
zValue = value;
}
updateImageSelection(variable, value);
if (xValue !== null && yValue !== null && zValue !== null) {
calculateResults();
}
}
function updateImageSelection(variable, value) {
const allImages = document.querySelectorAll(`#${variable}-variables img`);
allImages.forEach(img => img.classList.remove('selected'));
const selectedImage = document.querySelector(`#${variable}-variables img[alt="Value ${value}"]`);
if (selectedImage) {
selectedImage.classList.add('selected');
}
}
function calculateResults() {
const result1 = (xValue * 2) + 11;
const result2 = ((zValue * 2) + yValue) - 5;
const result3 = (zValue + yValue) - xValue;
document.getElementById('result1').innerHTML = `1° Number: <strong>${result1}</strong>`;
document.getElementById('result2').innerHTML = `2° Number: <strong>${result2}</strong>`;
document.getElementById('result3').innerHTML = `3° Number: <strong>${Math.abs(result3)}</strong>`;
}
function removeBanner() {
const banner = document.querySelector('.donation-banner');
if (banner) {
banner.style.display = 'none';
}
}
Raw
style.css
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
margin: 0;
overflow:hidden;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100vh;
color: #333;
}
h1 {
margin-bottom: 1vh;
font-size: 1.5rem;
color: #007BFF;
text-align: center;
}
h2 {
margin-bottom: 15px;
font-size: 1.2rem;
color: #007BFF;
text-align: center;
}
.variables-container {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 600px;
}
.variable {
display:flex;
text-align: center;
margin: 0 10px;
}
.image-option {
cursor: pointer;
margin: 5px;
display: inline-block;
transition: transform 0.2s, box-shadow 0.2s;
}
img {
width: 70px;
height: 70px;
object-fit: cover;
border: 2px solid transparent;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: border-color 0.2s, box-shadow 0.2s;
}
img.selected {
border-color: red;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}
img:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.symbols-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#results {
margin-top: 15px;
padding: 10px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
text-align: center;
width: 100%;
max-width: 600px;
}
#results h3 {
margin-bottom: 5px;
font-size: 1.2rem;
color: #007BFF;
}
#results p {
margin: 3px 0;
font-size: 0.9rem;
}
.footer {
margin-top: 1vh;
margin-bottom: 5vh;
text-align: center;
font-size: 0.6rem;
}
@media (max-width: 400px) {
img {
width: 50px;
height: 50px;
}
h1 {
font-size: 1.2rem;
}
#results h3 {
font-size: 1rem;
}
}
.donation-banner {
position: fixed;
top: 70%;
right: 20px;
background-color: #fff;
border: 2px solid #007BFF;
border-radius: 8px;
padding: 10px;
width: 200px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
font-size: 0.9rem;
z-index: 1000;
}
.donation-banner .close-banner {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
font-size: 1.2rem;
font-weight: bold;
color: #007BFF;
cursor: pointer;
transition: color 0.3s ease;
}
.donation-banner .close-banner:hover {
color: #FF0000;
}
.donation-banner h3 {
margin: 0;
font-size: 1rem;
color: #007BFF;
font-weight: bold;
}
.donation-banner p {
margin: 10px 0;
font-size: 0.8rem;
color: #333;
}
.donation-banner a {
display: inline-block;
text-decoration: none;
font-size: 0.8rem;
color: #fff;
background-color: #007BFF;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.donation-banner a:hover {
background-color: #0056b3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment