Add functionality to blur background when form pops open.

corysanders3 · Feb 23, 2024 · ea258cb · ea258cb
1 parent 8eb10df
commit ea258cb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -92,7 +92,7 @@ <h1 id="dateHydrationTitle"></h1>
                 <canvas id="waterMeter"></canvas>
               </div>
             </section>
-            <img class="icon" id="hydrationIcon" src="./images/hydration-icon.svg" alt="water icon">
+            <img class="icon" id="hydrationIcon" src="./images/hydration-icon.svg" alt="water icon"/>
         </div>
       </section>
     </section>

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -154,6 +154,7 @@ section,
 #hydrationIcon {
   right: 0%;
   top: 10%;
+  filter: none;
 }
 
 #info,
@@ -318,10 +319,19 @@ button {
 
 .pop-up-form{
   display: none;
+  width:100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  backdrop-filter: blur(6px);
+}
+
+#hydrationForm {
   position: absolute;
-  width:500px;
-  left:40%;
-  top:15%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 #hydrationForm input[type=date], #hydrationForm input[type=number]{

diff --git a/src/domUpdates.js b/src/domUpdates.js
@@ -43,6 +43,7 @@ const dateInput = document.querySelector('#dateInput');
 const ozInput = document.querySelector("#ozInput");
 const submitButton = document.querySelector('.formBtn')
 const formError = document.querySelector('.form-error')
+const hydrationIcon = document.querySelector('#hydrationIcon')
 let user, hydration, sleep, today, flOzDays, userSleepInfo, sleepDay;
 let createdWaterMeter = new CircularFluidMeter(waterMeter, {
   borderWidth: 15,
@@ -83,7 +84,7 @@ dayButtons.addEventListener("click", (event) => {
 });
 
 submitButton.addEventListener("click", () => {
-  if(ozInput.value.trim().length > 0 && dateInput.value.length > 0) {
+  if(ozInput.value.length > 0 && dateInput.value.length > 0) {
     closeForm();
     let date = dateInput.value.split("-").join("/");
     postHydrationData(date, ozInput.value, user.id);
@@ -220,10 +221,11 @@ function updateButtonsDate(dates) {
 
 function openForm() {
   popUpForm.style.display = 'block';
+  hydrationIcon.style.filter = 'blur(6px)'
 }
 
 function closeForm() {
-  event.preventDefault()
   popUpForm.style.display = 'none'
+  hydrationIcon.style.filter = 'none'
   sessionStorage.setItem("user", user.id);
 }