Merge pull request #1 from corysanders3/accessibility

Clean up code and fix accessibility issues.
corysanders3 · Mar 6, 2024 · b6bb752 · b6bb752
2 parents 3674c07 + be5b4d9
commit b6bb752
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 48 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>Fitlit</title>
@@ -12,7 +12,6 @@
   </head>
   <body>
     <section class="main">
-
       <nav id="days">
         <button class="day-selector" id="0"></button>
         <button class="day-selector" id="1"></button>
@@ -23,11 +22,9 @@
         <button class="day-selector" id="6"></button>
         <button class="day-selector" id="7"></button>
       </nav>
-
       <section class="drag-and-drop-hint">
         <p class="drag-and-drop-label">Drag and Drop to Rearrange Widgets</p>
       </section>
-
       <section class="widget-area">
         <section class="info-area container" id="infoArea">
           <div class="widget draggable" id="infoCard" draggable="true">
@@ -40,7 +37,7 @@ <h1 id="friendsHeader">Friends</h1>
         <section class="sleep-area container" id="sleepArea">
           <div class="sleep-widget-pair draggable" id="sleepSection" draggable="true">
             <div class="widget" id="sleepAveragesWidget">
-              <h1 id="averageSleepTitle"></h1>
+              <h1 id="averageSleepTitle">Average Sleep Stats</h1>
               <section class="sleep-titles">
                 <h2>Avg Hours Slept</h2>
                 <h2>Avg Sleep Quality</h2>
@@ -74,27 +71,7 @@ <h2>Sleep Quality</h2>
         <section class="hydration-area container" id="hydrationArea">
           <div class="widget draggable" id="hydrationWidget" draggable="true">
             <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>
+            <p class="pop-up-error"></p>
             <section class="visual-label" id="hydrationBottleLabel">
               <h1 id="dateHydrationTitle"></h1>
             </section>
@@ -104,8 +81,21 @@ <h1 id="dateHydrationTitle"></h1>
               </div>
             </section>
           </div>
+          <div class="pop-up-form">
+            <form class="widget" id="hydrationForm">
+              <h2 class="hydration-form">Add Hydration!</h2>
+              <p class="form-error"></p>
+              <label for="dateInput">Date</label>
+              <input type="date" name="dateInput" id="dateInput">
+              <label for="ozDrank">Oz Drank</label>
+              <input type="number" name="ozDrank" id="ozDrank" min="0" max="100">
+              <aside>
+                <button type="submit" class="formBtn">Add</button>
+                <button class="closeBtn">Close</button>
+              </aside>
+            </form>
+          </div>
         </section>
-
         <img
           class="drag-drop-icon"
           id="dragAndDrop1"
@@ -118,7 +108,6 @@ <h1 id="dateHydrationTitle"></h1>
           src="./images/drag-drop-icon.svg"
           alt="drag and drop icon"
         />
-
       </section>
     </section>
     <script src="bundle.js"></script>

diff --git a/src/apiCalls.js b/src/apiCalls.js
@@ -31,7 +31,7 @@ function postHydrationData(date, numOunces, userID) {
     }
     return response.json();
   })
-  .then(data => console.log(data))
+  .then(data => data)
   .catch(error => popUpError.innerText = error.message)
 }
 

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -136,9 +136,8 @@ section,
 }
 
 #friends {
-  width: 40%;
-  overflow-y: auto;
-  overflow: scroll;
+  width: 90%;
+  overflow: auto;
   border-top: 4px solid white;
 }
 
@@ -285,8 +284,8 @@ button {
 .input-hydration{
   height: 5%;
   width: 40%;
-  background:white;
-  color: #2ac3ff;
+  background: #48494B;
+  color: #fff;
   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);
@@ -349,10 +348,11 @@ button {
   color: red;
   font-weight: 900;
   text-align: center;
+  margin: 0px;
 }
 
 .hydration-form {
-  margin-bottom: -10%;
+  margin-bottom: 0px;
 }
 
 .formBtn{

diff --git a/src/domUpdates.js b/src/domUpdates.js
@@ -43,11 +43,10 @@ const sleepQualityMeterAvg = document.querySelector(
 );
 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 ozInput = document.querySelector("#ozDrank");
 const submitButton = document.querySelector(".formBtn");
 const formError = document.querySelector(".form-error");
 const draggables = document.querySelectorAll(".draggable");
@@ -184,12 +183,12 @@ function getUserIndex(usersData) {
 
 function updateUserInfo(avgStep) {
   info.innerHTML = `<h1 id="name">Welcome: ${user.name}</h1>
-  <h3 id="userID">ID: ${user.id} </h3>
-  <h3 id="address">Address: ${user.address} </h3>
-  <h3 id="emailAddress">Email: ${user.email} </h3>
-  <h3 id="strideLength">Stride Length: ${user.strideLength}</h3>
-  <h3 id="stepGoal">My Step Goal: ${user.dailyStepGoal} steps</h3>
-  <h3 id="comparedStepGoal"> Avg Step Goal: ${avgStep} steps`;
+  <h2 id="userID">ID: ${user.id} </h2>
+  <h2 id="address">Address: ${user.address} </h2>
+  <h2 id="emailAddress">Email: ${user.email} </h2>
+  <h2 id="strideLength">Stride Length: ${user.strideLength}</h2>
+  <h2 id="stepGoal">My Step Goal: ${user.dailyStepGoal} steps</h2>
+  <h2 id="comparedStepGoal"> Avg Step Goal: ${avgStep} steps</h2>`;
   updateFriendsList(user.friends);
   updateHydration(user, today);
 }
@@ -200,8 +199,8 @@ function updateFriendsList(friends) {
     friendsList.insertAdjacentHTML(
       "beforeend",
       `<aside>
-        <h3>${friend.name}</h3>
-        <h3>Step Goal: ${friend.dailyStepGoal}</h3>
+        <h2>${friend.name}</h2>
+        <h2>Step Goal: ${friend.dailyStepGoal}</h2>
       </aside>`
     );
   });
@@ -213,21 +212,21 @@ function updateHydration(user, day = 0) {
     hydration.hydrationData,
     flOzDays[day].date
   );
-  userHydrationDate.innerHTML = `<h1>Water Consumption</h1><h3>${userHydration.date}</h3>`;
+  userHydrationDate.innerHTML = `<h1>Water Consumption</h1><h2>${userHydration.date}</h2>`;
   createdWaterMeter.progress = userHydration.numOunces;
 }
 
 function updateHoursSlept(user, day) {
   if (!userSleepInfo[day]) {
-    userSleepTitle.innerHTML = `<h1>Daily Sleep Stats</h1><h3>No Sleep Data For ${flOzDays[day].date}</h3>`;
+    userSleepTitle.innerHTML = `<h1>Daily Sleep Stats</h1><h2>No Sleep Data For ${flOzDays[day].date}</h2>`;
     sleepProgressBar(0, sleepHours, sleepHoursMeter, 12);
   } else {
     const userSleepHours = getHoursSlept(
       user.id,
       sleep,
       userSleepInfo[day].date
     );
-    userSleepTitle.innerHTML = `<h1>Daily Sleep Stats</h1><h3>${userSleepInfo[day].date}</h3>`;
+    userSleepTitle.innerHTML = `<h1>Daily Sleep Stats</h1><h2>${userSleepInfo[day].date}</h2>`;
     sleepProgressBar(userSleepHours, sleepHours, sleepHoursMeter, 12);
   }
 }