Slice of a pie - goal tracker

I worked on adding two new functionalities for this devlog, which were the new sidebar and making the check-in frequency value chosen be used for its intended purpose

Goal

The main goal of this devlog was just setting up the necessary features for the big upcoming addition which is the daily check-in feature where the app keeps track of what progress has been made on goals that have check-ins due on that day. This information will also be used for the journal feature that will be added later on.

The Sidebar

For the sidebar, I realized that I wouldn’t need a dedicated sidebar to store all the buttons for navigation, as there aren’t many buttons necessary, so I decided to create a sort of hybrid sidebar that just lived on the side of the main page.

I also think this is much more visually pleasin design as the floating logos glide behind it and it feels very integrated. This was a simple addition where I just made a sidebar outside of the main homepage content div and styled it to look the way it is. It also has a hover effect, which simply makes the background’s opacity increase.

Currently, I have not built either of these menus yet so the buttons do not do anything. I will be adding functionality to the Daily Check-in button in the next devlog.

Check-in frequency

This is what I originally started working on for this devlog, but I realized that I don’t even have a way to get to the check-in page besides when it automatically pops up once daily. Therefore, I added the sidebar.

As for progress on this, I have made the goal object take in the chosen option and store it in a variable. I have added a function which uses this info and the last done check-in to find out whether there is a check-in due on that particular day for the passed in goal. This will be called in the daily check-in menu function that I will be making next. If this gives true, then that goal will have a check-in in today’s check-in

I worked on two new features for this devlog. One was kind of an impulse decision to add floating logos that bounce off the edges of the main page, like the DVD logo, and the other was making the time remaining section work on the goal cards instead of being a placeholder.

Floating logos

I felt like the background was super plain here and it felt kind of soulless, so I decided to give it that little nostalgic touch and have logos bounce around the user’s screen without making them too distracting.

I made this by adding 7 floating logos outside of the main HTML, and then I

• Used the Math.random function to randomize the object’s size, speed, and starting point
• Adjusted the opacity of them so they won’t be too annoying
• Bounded the speed so they all are roughly moving at the same type of speed with slight variation
• Made them bounce off the edges of the screen using the window width and height and negating their speed value when they come in contact with the boundary

With that done, I was testing the app’s functionality and discovered that the days remaining was still using a placeholder of “5 days,” which I had put there earlier.

Days Remaining

I made this work by writing a function that calculated how many days remained between the current day and the chosen completion date. I did this by using the new date() function to get dates in the format where I could directly subtract them to get the remaining days. This made it very convenient to work with.

I have been working on adding functionality to the app as I was getting pretty satisfied with how the UI looked. I started by adding the functionality for the goals to be saved as one object so they can be stored and retrieved easily

Setting up goals

I did this by creating a goals array that holds each goal, and I added a function that is triggered when the “add goal” button is pressed in the add goal menu. Within this function, I added a goal object which held the following:

• A randomly generated ID to easily access a goal
• The title
• The description
• The completion date
• The category of the goal
• The chosen check-in frequency
• The milestones
  With this, the goal could be easily stored, accessed, and edited by simply changing the information within the goal object in the goals array. With this made, I needed a way to display the information entered on the screen, so I created what I call goal cards.

Goal Cards

Making the goal cards was a very cool learning experience as I got to deal more with dynamic HTML creation. Once the Add Goal button was clicked, it would call the displayGoal function. This function would:

1. Get all the information from the particular goal object we are displaying
2. Create the goal card using dynamic object creation and add CSS classes that have been made for it
3. Update the goal card every time it is edited, like when milestones are checked off; it will update the progress bar.

Speaking of the progress bar, clicking on the goal card brings up the menu shown in the image below, which allows the user to see a bigger view of the goal and allows them to check off milestones. I plan on expanding this to add editability to goals and other functionality.

Goal menu

This was created using the same technique as the add goal menu from a previous devlog, but instead of showing the same information for everything, it changes based on the goal object being targeted.

The styling is not perfect yet, as I was focusing on the functionality more, but as more is changed, it will look closer to the true final product.

Conclusion

Overall, this was a very productive devlog, and I think I learned a lot of new valuable skills in JavaScript. I think the next thing I will work on is adding the check-ins and setting up the data to be stored locally so it doesn’t go away after a page refresh.

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.