Refactor/script.js

.github/pull_request_template.md

@@ -0,0 +1,38 @@
+## Checklist:
+
+Necessary checkmarks:
+
+   - [] All Tests are Passing
+
+Type of change
+
+   - [] New feature
+   - [] Bug Fix
+
+Implements/Fixes:
+
+    description closes #
+
+Check the correct boxes
+
+   - [] This broke nothing
+   - [] This broke some stuff
+   - [] This broke everything
+
+Testing Changes
+
+   - [] No Tests have been changed
+   - [] Some Tests have been changed
+   - [] All of the Tests have been changed(Please describe what in the world happened)
+
+Checklist:
+
+   - [] My code has no unused/commented out code
+   - [] I have reviewed my code
+   - [] I have commented my code, particularly in hard-to-understand areas
+   - [] I have fully tested my code
+   - [] I have added one or more people as "Reviewers" to review & merge
+
+(For Fun!)Please Include a link to a gif of your feelings about this branch
+
+Link:

README.md

@@ -1,78 +1,39 @@
-# FitLit Starter Kit
-
-The details of this project are outline in [this project spec](http://frontend.turing.io/projects/fitlit.html).
-
-## Setup
-
-1. Within your group, decide on one person to have the project repository (repo) on their GitHub account. Then, that person should fork this repo - on the top right corner of this page, click the **Fork** button.
-1. Both memebers of the group should clone down the _forked_ repo. Since you don't want to name your project "activity-tracker-starter", you can use an optional argument when you run git clone (you replace the [...] with the terminal command arguments): `git clone [remote-address] [what you want to name the repo]`
-1. Once you have cloned the repo, change into the directory and install the project dependencies. Run `npm install` to install project dependencies.
-1. Run `npm start` in the terminal to see the HTML page (you should see some boilerplate HTML displayed on the page).  `Control + C` is the command to stop running the local server.  Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems. This command is not specific to Webpack; make note of it for future use.   
-1. Make sure both members of your team are collaborators on the forked repo.  
-1. Do not run `npm audit fix --force`.  This will update to the latest version of packages.  We need to be using `[email protected]` which is not the latest version.  If you start to run into Webpack errors, first check that all group members are using the correct version.  
-
-## Testing
-
-There is no boilerplate for testing in this starter-kit repo. You will need to set this up yourself. However, if you ran `npm install`, then the tooling you need to start testing is already installed (`mocha` and `chai`).
-
-
-## Data Model
-
-**Users**
-
-```
-[
-  {
-    "id": [number],
-    "name": [string],
-    "address": [string],
-    "email": [string],
-    "strideLength": [number - feet],
-    "dailyStepGoal": [number - steps],
-    "friends": [array - one-way connection to other user(s)]
-  },
-  ...more user data
-]
-```
-
-**Activity**
-
-```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "numSteps": [number - steps],
-    "minutesActive": [number - minutes],
-    "flightsOfStairs": [number - flights]
-  },
-  ...more activity data
-]
-```
-
-**Hydration**
-
-```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "numOunces": [number - ounces]
-  },
-  ...more hydration data
-]
-```
-
-**Sleep**
-
-```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "hoursSlept": [number - hours],
-    "sleepQuality": [number - unitless]
-  },
-  ...more sleep data
-]
-```
+# FitLit 
+## Abstract
+
+Staying in shape can be difficult. With all the stresses of life, keeping track of basic health statistics such as step count, fluid intake, and sleep can easily get away from you. Fit Lit is a web application designed to help users stay on track! Fit lit takes step count, sleep quality and longevity, and water consumed, stores it using API's, and then that data in an easily readable, helpful display.
+
+## Context
+
+This project was completed during two 1 week sprints in the second module of the Turing Program. The first sprint focused on implementing Test Driven Development (TDD), building an understanding of using asynchronous JavaScript to retrieve data from RESTful API's, and using GitHub Projects to plan and execute remote group work. The second sprint focused primarily on implementing feedback and building extensions on an existing code base, POSTing data to a local API, and utilizing third party extensions to display user data.
+
+## Installation
+
+1. Fork and clone this repo.
+2. Type `cd fitlit` to move into the root directory.
+3. Run `npm install`
+4. Run `npm start`
+5. copy and paste the provided url into a new web page
+6. Fork and clone [the local API repo](https://github.com/turingschool-examples/fitlit-api)
+7. In a seperate terminal, CD into it
+8. Run npm install
+9. Run npm start, navigate to Local Host 8080
+10. To stop the local server from running in your terminal use command + c
+
+## FitLit at a glance
+![Giph of project](https://media0.giphy.com/media/skPpSh8M5vEO4zQGqG/giphy.gif)
+## Technologies Used
+- JavaScript
+- HTML5
+- (S)CSS
+- Mocha
+- Chai
+- webpack
+- ### third party extensions
+  - chartjs
+
+## Contributors 
+- Ashlee Webb: [github](https://github.com/AshleeAWebb) | [linkedin](https://www.linkedin.com/in/ashlee-webb-0b592199/)
+- Adam Meza: [github](https://github.com/Adam-Meza) | [linkedin](https://www.linkedin.com/in/adam-meza/)
+- Rachel Brendel: [github](https://github.com/brendel-r) | [linkedin](https://www.linkedin.com/in/rachel-brendel-bb9673197/)
+- Patrick Ankiewicz: [github](https://github.com/Pma913) | [linkedin](https://www.linkedin.com/in/patrick-ankiewicz/)

dist/index.html

@@ -1,14 +1,84 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Fitlit</title>
-  </head>
-  <body>
-    <h1>Activity Tracker</h1>
-    <img src="./images/turing-logo.png" alt="turing logo" height="100px" width="100px">
-
-<!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
-    <script src="bundle.js"></script>
-  </body>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>FitLit</title>
+  <link href="./css/styles.css" rel="stylesheet" type="text/css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lexend&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <header class="main-header">
+    <div class="logo">
+      <img class="logo-image" src="./images/fitlit-logo.png" alt="FitLit logo">
+    </div>
+      <div class="user-main">
+        <h2 class="user-name" id="userName" tabindex="0">First Name</h2>
+        <ul class="user-info" id="userInfo" tabindex="0"></ul>
+    </div>
+  </header>
+  <!--   activity -->
+  <article class="activity-container">
+    <div class="activity-info-box">
+      <h2 tabindex="0">Activity</h2>
+      <p tabindex="0" class="activity activity-chart"><canvas id="activityBoxWeek" width="800" height="400" aria-label="A line chart showing user activity over the course of a week" role="img">
+        <p>Activity Chart</p>
+      </canvas></p>
+    </div>
+    <div class="activity-info-box">
+      <ul tabindex="0" class="activity activityUserStat" id="activityInfoBox">test</ul>
+      <button class="open-modal button"id="openModalBtn">Enter User Data</button>
+     </div>
+      <div id="activityModal" class="modal">
+        <span id ="close-btn"class="close-btn">&times;</span>
+        <form>
+          <section class="input-box">
+            <h2>Enter Today's Activity Data!</h2>
+            <!-- <label for="date">Date:</label>
+            <input class="data-input" type="date" id="date" name="date"> -->
+          </section>
+          <section class="input-box">
+            <label for="flightsOfStairs">Flights Of Stairs Climbed:</label>
+            <input class="data-input" type="number" id="flightsOfStairs" name="flights-of-stairs">
+          </section>
+          <section class="input-box"> 
+            <label for="activeMinutes">Active Minutes:</label>
+            <input class="data-input" type="number" id="activeMinutes" name="active-minutes">
+          </section>
+          <section class="input-box">
+            <label for="numSteps">Number of Steps:</label>
+            <input class="data-input" type="number" id="numSteps" name="num-steps">
+
+          </section>
+          <input type="submit" id="userInputBtn" class="user-input button" value="Enter User Data" disabled>
+        </form>
+      </div>
+      </section>
+    </div>
+    <div class="activity-info-box">
+      <h2 tabindex="0">Step Challenge</h2>
+      <p tabindex="0" class="activity activity-chart"><canvas id="stepChallengeBox" width="800" height="400"aria-label="A bar graph showing user activity compared to their friends for the week" role="img"></canvasid></canvas></p>
+    </div>
+  </article>
+  <section class="bottom-container">
+    <!--   hydration -->
+    <article class="info-card">
+      <h2 tabindex="0">Hydration</h2>
+      <p tabindex="0" class="hydration info-box"><canvas id="hydrationBoxWeek" width="800" height="400" aria-label="A line chart showing user hydration over the course of a week" role="img"></canvasid></canvas></p>
+      <ul tabindex="0" class="hydration info-box" id="hydrationInfoBox">test</ul>
+    </article>
+    <!--   sleep -->
+    <article class="info-card">
+      <h2 tabindex="0">Sleep</h2>
+      <p tabindex="0" class="sleep info-box"><canvas id="sleepBoxWeek" width="800" height="400" aria-label="A line chart showing user sleep over the course of a week" role="img"></canvasid></canvas></p>
+      <ul tabindex="0" class="sleep info-box" id="sleepInfoBox">test</ul>
+    </article>
+  </section>
+  <script src="bundle.js"></script>
+</body>
+
 </html>

package.json

@@ -22,5 +22,9 @@
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "chart.js": "^4.2.1",
+    "dayjs": "^1.11.7"
   }
 }

src/Activity.js

@@ -0,0 +1,24 @@
+class Activity {
+  constructor(data, stride) {
+    this.data = data;
+    this.userStride = stride;
+  };
+
+  getDailyActivityInfo(date, infoType) {
+    if (infoType === 'minutesActive' || infoType === 'numSteps') {
+      return this.data.find(activity => activity.date === date)[infoType];
+    } else {
+      return `${infoType} is not a valid argument!`;
+    };
+  };
+
+  calculateMiles(date) {
+    return parseFloat(((this.getDailyActivityInfo(date, 'numSteps') * this.userStride) / 5280).toFixed(2))
+  };
+
+  getLatestWeek() {
+    return this.data.map(activity => activity.numSteps).slice(0,7);
+  };
+};
+
+export default Activity;

src/Hydration.js

@@ -0,0 +1,31 @@
+class Hydration {
+  constructor(data) {
+    this.data = data;
+  };
+
+  findAvgDailyHydration() {
+    if (!this.data.length) {
+      return 'No Hydration Data Found';
+    };
+    const dailyAvg = this.data.reduce((total, water) => {
+      total.ounces += water.numOunces;
+      total.count += 1;
+      return total;
+    }, { ounces: 0, count: 0 });
+    return Math.round(dailyAvg.ounces / dailyAvg.count);
+  };
+
+  getHydrationSpecificDay(date) {
+    if (!this.data.length) {
+      return 'No Hydration Data Found';
+    };
+    const consumptionByDate = this.data.find(specficDate => specficDate.date === date);
+    return consumptionByDate.numOunces;
+  };
+
+  findWeeklyHydration() {
+    return this.data.map(water => water.numOunces).slice(0,7);
+  };
+};
+
+export default Hydration;

src/Sleep.js

@@ -0,0 +1,37 @@
+class Sleep {
+  constructor(data){
+    this.data = data;
+  };
+
+  getAverage(dataType) {
+    if (dataType === "hoursSlept" || dataType === "sleepQuality") {
+      let total = this.data.reduce((acc, currentValue) => {
+        acc += currentValue[dataType];
+        return acc;
+        }, 0)
+      return parseFloat((total / this.data.length).toFixed(4));
+    } else {
+      return `${dataType} is not a valid argument!`;
+    };
+  };
+
+  getInfoForSpecificDate(date, infoType) {
+    if (this.data.some(sleep => sleep.date === date)) {
+      return this.data.find(sleep => sleep.date === date)[infoType];
+    } else {
+      return "There is no data for this date";
+    };
+  };
+
+  getInfoForPastWeek(infoType) {
+    if (infoType === "hoursSlept" || infoType === "sleepQuality") {
+      return this.data
+        .map(sleep => sleep[infoType])
+        .slice(0,7);
+    } else {
+      return `${infoType} is not a valid argument!`;
+    };
+  };
+};
+
+export default Sleep;