completed drink water

tsr-kairi · Jul 2, 2021 · 9bbfe48 · 9bbfe48
1 parent 59f49c1
commit 9bbfe48
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/Day 16 - Drink Water/app.js b/Day 16 - Drink Water/app.js
@@ -0,0 +1,51 @@
+const smallCups = document.querySelectorAll(".cup-small");
+const liters = document.getElementById("liters");
+const percentage = document.getElementById("percentage");
+const remained = document.getElementById("remained");
+
+updateBigCup();
+
+smallCups.forEach((cup, idx) => {
+  cup.addEventListener("click", () => highlightCups(idx));
+});
+
+function highlightCups(idx) {
+  if (
+    smallCups[idx].classList.contains("full") &&
+    !smallCups[idx].nextElementSibling.classList.contains("full")
+  ) {
+    idx--;
+  }
+
+  smallCups.forEach((cup, idx2) => {
+    if (idx2 <= idx) {
+      cup.classList.add("full");
+    } else {
+      cup.classList.remove("full");
+    }
+  });
+
+  updateBigCup();
+}
+
+function updateBigCup() {
+  const fullCups = document.querySelectorAll(".cup-small.full").length;
+  const totalCups = smallCups.length;
+
+  if (fullCups === 0) {
+    percentage.style.visibility = "hidden";
+    percentage.style.height = 0;
+  } else {
+    percentage.style.visibility = "visible";
+    percentage.style.height = `${(fullCups / totalCups) * 230}px`;
+    percentage.innerText = `${(fullCups / totalCups) * 100}%`;
+  }
+
+  if (fullCups === totalCups) {
+    remained.style.visibility = "hidden";
+    remained.style.height = 0;
+  } else {
+    remained.style.visibility = "visible";
+    liters.innerText = `${2 - (250 * fullCups / 1000)}L`;
+  }
+}
diff --git a/Day 16 - Drink Water/index.html b/Day 16 - Drink Water/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Drink | Water</title>
+  </head>
+  <body>
+    <h1>Drink Water</h1>
+    <h3>Goal: 2 liters</h3>
+
+    <div class="cup">
+      <div class="remained" id="remained">
+        <span id="liters"></span>
+        <small>Remained</small>
+      </div>
+
+      <div class="percentage" id="percentage"></div>
+    </div>
+
+    <p class="text">Select how many glasses of water that you have drank</p>
+
+    <div class="cups">
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 16 - Drink Water/style.css b/Day 16 - Drink Water/style.css
@@ -0,0 +1,106 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:400,600&display=swap");
+
+:root {
+  --border-color: #144fc6;
+  --fill-color: #6ab3f8;
+}
+
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #3494e4;
+  color: #fff;
+  font-family: "Montserrat", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+h1 {
+  margin: 10px 0 0;
+}
+
+h3 {
+  font-weight: 400;
+  margin: 10px 0px;
+}
+
+.cup {
+  background-color: #fff;
+  border: 4px solid var(--border-color);
+  color: var(--border-color);
+  border-radius: 0 0 40px 40px;
+  height: 230px;
+  width: 130px;
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cup.cup-small {
+  width: 40px;
+  height: 65px;
+  border-radius: 0 0 15px 15px;
+  background-color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  font-size: 14px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 10px;
+  transition: 0.3s ease;
+}
+
+.cup.cup-small.full {
+  background-color: var(--fill-color);
+}
+
+.cups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 280px;
+}
+
+.remained {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex: 1;
+  transition: 0.3s ease;
+}
+
+.remained span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.remained small {
+  font-size: 12px;
+}
+
+.percentage {
+  background-color: var(--fill-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  height: 0;
+  transition: 0.3s ease;
+}
+
+.text {
+  text-align: center;
+  margin: 0 0 5px;
+}