diff --git a/drink-water/index.html b/drink-water/index.html index ca934e1..939d66f 100644 --- a/drink-water/index.html +++ b/drink-water/index.html @@ -1,37 +1,40 @@ - - - - - Drink Water - - -

Drink Water

-

Goal: 2 Liters

+ + + + Drink Water Tracker + + + +

Drink Water Tracker

+
+ + +
+

Goal: 2 Liters

-
-
- - Remained -
+
+
+ 2.00L + Remained +
+
+
-
-
+

Select how many glasses of water you have drank

+
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
+

Each glass represents: 250 ml

-

Select how many glasses of water that you have drank

- -
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
250 ml
-
- - - - + + + \ No newline at end of file diff --git a/drink-water/script.js b/drink-water/script.js index 12143ae..a7d7e35 100644 --- 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') + if (idx2 <= idx) { + 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 + if (fullCups === 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 + if (fullCups === totalCups) { + 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`; } -} +} \ No newline at end of file diff --git a/drink-water/style.css b/drink-water/style.css index f4580ab..564dee7 100644 --- 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; + } +} \ No newline at end of file