turingschool-examples · tconey23 · Feb 5, 2024 · Feb 5, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/dist/bundle.js b/dist/bundle.js
@@ -1,6 +1,6 @@
 /******/ (() => { // webpackBootstrap
   var __webpack_exports__ = {};
-  alert('hello')
+  // alert('hello')
   /******/
 })()
   ;
diff --git a/dist/index.html b/dist/index.html
@@ -1,14 +1,66 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" 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">
+    <nav> 
+      <a class="home-button" href="#top">Home</a>
+      <a class="steps-button" href="#section2">Steps</a>
+      <a class="water-button" href="#section3">Water</a>
+      <a class="sleep-button" href="#section4">Sleep</a>
+      <a class="account-button" href="#section5">Account</a>
+    </nav>
+    <main id="top">
+      <article>
+        <img src="./images/fitlit-logo.png">
+        <h1 class="welcome-message" id="welcomeMessage">welcome back (person.name)</h1>
+      </article>
+      <section class="steps-main info-card" id="section2">
+        <div class="section-text">
+          <h3>Your daily step goal: </h3>
+          <p class="user-step">xx,xxx</p>
+          <h3>The average daily step goal is: </h3>
+          <p class="average-step">x,xxx</p>
+          <canvas id="stepChart" style="width:100%;max-width:700px"></canvas>
+        </div>
+      </section>
+      <section class="water-main info-card" id="waterCard">
+        <h2>Hydration Info</h2>
+        <div>
+          <h3>Average Daily Hydration:</h3>
+          <p id="averageDailyOunces">0 oz</p>
+        </div>
+        <div>
+          <label for="specificDayInput">Hydration for a specific day:</label>
+          <input type="date" id="specificDayInput">
+          <p id="specificDayOunces">0 oz</p>
+        </div>
+        <div>
+          <label for="weeklyStartDayInput">Start date for weekly hydration:</label>
+          <input type="date" id="weeklyStartDayInput">
+          <ul id="weeklyOuncesList">
+            <!-- list items dynamically added here -->
+          </ul>
 
+        </div>
+      </section>
+      <section class="sleep-main info-card" id="section4">
+        <div></div>
+      </section>
+      <section class="account-main info-card" id="section5">
+        <div class="section-text">
+          <h3 id="account-name">name</h3>
+          <h3 id="account-address">address</h3>
+          <h3 id="account-email">email</h3>
+          <h3 id="account-stride">stride length</h3>
+          <h3 id="account-step">daily step goal</h3>
+          <h3 id="account-friends">friends</h3>
+           </div>
+      </section>
+    </main>
 <!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
     <script src="bundle.js"></script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -22,5 +22,8 @@
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.1"
   }
 }
diff --git a/src/chartSetup.js b/src/chartSetup.js
@@ -0,0 +1,60 @@
+import { Chart, registerables } from 'chart.js/auto';
+Chart.register(...registerables);
+
+const ctx = document.getElementById('stepChart').getContext('2d');
+
+ctx.canvas.height = 100;
+ctx.canvas.width = 500; 
+
+const stepChartData = {
+  labels: ['Your step goal', 'Average step goal'],
+  datasets: [{
+    label: '',
+    data: [],
+    backgroundColor: [
+      '#1a1a1a',
+      '#1a1a1a',
+    ],
+    borderColor: [
+      '#1a1a1a',
+      '#1a1a1a',
+    ],
+    borderWidth: 1
+  }]
+};
+
+const options = {
+  indexAxis: 'y',
+  scales: {
+    x: {
+      beginAtZero: true,
+      ticks: {
+        color: 'black'
+      }
+    },
+    y: {
+      beginAtZero: true,
+      ticks: {
+        color: 'black'
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
+    }
+  },
+};
+
+const stepChart = new Chart(ctx, {
+  type: 'bar', 
+  data: stepChartData,
+  options: options
+});
+
+export {
+    ctx,
+    stepChartData,
+    options,
+    stepChart
+}
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,5 +1,97 @@
+* {
+  font-family: "Baskerville Old Face";
+  font-style: normal;
+}
 body, html {
-  background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
-  background-repeat: no-repeat;
-  height: 100%;
+  scroll-behavior: smooth;
+  background: url('../images/white-texture.png') repeat-x;
+  background-size: 100% 100%;
+}
+main {
+  scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+    overflow: hidden;
+    background:rgba(0, 0, 0, 0);
+    color: #1a1a1a;
+    position: fixed;
+    top: 10px;
+    width: 100%;
+    height: 2em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+nav a {
+  color: #000000;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 18px;
+  font-variant: unicase;
+  font-weight: bolder;
+  margin: 10px;
+}
+
+nav a:hover {
+  text-shadow: 0px 0px 11px rgb(0, 0, 0);
+}
+
+.info-card {
+    width: 75%;
+    height: 100vh;
+    padding: 6%;
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.info-card div {
+    border: rgb(0, 0, 0) solid;
+    width: 75%;
+    height: 75%;
+    display: flex;
+    box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+    overflow: hidden;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: stretch;
+    justify-content: space-around;
+    max-width: 75%;
+    align-items: center;
+}
+
+article {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 10em;
+  height: 100vh;
+}
+
+article img {
+  mix-blend-mode: color-burn;
+}
+
+.step-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.step-text h3 {
+  margin-bottom: 0;
+}
+
+#stepChart {
+  width: 10px;
+  mix-blend-mode: color-burn;
 }
diff --git a/src/data/calendar.js b/src/data/calendar.js
@@ -0,0 +1,18 @@
+function createCalendar(month, day, year) {
+
+const calendar = {
+    month: month,
+    day: day,
+    year: year
+}
+
+return calendar
+
+}
+
+
+
+
+module.exports = {
+    createCalendar
+}
diff --git a/src/data/load.js b/src/data/load.js
@@ -0,0 +1,22 @@
+// const { default: users } = require("./users")
+import users from "./users"
+console.log("load:", users)
+
+var randomUser = []
+
+function generateUser(id) {
+    return users.users.find(user => user.id === id)
+};
+
+/* */
+
+function getAverageStepGoal() {
+  const totalStepsGoal = users.users.reduce((total, user) => total + user.dailyStepGoal, 0);
+  let averageSteps = totalStepsGoal / users.users.length;  
+  return averageSteps
+}
+
+module.exports = {
+    generateUser,
+    getAverageStepGoal
+}