A Front-End Project by Bret Merritt & Caleb Cyphers
We are Front-End students at the Turing School of Software and Design. This project was our paired project for Module 2, and was built with a focus on learning how to use object and array prototype methods to perform data manipulation on large datasets.
This app is an activity tracker that offers a look into the user's health data for a given week. It displays activity, hydration, and sleep data. There are in depth insights for the current day, as well as several graphs visualizing weekly data. There is also a section to vew the global average activity of all users for the current day.
- Gaining a better understanding of ES6 and test-driven-design.
- Learning to translate original composition into a website
- Getting comfortable with array prototype methods
- Working with large datasets
- HTML
- CSS
- JavaScript
- Mocha & Chai
- MomentJS
- ChartJS
- Git
- Lint
Our layout Is based on common activity tracking apps. We organized categories by what we thought the most useful data was, keeping the high priority data at the top. We specifically took inspiration from popular sleep apps to create a calm design, while using pops of color to keep the app lively.
The Activity section contains a card for today's activity which includes: * Whether step goal has been met * Total steps today * Total minutes active today * Flights of Stairs climbed today * Miles Walked today.
It also shows the global averages for common activities to crosscheck your progress!
Also included in the Activity section is a weekly view of the user's steps. This line graph illustrates how user's steps fluxuate throughout the week. Next to the weekly graph is the minutes active and flights of stairs climbed each day in the week.
The Hydration section contains two cards: * A card for the current day, which indicates the number of ounces drank today. * A card for the week, which holds a weekly line graph that visualized all the ounces drank throughout the week.
The Sleep section contains three cards: * A card for the current day, displaying the hours slept that day and the sleep quality * A card for the week, displaying a line graph to illustrate the change in hours slept per day throughout the week. * A card for the user's average hours slept and average sleep quality for all time.
We faced some difficulties in importing npm packages into our project while keeping browser compatibility. Along the same lines, ran into some errors while attempting to instatiate data objects within data repository classes due to the way the browser compiles all the files into one global scope.
We managed to overcome the browser issues we faced and successfully import npm packages to properly manipulate our data and display nicely on the page. A big win for us was when we finally were displaying weekly data for a user's sleep data existing in a repository. This project really managed to make us to wrap our heads around how iterator methods can efficiently manipulate data.