Water Tracker

Developer
Mikita
Size
6,055 Kb
Views
6,072
  1. Water Tracker Previews
  2. Water Tracker HTML Codes
  3. Water Tracker CSS Codes
  4. Water Tracker JS Codes

How do I make an water tracker?

Implementation of the concept: https://dribbble.com/shots/2396543-Water-Tracker. What is a water tracker? How do you make a water tracker? This script and codes were developed by Mikita on 18 January 2023, Wednesday.

Water Tracker Previews
IQ Test

Water Tracker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Water Tracker</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none"> <symbol id="wave"> <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path> <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path> <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path> <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path> </symbol>
</svg>
<div class="page" id="page"> <div class="tracker"> <div class="tracker__inner" id="tracker"> <div class="tracker__item">12:08</div> <div class="tracker__item">15:10</div> <div class="tracker__item tracker__item_active">16:58</div> </div> </div> <div class="percent"> <div class="percent__inner"> <div class="percent__num" id="count">50</div> <div class="percent__sign">%</div> </div> </div> <button class="button" id="button">Drink</button> <div class="water" id="water"> <svg class="water__wave water__wave_back" viewBox="0 0 560 20"> <use xlink:href="#wave"></use> </svg> <svg class="water__wave water__wave_front" viewBox="0 0 560 20"> <use xlink:href="#wave"></use> </svg> <div class="water__inner"> <div class="bubble bubble_1"></div> <div class="bubble bubble_2"></div> <div class="bubble bubble_3"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Water Tracker - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; outline: none;
}
body { background: #f0f6fc; font: 14px/1 'Open Sans', helvetica, sans-serif; -webkit-font-smoothing: antialiased;
}
.page { height: 480px; width: 280px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #1e384c; border-radius: 6px; overflow: hidden;
}
.page_animated .button:before { -webkit-animation: button-shadow .25s; animation: button-shadow .25s;
}
.page_animated .bubble_1 { -webkit-animation: bubble-1 .75s linear -.3s; animation: bubble-1 .75s linear -.3s;
}
.page_animated .bubble_2 { -webkit-animation: bubble-2 .75s linear; animation: bubble-2 .75s linear;
}
.page_animated .bubble_3 { -webkit-animation: bubble-3 .75s linear; animation: bubble-3 .75s linear;
}
.button { z-index: 15; position: absolute; width: 50%; bottom: 8%; left: 25%; color: #fff; border: 2px solid #fff; border-radius: 1.5rem; text-align: center; text-transform: uppercase; font-size: 1.2rem; padding: .7rem 0; background: none; font-weight: 600; cursor: pointer;
}
.button:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; border: inherit; border-radius: inherit;
}
.percent { color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-weight: lighter; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.percent__inner { display: inline-block;
}
.percent__num { display: inline-block; font-size: 6rem;
}
.percent__sign { display: inline-block; font-size: 4rem;
}
.water { position: absolute; height: 100%; width: 100%; z-index: 5; bottom: 0; left: 0; background: #32bafa; -webkit-transform: translate(0, 50%); transform: translate(0, 50%);
}
.water__inner { position: absolute; width: 100%; height: 50%; top: 0; left: 0; overflow: hidden;
}
.water__wave { width: 200%; position: absolute; bottom: 100%;
}
.water__wave_back { right: 0; fill: #2c7fbe; -webkit-animation: wave-back 1.4s infinite linear; animation: wave-back 1.4s infinite linear;
}
.water__wave_front { left: 0; fill: #32bafa; margin-bottom: -1px; -webkit-animation: wave-front .7s infinite linear; animation: wave-front .7s infinite linear;
}
.bubble { position: absolute; bottom: 80px; left: 50%; width: 20px; height: 20px; margin-left: -10px; background: #fff; border-radius: 50%; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); opacity: 0;
}
.bubble_2 { margin-left: -20px;
}
@-webkit-keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}
@keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}
@-webkit-keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
}
@keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
}
@-webkit-keyframes button-shadow { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); }
}
@keyframes button-shadow { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); }
}
@-webkit-keyframes bubble-1 { 0% { opacity: 1; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); } 25% { -webkit-transform: scale(.25) translate(20px, -25px); transform: scale(.25) translate(20px, -25px); } 50% { -webkit-transform: scale(.5) translate(40px, -50px); transform: scale(.5) translate(40px, -50px); } 75% { -webkit-transform: scale(.75) translate(20px, -75px); transform: scale(.75) translate(20px, -75px); } 100% { -webkit-transform: scale(1) translate(10px, -100px); transform: scale(1) translate(10px, -100px); }
}
@keyframes bubble-1 { 0% { opacity: 1; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); } 25% { -webkit-transform: scale(.25) translate(20px, -25px); transform: scale(.25) translate(20px, -25px); } 50% { -webkit-transform: scale(.5) translate(40px, -50px); transform: scale(.5) translate(40px, -50px); } 75% { -webkit-transform: scale(.75) translate(20px, -75px); transform: scale(.75) translate(20px, -75px); } 100% { -webkit-transform: scale(1) translate(10px, -100px); transform: scale(1) translate(10px, -100px); }
}
.tracker { position: absolute; top: 10%; left: 0; width: 100%; color: #fff; text-align: center; height: 74px; overflow: hidden; z-index: 20;
}
.tracker__inner { -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.tracker__item { -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; font-size: 1.1rem; padding-bottom: 10px; opacity: .7;
}
.tracker__item_active { opacity: 1;
}
@-webkit-keyframes bubble-2 { 0% { opacity: 1; -webkit-transform: scale(0) translate(-20px, -10px); transform: scale(0) translate(-20px, -10px); } 25% { -webkit-transform: scale(.25) translate(-40px, -45px); transform: scale(.25) translate(-40px, -45px); } 50% { -webkit-transform: scale(.5) translate(-60px, -70px); transform: scale(.5) translate(-60px, -70px); } 75% { -webkit-transform: scale(.75) translate(-40px, -95px); transform: scale(.75) translate(-40px, -95px); } 100% { -webkit-transform: scale(1) translate(-30px, -100px); transform: scale(1) translate(-30px, -100px); }
}
@keyframes bubble-2 { 0% { opacity: 1; -webkit-transform: scale(0) translate(-20px, -10px); transform: scale(0) translate(-20px, -10px); } 25% { -webkit-transform: scale(.25) translate(-40px, -45px); transform: scale(.25) translate(-40px, -45px); } 50% { -webkit-transform: scale(.5) translate(-60px, -70px); transform: scale(.5) translate(-60px, -70px); } 75% { -webkit-transform: scale(.75) translate(-40px, -95px); transform: scale(.75) translate(-40px, -95px); } 100% { -webkit-transform: scale(1) translate(-30px, -100px); transform: scale(1) translate(-30px, -100px); }
}
@-webkit-keyframes bubble-3 { 0% { opacity: 1; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); } 25% { -webkit-transform: scale(.25) translate(0, -20px); transform: scale(.25) translate(0, -20px); } 50% { -webkit-transform: scale(.5) translate(-10px, -40px); transform: scale(.5) translate(-10px, -40px); } 75% { -webkit-transform: scale(.75) translate(10px, -60px); transform: scale(.75) translate(10px, -60px); } 100% { -webkit-transform: scale(1) translate(0, -100px); transform: scale(1) translate(0, -100px); }
}
@keyframes bubble-3 { 0% { opacity: 1; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); } 25% { -webkit-transform: scale(.25) translate(0, -20px); transform: scale(.25) translate(0, -20px); } 50% { -webkit-transform: scale(.5) translate(-10px, -40px); transform: scale(.5) translate(-10px, -40px); } 75% { -webkit-transform: scale(.75) translate(10px, -60px); transform: scale(.75) translate(10px, -60px); } 100% { -webkit-transform: scale(1) translate(0, -100px); transform: scale(1) translate(0, -100px); }
}

Water Tracker - Script Codes JS Codes

var btn = document.getElementById('button'), tracker = document.getElementById('tracker'), trackerOffset = 0, page = document.getElementById('page'), water = document.getElementById('water'), cnt = document.getElementById('count'), percent = cnt.innerHTML, random, diff, interval, isInProgress;
btn.addEventListener('click', update);
function update() { if (isInProgress) return; btn.removeEventListener('click', update); isInProgress = true; page.classList.add('page_animated'); setTimeout(function(){ page.classList.remove('page_animated'); }, 1000); rotateTracker(); random = parseInt(Math.random() * 100); diff = percent - random; random = Math.abs(random); interval = setInterval(function(){ if (diff === 0 || percent === random) { btn.addEventListener('click', update); clearInterval(interval); isInProgress = false; return; } if (diff < 0) { percent++; } else { percent--; } cnt.innerHTML = percent; water.style.transform = 'translate(0, ' + (100 - percent) + '%)'; water.querySelector('.water__inner').style.height = percent + '%'; isInProgress = false; }, 16);
}
function getTime() { var time = new Date(Math.random() * 1000000000000), hours = time.getHours(), minutes = time.getMinutes(); if (hours < 10) hours = '0' + hours if (minutes < 10) minutes = '0' + minutes time = hours + ':' + minutes; return time;
}
function rotateTracker() { var time = getTime(), firstElem = tracker.firstElementChild, computedStyle = getComputedStyle(firstElem), step = computedStyle.height, node = document.createElement('div'); node.className = 'tracker__item tracker__item_active'; node.innerHTML = time; tracker.querySelector('.tracker__item_active').className = 'tracker__item'; trackerOffset = trackerOffset - parseInt(step); console.log(trackerOffset); tracker.style.transform = 'translate( 0, ' + trackerOffset + 'px)'; tracker.appendChild(node);
}
Water Tracker - Script Codes
Water Tracker - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 18, 2023
Rating 4.5
Size 6,055 Kb
Views 6,072
Do you need developer help for Water Tracker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikita (MikitaLisavets) Script Codes
Name
Blur
Particle system
Snap scroll
Target scroll callback
Share Dropdown
Spin menu
Graph
Tree search
Note scales
Hamburger Menu
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!