diff --git a/my code/16-drink-water/index.html b/my code/16-drink-water/index.html new file mode 100644 index 0000000..7bca997 --- /dev/null +++ b/my code/16-drink-water/index.html @@ -0,0 +1,38 @@ + + + + + + + + 16 drink water + + + + + + +

Drink Water

+

Goal is 2 litres

+
+
+

2L

+
remaining
+
+ +
+

0%

+
+
+ +
+

Select how many glasses of water have you drank

+
+ +
+
+ + + + + \ No newline at end of file diff --git a/my code/16-drink-water/script.js b/my code/16-drink-water/script.js new file mode 100644 index 0000000..a2fd90a --- /dev/null +++ b/my code/16-drink-water/script.js @@ -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 = `

${2 - (2 / 8) * id}L

+
remaining
`; + + 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"); + } +} diff --git a/my code/16-drink-water/style.css b/my code/16-drink-water/style.css new file mode 100644 index 0000000..160ee6d --- /dev/null +++ b/my code/16-drink-water/style.css @@ -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; +}