Add functionality for the user to add in hydration data.

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

Hide file tree

Showing 4 changed files with 218 additions and 45 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -68,6 +68,22 @@ <h2>Sleep Quality</h2>
         </section>
         <section class="hydration-area">
           <div class="widget" id="hydrationWidget">
+            <button class="input-hydration">Add Hydration</button>
+            <h3 class="pop-up-error"></h3>
+            <div class="pop-up-form"> 
+              <form class="widget" id ="hydrationForm">
+                <h2 class="hydration-form">Add Hydration!</h2>
+                <h3 class="form-error"></h3>
+                <label for = "dateInput">Date</label>
+                <input type ="date" name ="dateInput" id="dateInput"/>
+                <label for="waterInput">Oz Drank</label>
+                <input type ="number" name ="waterInput" min ="0" max ="100" id="ozInput"/>
+                <aside> 
+                  <button type="submit" class ="formBtn">Add</button>
+                  <button class="closeBtn">Close</button>
+                </aside>
+              </form>
+            </div>
             <section class="visual-label" id="hydrationBottleLabel">
               <h1 id="dateHydrationTitle"></h1>
             </section>

diff --git a/src/apiCalls.js b/src/apiCalls.js
@@ -1,18 +1,38 @@
 function fetchUserData(usersData) {
-  return fetch("https://fitlit-api.herokuapp.com/api/v1/users")
+  return fetch("http://localhost:3001/api/v1/users")
     .then((response) => response.json())
     .then((data) => (usersData = data));
 }
 function fetchHydrationData(hydration) {
-  return fetch("https://fitlit-api.herokuapp.com/api/v1/hydration")
+  return fetch("http://localhost:3001/api/v1/hydration")
     .then((repsonse) => repsonse.json())
     .then((data) => (hydration = data));
 }
 
 function fetchSleepData(sleep) {
-  return fetch("https://fitlit-api.herokuapp.com/api/v1/sleep")
+  return fetch("http://localhost:3001/api/v1/sleep")
     .then((repsonse) => repsonse.json())
     .then((data) => (sleep = data));
 }
 
-export { fetchHydrationData, fetchUserData, fetchSleepData};
+function postHydrationData(date, numOunces, userID) {
+  fetch("http://localhost:3001/api/v1/hydration", {
+    method: 'POST',
+    body: JSON.stringify({
+      date,
+      numOunces,
+      userID
+    }),
+    headers: { 'Content-Type': 'application/json' }
+  })
+  .then(response => {
+    if(!response.ok) {
+      throw new Error("There was an issue adding your hydration details. Please try again later.")
+    }
+    return response.json();
+  })
+  .then(data => console.log(data))
+  .catch(error => popUpError.innerText = error.message)
+}
+
+export { fetchHydrationData, fetchUserData, fetchSleepData, postHydrationData };
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -224,7 +224,8 @@ h3 {
   height: 40px;
 }
 
-.day-selector {
+.day-selector,
+.input-hydration {
   height: 80%;
   width: 10%;
   border: none;
@@ -290,5 +291,84 @@ button {
   margin-top: -2%;
 }
 
+.input-hydration{
+  position:absolute;
+  top:11%;
+  left:73%;
+  height:40px;
+  background:white;
+  color: #2ac3ff;
+  font-weight:500;
+  box-shadow: 5px 5px 12px -1px rgba(0, 0, 0, 0.61),
+    -5px 5px 15px -1px rgba(0, 0, 0, 0.61);
+  cursor: pointer;
+}
+
+#hydrationForm {
+  background-color: #2ac3ff;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height:400px;
+  width:250px;
+  box-shadow: 5px 5px 12px -1px rgba(0, 0, 0, 0.61),
+    -5px 5px 15px -1px rgba(0, 0, 0, 0.61);
+}
 
+.pop-up-form{
+  display: none;
+  position: absolute;
+  width:500px;
+  left:40%;
+  top:15%;
+}
+
+#hydrationForm input[type=date], #hydrationForm input[type=number]{
+  background:white;
+  width:50%;
+  height:30px;
+}
+
+#hydrationForm button {
+  border-radius: 10%;
+  width:100px;
+  height:50px;
+  border:none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+#hydrationForm aside {
+  display:flex;
+  justify-content: space-around;
+  width:100%;
+  align-items: center;
+}
+
+.closeBtn {
+  background-color:red;
+  color: #fff;
+}
+
+.form-error {
+  color: red;
+  font-weight: 900;
+  text-align: center;
+}
+
+.hydration-form {
+  margin-bottom: -10%;
+}
+
+.formBtn{
+  background-color:white;
+}
+
+label{
+  font-weight:700;
+}
 
+.blur {
+  filter: blur(4px);
+}
diff --git a/src/domUpdates.js b/src/domUpdates.js
@@ -3,7 +3,7 @@ import "./images/user-icon.svg";
 import "./images/sleep-icon.svg";
 import "./images/hydration-icon.svg";
 import "./images/friends-icon.svg";
-import { fetchHydrationData, fetchUserData, fetchSleepData } from "./apiCalls";
+import { fetchHydrationData, fetchUserData, fetchSleepData, postHydrationData } from "./apiCalls";
 import { CircularFluidMeter } from "fluid-meter";
 import { getUserData, getAverageSteps } from "./users";
 import {
@@ -33,33 +33,17 @@ const userSleepTitle = document.querySelector("#dateSleepTitle");
 const sleepAverageTitle = document.querySelector("#averageSleepTitle");
 const sleepHoursMeterAvg = document.querySelector("#sleepHoursMeterAverage");
 const sleepHoursAvg = document.querySelector("#sleepHoursAverage");
-const sleepQualityMeterAvg = document.querySelector(
-  "#sleepQualityMeterAverage"
-);
+const sleepQualityMeterAvg = document.querySelector("#sleepQualityMeterAverage");
 const sleepQualityAvg = document.querySelector("#sleepQualityAverage");
-
+const addHydrationButton = document.querySelector('.input-hydration');
+const popUpError = document.querySelector('.pop-up-error')
+const popUpForm = document.querySelector('.pop-up-form')
+const closeFormButton = document.querySelector('.closeBtn')
+const dateInput = document.querySelector('#dateInput');
+const ozInput = document.querySelector("#ozInput");
+const submitButton = document.querySelector('.formBtn')
+const formError = document.querySelector('.form-error')
 let user, hydration, sleep, today, flOzDays, userSleepInfo, sleepDay;
-
-Promise.all([fetchHydrationData(), fetchUserData(), fetchSleepData()]).then(
-  ([hydrationFetch, usersData, sleepFetch]) => {
-    sleep = sleepFetch;
-    hydration = hydrationFetch;
-    const randomIndex =
-      Math.floor(Math.random() * (usersData.users.length - 1)) + 1;
-    user = getUserData(randomIndex, usersData.users);
-    let avgStep = getAverageSteps(usersData.users);
-    flOzDays = getFluidOunceForWeek(user.id, hydration.hydrationData);
-    today = flOzDays.length - 1;
-    userSleepInfo = getHoursSleptWeek(user.id, sleep);
-    sleepDay = userSleepInfo.length - 1;
-    updateButtonsDate(flOzDays);
-    updateUserInfo(avgStep);
-    updateHoursSlept(user, sleepDay);
-    updateSleepQuality(user, sleepDay);
-    updateSleepAverages(user);
-  }
-);
-
 let createdWaterMeter = new CircularFluidMeter(waterMeter, {
   borderWidth: 15,
   maxProgress: 100,
@@ -77,6 +61,83 @@ let createdWaterMeter = new CircularFluidMeter(waterMeter, {
   },
 });
 
+window.addEventListener("load", function() {
+  if(!user){
+    updatePage();
+  }else{
+    updatePage(user.id);
+  }
+});
+
+dayButtons.addEventListener("click", (event) => {
+  let button = event.target.closest("button");
+
+  if (!flOzDays[today - Number(button.id)]) {
+    userHydrationDate.innerHTML = `<h1>No Data to Display...</h1>`;
+    createdWaterMeter.progress = 0;
+  } else {
+    updateHydration(user, today - Number(button.id));
+    updateHoursSlept(user, sleepDay - Number(button.id));
+    updateSleepQuality(user, sleepDay - Number(button.id));
+  }
+});
+
+submitButton.addEventListener("click", () => {
+  if(ozInput.value.trim().length > 0 && dateInput.value.length > 0) {
+    closeForm();
+    let date = dateInput.value.split("-").join("/");
+    postHydrationData(date, ozInput.value, user.id);
+  } else if(ozInput.value.trim().length === 0 && dateInput.value.length > 0) {
+    event.preventDefault()
+    formError.innerText = 'Please enter Oz Drank...'
+  } else if(ozInput.value.trim().length > 0 && dateInput.value.length === 0){
+    event.preventDefault()
+    formError.innerText = 'Please select a date...'
+  } else {
+    event.preventDefault()
+    formError.innerText = 'You need to select a date and enter Oz Drank!'
+  }
+});
+
+addHydrationButton.addEventListener("click", openForm);
+
+closeFormButton.addEventListener("click", closeForm);
+
+function updatePage(){
+  Promise.all([fetchHydrationData(), fetchUserData(), fetchSleepData()]).then(
+    ([hydrationFetch, usersData, sleepFetch]) => {
+      sleep = sleepFetch;
+      hydration = hydrationFetch;
+      let avgStep = getAverageSteps(usersData.users);
+      user = userGrabber(usersData);
+      flOzDays = getFluidOunceForWeek(user.id, hydration.hydrationData);
+      today = flOzDays.length - 1;
+      userSleepInfo = getHoursSleptWeek(user.id, sleep);
+      sleepDay = userSleepInfo.length - 1;
+      updateButtonsDate(flOzDays);
+      updateUserInfo(avgStep);
+      updateHoursSlept(user, sleepDay);
+      updateSleepQuality(user, sleepDay);
+      updateSleepAverages(user);
+    }
+  );
+}
+
+function userGrabber(usersData) {
+  let index
+    if(sessionStorage.getItem("user")){
+      index = parseInt(sessionStorage.getItem("user"));
+    }else{
+    index = getUserIndex(usersData);
+    }
+    let currentUser = getUserData(index, usersData.users);
+    return currentUser;
+}
+
+function getUserIndex(usersData) {
+  return Math.floor(Math.random() * (usersData.users.length - 1)) + 1;
+}
+
 function updateUserInfo(avgStep) {
   info.innerHTML = `<h1 id="name">Welcome: ${user.name}</h1>
   <h3 id="userID">ID: ${user.id} </h3>
@@ -90,6 +151,7 @@ function updateUserInfo(avgStep) {
 }
 
 function updateFriendsList(friends) {
+  friendsList.innerHTML = '<h1 id="friendsHeader">Friends</h1>';
   friends.forEach((friend) => {
     friendsList.insertAdjacentHTML(
       "beforeend",
@@ -111,19 +173,6 @@ function updateHydration(user, day = 0) {
   createdWaterMeter.progress = userHydration.numOunces;
 }
 
-dayButtons.addEventListener("click", (event) => {
-  let button = event.target.closest("button");
-
-  if (!flOzDays[today - Number(button.id)]) {
-    userHydrationDate.innerHTML = `<h1>No Data to Display...</h1>`;
-    createdWaterMeter.progress = 0;
-  } else {
-    updateHydration(user, today - Number(button.id));
-    updateHoursSlept(user, sleepDay - Number(button.id));
-    updateSleepQuality(user, sleepDay - Number(button.id));
-  }
-});
-
 function updateHoursSlept(user, day) {
   const userSleepHours = getHoursSlept(user.id, sleep, userSleepInfo[day].date);
   userSleepTitle.innerHTML = `<h1>Daily Sleep Stats</h1><h3>${userSleepInfo[day].date}</h3>`;
@@ -169,4 +218,12 @@ function updateButtonsDate(dates) {
   });
 }
 
-// export { updateUserInfo, updateFriendsList, updateHydration };
+function openForm() {
+  popUpForm.style.display = 'block';
+}
+
+function closeForm() {
+  event.preventDefault()
+  popUpForm.style.display = 'none'
+  sessionStorage.setItem("user", user.id);
+}