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.