couldntfindabetterusername
4 years ago
parent
6b99d650a0
commit
c389ad397e
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>16 drink water</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="outer-head">Drink Water</h1>
|
||||
<h3 class="outer-subhead">Goal is 2 litres</h3>
|
||||
<div class="glass glass-big" id="glass-big">
|
||||
<div class="empty-big">
|
||||
<h3 class="blue-text">2L</h3>
|
||||
<h5 class="blue-text">remaining</h5>
|
||||
</div>
|
||||
|
||||
<div class="full-big">
|
||||
<h1 class="blue-text">0%</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h4>Select how many glasses of water have you drank</h4>
|
||||
<div id="glasses-wrapper">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
const wrapper = document.getElementById("glasses-wrapper");
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const span = document.createElement("span");
|
||||
span.classList.add("glass-small-text");
|
||||
|
||||
const text = document.createTextNode("250 ml");
|
||||
span.appendChild(text);
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("glass");
|
||||
div.classList.add("glass-small");
|
||||
div.id = i;
|
||||
div.appendChild(span);
|
||||
|
||||
div.addEventListener("click", () => clickHandler(div));
|
||||
wrapper.appendChild(div);
|
||||
}
|
||||
|
||||
function clickHandler(div) {
|
||||
const id = +div.id;
|
||||
|
||||
bigGlassHandler(id + 1);
|
||||
smallGlassHandler(id);
|
||||
}
|
||||
|
||||
function bigGlassHandler(id) {
|
||||
const glass = document.getElementById("glass-big");
|
||||
glass.children[0].innerHTML = "";
|
||||
glass.children[1].innerHTML = "";
|
||||
|
||||
glass.children[0].style.height = `${100 - id * (100 / 8)}%`;
|
||||
glass.children[0].innerHTML = `<h3 class="blue-text">${2 - (2 / 8) * id}L</h3>
|
||||
<h5 class="blue-text">remaining</h5>`;
|
||||
|
||||
if (id === 8) {
|
||||
glass.children[0].innerHTML = "";
|
||||
}
|
||||
glass.children[1].style.height = `${id * (100 / 8)}%`;
|
||||
glass.children[1].style.opacity = "1";
|
||||
glass.children[1].innerHtml = `${id * (100 / 8)}%`;
|
||||
console.log(glass.children, id);
|
||||
}
|
||||
|
||||
function smallGlassHandler(id) {
|
||||
const smallGlasses = document.querySelectorAll(".glass-small");
|
||||
|
||||
for (let i = 0; i < smallGlasses.length; i++) {
|
||||
smallGlasses[i].classList.remove("active");
|
||||
}
|
||||
for (let i = 0; i < id + 1; i++) {
|
||||
smallGlasses[i].classList.add("active");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: cornflowerblue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.outer-head {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.outer-subhead {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.glass {
|
||||
border: 5px solid rgb(21, 46, 126);
|
||||
border-radius: 0 0 40px 40px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-big {
|
||||
width: 150px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.empty-big,
|
||||
.full-big {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: height 0.2s linear;
|
||||
}
|
||||
|
||||
.empty-big {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.full-big {
|
||||
height: 0%;
|
||||
background-color: rgb(110, 161, 255);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: rgb(21, 46, 126);
|
||||
}
|
||||
|
||||
h3.blue-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#glasses-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.glass-small {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
background-color: #fff;
|
||||
color: rgb(21, 46, 126);
|
||||
transition: background-color 0.2s linear, color 0.2s linear;
|
||||
}
|
||||
|
||||
.glass-small.active {
|
||||
background-color: rgb(110, 161, 255);
|
||||
color: #fff;
|
||||
}
|
||||
Loading…
Reference in new issue