Slice of a pie - goal tracker

I have been working on the frontend of the app updating it to look more like how I want it to when the app is published. The first image showcases the main page of the app where the goals that are added will show up seperated by short term, medium term, and long term. New goals can be added by pressing the add goal button under each subdivision. Pressing that button brings up the menu from the second image, which is the menu to add a new goal. This menu sets up not only a goal to achieve, but a plan to stick to it.

This includes setting up a check-in frequency that tells the app how often in the daily check-ins there should be a progress update for this particular goal. This also includes setting up milestones/steps to achieving a certain goal. This allows for progress tracking of a goal that was set up, and even a feature where the app tells you if you are behind, on track, or ahead on your goal.

The biggest challenge I faced while creating this was the feature for adding your own custom milestones, as it was designed to give a lot of freedom to the user. You can move the milestones that were added, give them specific completion dates, or choose to let the app space them evenly. You can add as many milestones as you want, and you can even choose not to add specific milestones and let the app deduce how many and how to split up the milestones. The reason this was difficult was that I have very minimal experience with JavaScript, so this took a lot of time to design, troubleshoot, and iron out.

My next steps are to start working on the backend so that the stuff that is entered in the goal setup menu is actually reflected in the main page, and the daily check-in system is setup

Hi, I am currently learning HTML, CSS, and JavaScript, and along the way, I wanted to make a project to solidify my learning: A goal tracking app!

I am very excited to share my current progress, as I was able to make an overlay menu that displays over the app without going to a different page. This was a difficult task as I had not worked with JavaScript before, but with the help of resources like Stack Overflow, I was able to figure out how to implement it!

I used an on() and an off() function that displayed a full-screen overlay, which had a child overlay containing the pop-up menu. This can be seen in the second picture below. The overlay is display= “none” by default and then gets set to display= “flex” when the on() function is called. Off() sets it back to none. I haven’t added the exact content that I want or styled anything yet, but I just wanted to share this milestone!

The app that I am making is a goal-tracking app that allows the user to add different types of goals (short, medium, long term) to keep track of their goals. The app will also keep the user accountable as it will require the user to set steps/mini goals that need to be achieved, and will have the user complete a daily check-in to track their progress. Different types of goals can have different time frames, and the app will account for that. The user can input a time frame, or the app will use pre-determined values.