Progress Tracker

Home Page (Light mode)
Home Page (Dark mode)
Nutrition Page
Work Page
Health Page
Settings Page

Inspiration

Our goal was to create a simple and user friendly interface to track the user's progress over the course of a day - helping to have a more productive day every day.

What it does

This program will provide the user with a way to document their day in a way to check their goals, create and set tasks for themselves, and a visualized way to see their progression in health and wellness.

How we built it

This project was built using JavaScript, HTML, and CSS. HTML and CSS were used for front-end development and design. JavaScript was used for back-end and to create a localized data storage system.

Challenges we ran into

Our group members ran into several problems throughout this application. One of the main ones was figuring out how to store data without having to use a 3rd party, around late in the evening, several of the group members were able to figure out that they can use JSON objects as a while to save data to a key.

Accomplishments that we're proud of

We as a team are proud of the light/dark mode change based on system preference. This changes the entire sites theme, adjusting all styling for the page keeping a cohesive look to the entire project. We are also very proud of the real time progression of the work day status.

At the end of the day we're impressed with what we were able to accomplish using vanilla javascript, html, and css.

What we learned

We learned the difficulties with storage using vanilla javascript limiting our ability to attach to a database. At the end of the day we learned the use of local storage in the browser. This local storage was able to be used in a temporary placement for data storage. We also learned the importance of pre-planning the project before diving in to coding.

What's next for Progress Tracker?

The overall goal would be to update the code to use a database connection - possibly implementing javascript frameworks and mongodb. Cleaning up the code to consolidate some of the CSS and JS files that can re-use code instead of re-writing parts of the code.

Built With

Submitted to

Hack Dearborn: Disrupt Reality

Created by

I created the "health" and "settings" sections of the project. I specifically focused on the HTML, CSS side of the pages. I also refined the cohesion of the pages styles.

Kyle Moorhead
I worked on the front end. It was difficult at times once our pages started filling up.
My skills have definitely improved after working on this project for so long.

Matthew Braun
I contributed to both the front-end and back-end code. I created the home page, the logic for storing stats in local storage, and the logic for updating progress bars. I also completed some of the front-end design work for each of the pages.

Ted Gravlin
I was responsible in reaching a suitable outcome for the "work" section of the project. A feature in providing a real time progression of the work day along with the ability to add tasks for the user to check, these tasks were created using a JSON object that I implemented. I have assisted in cleaning the script files in readability. I was also able to provide an extra set of eyes for debugging code.

Adrian A. Gonzalez