msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Add water drinking goal

Browse Source
pull/209/head
shondsouza 9 months ago
parent 9409685c9a
commit 6fb2516d22
3 changed files with 141 additions and 64 deletions
Show Stats Download Patch File Download Diff File

67
drink-water/index.html
Unescape View File

@ -1,37 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" /> <title>Drink Water Tracker</title>
<title>Drink Water</title> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>Drink Water</h1> <h1>Drink Water Tracker</h1>
<h3>Goal: 2 Liters</h3> <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="cup">
<div class="remained" id="remained"> <div class="remained" id="remained">
<span id="liters"></span> <span id="liters">2.00L</span>
<small>Remained</small> <small>Remained</small>
</div> </div>
<div class="percentage" id="percentage"></div>
</div>
<div class="percentage" id="percentage"></div> <p class="text">Select how many glasses of water you have drank</p>
</div> <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>
<p id="glass-info" class="glass-info">Each glass represents: 250 ml</p>
<p class="text">Select how many glasses of water that you have drank</p> <script src="script.js"></script>
</body>
<div class="cups"> </html>
<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="script.js"></script>
</body>
</html>

84
drink-water/script.js
Unescape View File

@ -1,49 +1,75 @@
const smallCups = document.querySelectorAll('.cup-small') const smallCups = document.querySelectorAll('.cup-small');
const liters = document.getElementById('liters') const liters = document.getElementById('liters');
const percentage = document.getElementById('percentage') const percentage = document.getElementById('percentage');
const remained = document.getElementById('remained') 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) => { smallCups.forEach((cup, idx) => {
cup.addEventListener('click', () => highlightCups(idx)) cup.addEventListener('click', () => highlightCups(idx));
}) });
function highlightCups(idx) { function highlightCups(idx) {
if (idx===7 && smallCups[idx].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')) { else if (smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling?.classList.contains('full')) {
idx-- idx--;
} }
smallCups.forEach((cup, idx2) => { smallCups.forEach((cup, idx2) => {
if(idx2 <= idx) { if (idx2 <= idx) {
cup.classList.add('full') cup.classList.add('full');
} else { } else {
cup.classList.remove('full') cup.classList.remove('full');
} }
}) });
updateBigCup() updateBigCup();
} }
function updateBigCup() { function updateBigCup() {
const fullCups = document.querySelectorAll('.cup-small.full').length const fullCups = document.querySelectorAll('.cup-small.full').length;
const totalCups = smallCups.length const totalCups = smallCups.length;
if(fullCups === 0) { if (fullCups === 0) {
percentage.style.visibility = 'hidden' percentage.style.visibility = 'hidden';
percentage.style.height = 0 percentage.style.height = 0;
} else { } else {
percentage.style.visibility = 'visible' percentage.style.visibility = 'visible';
percentage.style.height = `${fullCups / totalCups * 330}px` percentage.style.height = `${(fullCups / totalCups) * 330}px`;
percentage.innerText = `${fullCups / totalCups * 100}%` percentage.innerText = `${Math.round((fullCups / totalCups) * 100)}%`;
} }
if(fullCups === totalCups) { if (fullCups === totalCups) {
remained.style.visibility = 'hidden' remained.style.visibility = 'hidden';
remained.style.height = 0 remained.style.height = 0;
} else { } else {
remained.style.visibility = 'visible' remained.style.visibility = 'visible';
liters.innerText = `${2 - (250 * fullCups / 1000)}L` liters.innerText = `${(goal - (mlPerGlass / 1000) * fullCups).toFixed(2)}L`;
} }
} }

54
drink-water/style.css
Unescape View File

@ -10,8 +10,9 @@
} }
body { body {
background-color: #3494e4; background-color: #F5EFE7;
color: #fff; color: black;
font-weight: bold;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -35,7 +36,7 @@ h3 {
border-radius: 0 0 40px 40px; border-radius: 0 0 40px 40px;
height: 330px; height: 330px;
width: 150px; width: 150px;
margin: 30px 0; margin: 20px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -55,6 +56,10 @@ h3 {
transition: 0.3s ease; transition: 0.3s ease;
} }
.cup.cup-small:hover {
background-color: #d9ebfc;
}
.cup.cup-small.full { .cup.cup-small.full {
background-color: var(--fill-color); background-color: var(--fill-color);
color: #fff; color: #fff;
@ -102,3 +107,46 @@ h3 {
text-align: center; text-align: center;
margin: 0 0 5px; 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;
}
}
Write Preview
Loading…
Cancel
Save