Hey, learner today In this blog post, We will be Creating a Daily Drink Water Goal Project Using HTML CSS & Javascript. In the past post, we have created many projects one of them Responsive Increment Counter Using HTML CSS & Javascript. Now it is time to create a Daily Drink Water Goal Project.
In this Project, we have created a Daily Water Drinking Goal using HTML CSS & Javascript. This Project helped me with Daily Water Drinking records How much I have drunk water At least I Have to Drink 2 Liter of water.
The Daily Water Intake Tracker was created in an HTML web browser that uses a JavaScript module to upgrade the current web development into an advanced multimedia platform. The project can be used through any web browser that only contains buttons and text. This application is ready to use you don’t need to enter any user login information to access the feature of the application. The user can do a simple task, you can only enter a numeric value in order to calculate your water intake.
Preview of Responsive Increment Counter on Codepen
You might like this
- Animated Navigation Bar Using HTML CSS & Javascript
- Responsive FAQ Collapse using HTML, CSS, and JS
- Dad Jokes Project using HTML, CSS, and JS
- Responsive Login Form using HTML and CSS 3
- Split Landing Page Using HTML, CSS, and JS
Daily Drink Water Goal Project Using HTML CSS & Javascript [Source code]
To create a Responsive Increment Counter Using HTML CSS & Javascript.At first, you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.
At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.
<!DOCTYPE html>
<!--Codingthai.com-->
<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>
</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="script.js"></script>
</body>
</html>
After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
:root {
--border-color: #144fc6;
--fill-color: #6ab3f8;
}
* {
box-sizing: border-box;
}
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 0;
}
.cup {
background-color: #fff;
border: 4px solid var(--border-color);
color: var(--border-color);
border-radius: 0 0 40px 40px;
height: 330px;
width: 150px;
margin: 30px 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cup.cup-small {
height: 95px;
width: 50px;
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: 5px;
transition: 0.3s ease;
}
.cup.cup-small.full {
background-color: var(--fill-color);
color: #fff;
}
.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: 30px;
height: 0;
transition: 0.3s ease;
}
.text {
text-align: center;
margin: 0 0 5px;
}
At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.
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 (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')
} 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 * 330}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`
}
}
That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me
1 thought on “Daily Drink Water Goal Project Using HTML CSS & Javascript”