diff --git a/drink water/index.html b/drink water/index.html new file mode 100644 index 00000000..0988427d --- /dev/null +++ b/drink water/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Drink Water + + +

Drink Water

+

Goal: 2 Liters

+ +
+
+ + Remained + +
+
+ +
+
+ +

Select how many glasses of water that you have drank

+ +
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
250 ml
+
+ + + + \ No newline at end of file diff --git a/drink water/script.js b/drink water/script.js new file mode 100644 index 00000000..fd64b42f --- /dev/null +++ b/drink water/script.js @@ -0,0 +1,52 @@ +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(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` + } +} \ No newline at end of file diff --git a/drink water/style.css b/drink water/style.css new file mode 100644 index 00000000..3708c3cc --- /dev/null +++ b/drink water/style.css @@ -0,0 +1,104 @@ +@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{ + font-family: 'Montserrat', sans-serif; + background-color: #3494e4; + color: #fff; + 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 { + width: 50px; + height: 95px; + 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; + width: 280px; + align-items: center; + justify-content: center; +} + +.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; + height: 0; + transition: 0.3s ease; + font-size: 30px; +} + +.text{ + text-align: center; + margin: 0 0 5px; +} \ No newline at end of file