diff --git a/drink-water/index.html b/drink-water/index.html new file mode 100644 index 0000000..ca934e1 --- /dev/null +++ b/drink-water/index.html @@ -0,0 +1,37 @@ + + + + + + + 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
+
+ + + + diff --git a/drink-water/script.js b/drink-water/script.js new file mode 100644 index 0000000..15fa0b3 --- /dev/null +++ b/drink-water/script.js @@ -0,0 +1,48 @@ +const smallCups = document.querySelectorAll('.cup-small') +const listers = 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' + listers.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 0000000..f4580ab --- /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 { + 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; +}