👀

2023-07-14 15:16:41 +02:00 · 2023-07-14 15:16:41 +02:00 · 60ebc18af7
parent 2d37f2e143
commit 60ebc18af7
2 changed files with 94 additions and 3 deletions
--- a/source/css/index.css
+++ b/source/css/index.css
@ -119,6 +119,7 @@ details *:hover {
  from {
    font-weight: normal;
  }
+
  to {
    filter: drop-shadow(0.5px 0.5px 2px);
  }
@ -150,6 +151,7 @@ details *:hover {
    width: 320px;
    padding-bottom: 4em;
  }
+
  h1 {
    filter: drop-shadow(5px 5px 5px var(--bg));
  }
--- a/source/isthechairloadbearingenough.html
+++ b/source/isthechairloadbearingenough.html
@ -0,0 +1,89 @@
+---
+---
+<!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>