Project Manager: Nik Seif
- Abstract
- Technologies
- Illustrations
- Install + Setup
- Contributors
- Wins
- Challenges + Improvements
- Project Specs
This was a group project to build an activity tracker for many users over many days. Our goal was to present a useful dashboard for a user to view and see their latest activity data, goals, and milestones as well as add new data to each category.
- Javascript
- eslint
- html
- css
- sass
- node
- Atom
- WebPack
- API
- Chart.js
- Figma
- Lighthouse
On page load a random user's information will be displayed on the dashboard. Each color block contains a different category for specific set of tracked data. In the top right corner of the dashboard, the date for the latest user data is displayed.
The left-hand sidebar contains more detailed information about the current user on display. There is space above the user's information for a profile picture to be added.
When you click the button labeled Today a drop down menu will appear, allowing you to choose different date ranges to view a user's data for Today, This Week or for All-Time.
In addition to being able to see existing data for the three separate activities, sleep, hydration, and activity, users can now add new data for each category. By selecting the Add Data button a user can fill out the form and hit the submit button to add new information to a chosen category.
A user will not be able to submit a form that is not completed. The submit button will remained grayed out until each field within the form has been filled out. Invalid characters cannot be added to any fields so only valid data is added to the user's saved data.
- clone down the repository
- npm install
- npm install -g sass
- npm install sass-loader sass webpack --save-dev
- npm install chart.js
- npm start
- run local server
- copy URL into browser to view page
- Successfully add new data to the activity data sets using POST requests.
- Continued to maintained consistency with workflow, pull requests, and communication throughout the project.
- Refactored project files to organize scripts and DOM updates into separate files.
- Successfully refactored the project's css file to utilize SASS.
- Learned new techniques such as utilizing POST requests, additional input field types, SASS.
- Ensured the project exceeded accessibility standards by utilizing Aria to maintain a Lighthouse audit above 90%.
- Increased complexity over all throughout project spec.
- Delegation of work division between multiple team members.
- Technical challenges with POST requests.
- Challenges with posting correct date format when adding new data to the existing dataset.
- Challenges refactoring project to organize code in scripts.js for DOM functionality and domUpdates.js for DOM manipulation.