Merge 6fb2516d22 into 9409685c9a

9 months ago · dbbb662cd0
parent 9409685c9a 6fb2516d22
commit dbbb662cd0
3 changed files with 141 additions and 64 deletions
--- a/drink-water/index.html
+++ b/drink-water/index.html
@ -1,26 +1,28 @@
 <!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>Drink Water</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Drink Water Tracker</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Drink Water</h1>
-    <h3>Goal: 2 Liters</h3>
+<h1>Drink Water Tracker</h1>
+<div class="goal-input">
+  <input type="number" id="goal" placeholder="Set your goal (liters)" min="0.5" max="5" step="0.5">
+  <button onclick="setGoal()">Set Goal</button>
+</div>
+<h3 id="goal-display">Goal: 2 Liters</h3>

 <div class="cup">
  <div class="remained" id="remained">
-        <span id="liters"></span>
+    <span id="liters">2.00L</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>
-
+<p class="text">Select how many glasses of water you have drank</p>
 <div class="cups">
  <div class="cup cup-small">250 ml</div>
  <div class="cup cup-small">250 ml</div>
@ -31,6 +33,7 @@
  <div class="cup cup-small">250 ml</div>
  <div class="cup cup-small">250 ml</div>
 </div>
+<p id="glass-info" class="glass-info">Each glass represents: 250 ml</p>

 <script src="script.js"></script>
 </body>
--- a/drink-water/script.js
+++ b/drink-water/script.js
@ -1,49 +1,75 @@
-const smallCups = document.querySelectorAll('.cup-small')
-const liters = document.getElementById('liters')
-const percentage = document.getElementById('percentage')
-const remained = document.getElementById('remained')
+const smallCups = document.querySelectorAll('.cup-small');
+const liters = document.getElementById('liters');
+const percentage = document.getElementById('percentage');
+const remained = document.getElementById('remained');
+const goalDisplay = document.getElementById('goal-display');
+const glassInfo = document.getElementById('glass-info');

-updateBigCup()
+let goal = 2; // Default goal in liters
+let mlPerGlass = (goal * 1000) / 8; // Default milliliters per glass
+
+function setGoal() {
+    const inputGoal = parseFloat(document.getElementById('goal').value);
+    if (inputGoal >= 0.5 && inputGoal <= 5) {
+        goal = inputGoal;
+        // Calculate ml per glass by dividing total ml by 8 glasses
+        mlPerGlass = Math.round((goal * 1000) / 8);
+
+        // Update display elements
+        glassInfo.textContent = `Each glass represents: ${mlPerGlass} ml`;
+        goalDisplay.textContent = `Goal: ${goal} Liters`;
+        liters.textContent = `${goal.toFixed(2)}L`;
+
+        // Update text inside each small cup
+        smallCups.forEach((cup) => {
+            cup.textContent = `${mlPerGlass} ml`;
+        });
+
+        updateBigCup();
+    } else {
+        alert('Please set a goal between 0.5 and 5 liters.');
+    }
+}

 smallCups.forEach((cup, idx) => {
-    cup.addEventListener('click', () => highlightCups(idx))
-})
+    cup.addEventListener('click', () => highlightCups(idx));
+});

 function highlightCups(idx) {
-    if (idx===7 && smallCups[idx].classList.contains("full")) idx--;
-    else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) {
-        idx--
+    if (idx === 7 && smallCups[idx].classList.contains('full')) idx--;
+    else if (smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling?.classList.contains('full')) {
+        idx--;
    }

    smallCups.forEach((cup, idx2) => {
        if (idx2 <= idx) {
-            cup.classList.add('full')
+            cup.classList.add('full');
        } else {
-            cup.classList.remove('full')
+            cup.classList.remove('full');
        }
-    })
+    });

-    updateBigCup()
+    updateBigCup();
 }

 function updateBigCup() {
-    const fullCups = document.querySelectorAll('.cup-small.full').length
-    const totalCups = smallCups.length
+    const fullCups = document.querySelectorAll('.cup-small.full').length;
+    const totalCups = smallCups.length;

    if (fullCups === 0) {
-        percentage.style.visibility = 'hidden'
-        percentage.style.height = 0
+        percentage.style.visibility = 'hidden';
+        percentage.style.height = 0;
    } else {
-        percentage.style.visibility = 'visible'
-        percentage.style.height = `${fullCups / totalCups * 330}px`
-        percentage.innerText = `${fullCups / totalCups * 100}%`
+        percentage.style.visibility = 'visible';
+        percentage.style.height = `${(fullCups / totalCups) * 330}px`;
+        percentage.innerText = `${Math.round((fullCups / totalCups) * 100)}%`;
    }

    if (fullCups === totalCups) {
-        remained.style.visibility = 'hidden'
-        remained.style.height = 0
+        remained.style.visibility = 'hidden';
+        remained.style.height = 0;
    } else {
-        remained.style.visibility = 'visible'
-        liters.innerText = `${2 - (250 * fullCups / 1000)}L`
+        remained.style.visibility = 'visible';
+        liters.innerText = `${(goal - (mlPerGlass / 1000) * fullCups).toFixed(2)}L`;
    }
 }
--- a/drink-water/style.css
+++ b/drink-water/style.css
@ -10,8 +10,9 @@
 }

 body {
-  background-color: #3494e4;
-  color: #fff;
+  background-color: #F5EFE7;
+  color: black;
+  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
@ -35,7 +36,7 @@ h3 {
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
-  margin: 30px 0;
+  margin: 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
@ -55,6 +56,10 @@ h3 {
  transition: 0.3s ease;
 }

+.cup.cup-small:hover {
+  background-color: #d9ebfc;
+}
+
 .cup.cup-small.full {
  background-color: var(--fill-color);
  color: #fff;
@ -102,3 +107,46 @@ h3 {
  text-align: center;
  margin: 0 0 5px;
 }
+
+.goal-input {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.goal-input input {
+  padding: 5px;
+  font-size: 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+.goal-input button {
+  padding: 5px 10px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  background-color: var(--fill-color);
+  color: #fff;
+  cursor: pointer;
+}
+
+.goal-input button:hover {
+  background-color: #4a9edd;
+}
+
+.glass-info {
+  margin-top: 10px;
+  font-size: 16px;
+  text-align: center;
+}
+
+@media (max-width: 480px) {
+  .cups {
+    width: 100%;
+  }
+
+  .cup.cup-small {
+    margin: 3px;
+  }
+}