add: Task

MartinSchneidder · Nov 22, 2023 · 65d123b · 65d123b
1 parent d6867f0
commit 65d123b
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/2of3/index.html b/2of3/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Document</title>
+  </head>
+
+  <body class="center" >
+    <div>
+    <div >
+      <input type="checkbox" id="fast" ></input><label for="fast">Fast</label>
+    </div>
+    <div >
+      <input type="checkbox" id="cheap"></input><label for="cheap">Cheap</label>
+    </div>
+    <div >
+      <input type="checkbox" id="good"></input><label for="good">Good</label>
+    </div>
+    </div>
+
+
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/2of3/script.js b/2of3/script.js
@@ -0,0 +1,39 @@
+const checkFast = document.getElementById("fast");
+const checkCheap = document.getElementById("cheap");
+const checkGood = document.getElementById("good");
+let lastTouched;
+
+checkFast.addEventListener("change", function () {
+  if (numChecked() > 2) {
+    lastTouched.checked = false;
+  }
+  lastTouched = checkFast;
+});
+
+checkCheap.addEventListener("change", function () {
+  if (numChecked() > 2) {
+    lastTouched.checked = false;
+  }
+  lastTouched = checkCheap;
+});
+
+checkGood.addEventListener("change", function () {
+  if (numChecked() > 2) {
+    lastTouched.checked = false;
+  }
+  lastTouched = checkGood;
+});
+
+function numChecked() {
+  let res = 0;
+  if (checkFast.checked) {
+    res += 1;
+  }
+  if (checkCheap.checked) {
+    res += 1;
+  }
+  if (checkGood.checked) {
+    res += 1;
+  }
+  return res;
+}
diff --git a/2of3/style.css b/2of3/style.css
@@ -0,0 +1,14 @@
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+
+  font-size: 2rem;
+}
+
+input {
+  margin: 2rem;
+  transform: translateY(-0.2rem) scale(2);
+}