Devlog #2 IT’S COMPLETE!

Hi everyone. If you read my last devlog you may know me as the idiot with the duck background. But I’m glad to announce that the ducks will soon be retiring as they have served their purpose.

Let me introduce my project as a quick refresher:

So this is a marriage clock, tracking the hours minutes seconds days years etc. that my parent’s have been married. And tomorrow’s their anniversary so I plan to surprise them and show it to them :).

What I have done in this session:

• A sliding animation showing the time my parents were married in 6 different units of time: years, months, days, hours, minutes, and seconds.
• Tried my best to make it aesthetic with nice fonts and color.
• Added a heart particle effect background.
• Did a lot of digging through css documentation once again
• Spent like 45 minutes screaming at a layout problem I struggled to fix.
• Did the time logic and the scaling for the units in a way that leap years don’t mess it up.
• Wrote a nice letter in the 2nd page
• Made the arrows stationary so it doesn’t look weird.

A couple super duper tiny specks to do tomorrow (around 5-10 mins hopefully):

• One last run through to check if everything’s good.
• Deploy it
• Ship it
• Most exciting part-showing my parents.

Since I have such little work to do, this will be my last devlog for this project. And I may not have been able to add every feature I wanted to like I envisioned and listed in my previous devlog, I’m glad how it turned out for the time I spent on it and I like how it is simple and also purposeful. Overall, I’m proud of how it turned out.

Check out the repo: https://github.com/Ash-ioL/parents-marriage-clock

I am gonna miss this project… sob sob. But boy am I glad I won’t have to deal with any css grid till maybe my next web project.

Signing off,
Ash-ioL

Dev Log #1: No Clock Logic YET!

A little background info…

So what I have here is a little surprise I’m preparing for my parents’ wedding anniversary. The end result–how I envision it–has a clock on the first container counting the time they’ve been married, and on the second container, it’ll have a little note and/or some kind words. Super excited to present it to them–not excited that I have to finish it by the end of tomorrow. Kinda busy tomorrow so we’ll see if I can get it done 🤞🤞.

Why are there ducks??????!?!???!!!!!!?

I know what you’re thinking: “This guy is an absolute fool for putting a picture of ducks on an anniversary gift.” Well, shame on you (in a friendly way)!

The ducks are actually a temporary background so I don’t get caught in the act of creating this by my parents when they walk by (and it indeed was a good decision because it has already saved me once).

For curious souls who want to know how the interaction went:
Dad: What’s that
Me: Umm its a duck thing
Dad: what does it do
Me: So uhh… so like you press the button and then… it tell you like how they quack. So for example these ducks quack like “fdsafas” and when you press the button now they quack like… like… that.

So yea! Pretty good interaction. Okay anyways back to devlog stuff->

What I’ve worked on:

• A lot of looking through CSS documentations
• Created the layout of everything
• Added custom font and background
• Made the page responsive for different screen sizes
• Added transitions to switch between the clock page and the notes page
• Created custom arrow navigation with hover effects

Moving forward / What’s left to do:

• Code the logic for the clock (which displays the time my parents have been married)
• Add some logic where the clock freezes and catches up (for animations)
• Add animations for big milestones (like months or years)
• Add a sliding transition for the increases
• Write the nice words in the notes section
• Add heart effects in the background
• Deploy it and PRESENT IT!

Feel free to check out the GitHub repository: https://github.com/Ash-ioL/parents-marriage-clock.
And ill be back with another update toooomoooorrrooowwwww…

Signing off,
Ash-ioL