@adwitha

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.

For this devlog, I was only planning to have the article done, but I ended up finishing both the homepage and the article as I was enjoying designing them!

Personally, I’ve always found it hard to really understand and retain the information I read from a wall of text, so I wanted to take the opportunity to bring to life how I wish all blogs and articles would look and feel. I’ve always loved interactive websites that let you interact with the items the article discusses, as they’ve always helped me understand the concept better. I’m also very passionate about JoJo’s Bizarre Adventure (It is my favorite anime lol), so I took this opportunity to use it to explain how I think a great power system is built. I’ve included all kinda of interactive activities throughout the article, like a cool animation of how Hamon works.

I made this section interactive by making a Hamon observer that checks if the reader has scrolled to the div of “hamon-section” and creates the sun-like overlay shown in the second image below. Once the button saying begin breathing is pressed, the CSS for the glow effect around the GIF is set to opacity 1 from 0, there is a flash of white, and the GIF is switched to the Hamon-activated one after a few seconds’ delay.

I also made a stand card section where the user can use a stand arrow on themselves and choose a stand from the provided options, a section where the reader gets asked about when a “useless” seeming power could be useful, and a section where the user gets to build their own power and give it a limitation which the website will then provide a comment on. All of these were achieved through using JavaScript DOM manipulation by hiding and making elements appear, as well as applying CSS to them. Furthermore, for the section where the user gets to choose a stand, I used dynamic element creation in JavaScript to make new HTML elements in the JavaScript itself.

I learned many new things through this project. I learned how to make effects that appear as the user gradually scrolls through the page, and pretty much everything about mouse hover effects lol. I also feel like I have gotten a good understanding of how to have a cohesive design language that sticks throughout the home page and article to provide a professional user experience. This project also allowed me to get practice with JavaScript DOM manipulation, as I have used it extensively in the stands sections and also at the end.

The theme of this website is like a starry night sky, but if it were from a retro video game. The reason I thought of this is that I wanted to have a theme of retro sprites and pixel art in all the articles I write, as I think it supports the “Pixel Corner” name of the website. The colorway of the website was actually inspired by JoJo lol, as I felt like the colorway looked great after designing the article, and I decided to make that the core colors and theme of the site itself. I also took full advantage of hover effects everywhere to give the website a more lively feeling than just a static page.

I am very glad that I took on this project, as I have learned valuable skills and really enjoyed designing this blog website. I enjoyed it so much that I plan to continue making more blogs and officially launch this website soon! I think it could be really cool to launch this website and add to it with more fun and interactive articles that make people want to engage with reading a blog article rather than shy away from a wall of text!

I’m creating a blog page focused on visual effects and interactivity to make reading more approachable and fun. So far, I have set up a simple main page and written the first article in simple HTML. This blog is about how to make a great power system, using JoJo’s Bizarre Adventure’s power system to discuss what makes one. I plan to heavily stylize the page for each section, add a little minigame near the end, and add many interactable buttons and objects throughout the blog.

The goal of this blog website is to talk about the creation of entertainment and how to make it the best it can be. I plan to add more and more posts over time and deploy the website. By the next devlog, my goal is to complete the styling and interactivity of the blog I’ve written and also

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.