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,96 @@
 <!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="section3">
+        <div></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>name</h3>
+          <p id="account-name"></p>
+          <h3>address</h3>
+          <p id="account-address"></p>
+          <h3>email</h3>
+          <p id="account-email"></p>
+          <h3>stride length</h3>
+          <p id="account-stride"></p>
+          <h3>daily step goal</h3>
+          <p id="account-step"></p>
+          <h3>friends</h3>
+          <p id="account-friends"></p>
+           </div>
+      </section>
+    </main>
 <!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
     <script src="bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+    <script>
+      var xValues = ["Your Step Goal", "Average Step Goal"];
+      var yValues = [11000, 6000];
+      var barColors = [
+        "#1a1a1a",
+        "#1a1a1a",
+      ];
+
+      new Chart("stepChart", {
+        type: "horizontalBar",
+        data: {
+          labels: xValues,
+          datasets: [{
+            backgroundColor: barColors,
+            data: yValues
+          }]
+        },
+        options: {
+          scales: {
+            xAxes: [{
+              ticks: {min: 0, max:12000,
+              fontSize: 20},
+            }],
+            yAxes: [{
+                gridLines: {
+                  display: false
+                },
+                barThickness: 25,
+                barPercentage: 1,
+                categoryPercentage: 1,
+                ticks: {fontSize: 20}
+              }],
+          },
+          legend: {display: false},
+          title: {
+            display: true,
+          }
+        }
+      });
+      </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/css/styles.css b/src/css/styles.css
@@ -1,5 +1,92 @@
+* {
+  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.jpg') repeat-x top, url('../images/white-texture-invert.jpg') repeat-x bottom;
+  background-size: 25% 50%, 25% 50%;
+}
+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;
+  flex-direction: column;
+  justify-content: flex-start;
+  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
+}