vampysite/source/isthechairloadbearingenough...

89 lines
2.1 KiB
HTML
Raw Normal View History

2023-07-14 13:16:41 +00:00
---
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include header.html %}
<link rel="stylesheet" href="/css/page.css">
<style>
body {
display: unset;
}
input[type="date"] {
background-color: var(--bg-code);
color: var(--accent);
border: none;
border-radius: 3px;
padding: 5px;
font-family: "Crimson";
text-transform: uppercase;
}
button {
background-color: var(--accent-dark);
color: var(--bg-code);
padding: 5px;
border: none;
border-radius: 3px;
display: block;
margin-top: 1vh;
}
button:hover {
filter: brightness(110%);
}
button:active {
filter: drop-shadow(3px 3px 2px var(--bg-code));
}
</style>
<title>Is The Chair Load Bearing Enough</title>
</head>
<body>
<p>When did you get the fancy load-bearing chair?</p>
<input type="date" id="start-date">
<button type="button" id="date-submit">Submit</button>
<p id="result"></p>
<hr>
<a href="/">Back To Main Page</a>
<script>
const button = document.getElementById('date-submit');
const output = document.getElementById('result');
button.addEventListener('click', function handleClick() {
const start = document.getElementById('start-date').valueAsDate;
const today = new Date();
if (!start) {
output.innerHTML = "Please enter a date above";
} else {
const price = "1297";
const monthDiff = (today.getFullYear() - start.getFullYear()) * 12 + (today.getMonth() - start.getMonth());
const current = (monthDiff * price) / 36;
if (current <= 0 ) {
output.innerHTML = "The chair has not been bought yet.";
return;
}
if ((price - current) <= 0 ) {
output.innerHTML = "The chair is no longer load-bearing.";
return;
}
output.innerHTML = `<b>${price - current}€</b> left until the chair is no longer load-bearing.`;
}
});
</script>
</body>
</html>