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.