drinking water animation added

drink-water/script.js

@@ -1,7 +1,7 @@
-const smallCups = document.querySelectorAll('.cup-small')
-const liters = document.getElementById('liters')
-const percentage = document.getElementById('percentage')
-const remained = document.getElementById('remained')
+var smallCups = document.querySelectorAll('.cup-small')
+var liters = document.getElementById('liters')
+var percentage = document.getElementById('percentage')
+var remained = document.getElementById('remained')
 
 updateBigCup()
 
@@ -27,8 +27,8 @@ function highlightCups(idx) {
 }
 
 function updateBigCup() {
-    const fullCups = document.querySelectorAll('.cup-small.full').length
-    const totalCups = smallCups.length
+    var fullCups = document.querySelectorAll('.cup-small.full').length
+    var totalCups = smallCups.length
 
     if(fullCups === 0) {
         percentage.style.visibility = 'hidden'

drink-water/style.css

@@ -85,6 +85,7 @@ h3 {
 
 .remained small {
   font-size: 12px;
+
 }
 
 .percentage {
@@ -95,10 +96,61 @@ h3 {
   font-weight: bold;
   font-size: 30px;
   height: 0;
+  position: relative;
   transition: 0.3s ease;
 }
 
+.percentage::after {
+  content: '';
+  height: 10px;
+  width: 40px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-30%) translateX(-30%);
+  border-top-right-radius: 30px;
+  border-top-left-radius: 20px;
+  background-color: #6ab3f8;
+  animation: water 5s linear infinite;
+}
+
+.percentage::before {
+  content: '';
+  height: 10px;
+  width: 40px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-30%) translateX(90%);
+  border-top-right-radius: 30px;
+  border-top-left-radius: 20px;
+  background-color: #6ab3f8;
+  animation: water-s 5s linear infinite;
+}
+
+@keyframes water-s {
+  0% {
+    transform: translateX(90%) translateY(-30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(-100%) translateY(-30%);
+  }
+}
+
+@keyframes water {
+  0% {
+    transform: translateX(-30%) translateY(-30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(330%) translateY(-30%);
+  }
+}
+
 .text {
   text-align: center;
   margin: 0 0 5px;
-}
+}