You are browsing as a guest. Sign up (or log in) to start making projects!

Marriage Clock 79

  • 5 Devlogs
  • 12 Total hours

A marriage clock tracking the years, days, minutes, and seconds that my parents have been married to each other. V2 allows you to input your own dates!

Open comments for this post

3h 24m 9s logged

THE CHANGES ARE ROLLING

To be honest I did not expect it to take this long to add a little bar that can take an input. But I guess it is how it is.

Feature #1: Date Configuration Bar!

  • I spent the longest on this, and this is what most of the reviews I got wanted.
  • Half the time was layout debugging and responsiveness
  • It is fully functional with no known bugs, successfully updating the date with the JS code and displaying the time since that date at 12am.

Feature #2: Readability

  • Someone in my reviews requested to make the note in the second page to be more readable… Well AS YOU WISH!
  • There is now a clean, blurred, dark background around it.

Feature #- Oh wait… that was it…

But wait–theres more coming! (planned for tomorrow)

  • Hour, minute, and second configuration for the time
  • Manual control over the unit of time
  • A nice showcase video
  • A ship!

BUG FIXES

  • This also took up a huge chunk of time
  • I fixed a property in css that was causing the transitions to not work correctly
  • Fixed a big that causes the page to break when reloaded

Even without the features, v2 is already turning out to be smoother, cleaner, more functional, and more responsive. I thank you reviewers for the nice detailed reviews you have given, it really helps me see my project from a different perspective. And I really do value it, which is why I am fulfilling every single suggestion.

Stay tuned for the final result tomorrow. Imma go enjoy a nice (sarcasm) 7 hours of sleep now (ugh gotta get up for practice tomorrow).

Signing off,
Ash-ioL

0
0
1
Open comments for this post

40m 5s logged

BRINGING IT BACK– and improving!

Hey yall,

So after my first ship, a lot of people didn’t see much usability in it other than it being a gift for my parents.

So… I couldn’t resist taking like an hour or so to create a v2 for this. So here’s the plan:

Feature #1: Usability

The background will be a more generic one, and you will be able to input your own parents’ marriage date and time to see how long they’ve been married.

Feature #2: Control

You will be able to swipe through the minutes, hours, seconds, etc. Instead of an animation playing.

Excited to bring these suggestions to life! So stay up to date!

Signing off,
Ash-ioL

1
0
2
Ship #1

Showcase video: https://youtu.be/SUqgM_ie4QI?si=yR0SwjIOD9eaOhl2

I created a marriage clock tracking the exact time my parents have been married to each other. The public version uses a random fixed time rather than the actual time for privacy reasons. The most challenging part was wrestling with CSS layout systems like CSS grid and CSS flexbox since it’s been months since I last worked with them and they just have tricky behaviors. The second challenging part was working on this while avoiding my parents to keep it as a surprise. My first drafts of anything In this project looked absolutely hideous (as expected), so I had to make a lot of minor tweaks and adjustments to get it as responsive and aesthetic as I can. But after all that, the end result was 200% worth it. I showed it to my parents and they were happy and it was a pretty nice moment. How to test my project: click the link, mess around with the arrows, and observe the magic!

  • 3 devlogs
  • 8h
  • 13.37x multiplier
  • 102 Stardust
Try project → See source code →
Open comments for this post

27m 3s logged

COMPLETE FOR REAL

And just letting you all know, the one I showed my parents is unblurred and uses the real unix time they were married. The public one contains no personal information and is not the real time they were married for.

Sorry for lying last devlog saying it’ll be my last. But I gotta claim my 21 mins before I ship this.

What I’ve completed:

  • Fixed the descriptions of the times being clipped due to overflow: hidden;
  • Added text blur to the letter in the second page so that it is readable.
  • Fixed a bug where the heart particles break the page by going outside the boundaries.

As I have said in my previous log, I enjoyed making this project in the last few days and I am proud of this. When I showed my parents they really liked it and it was a nice moment.

Happy wedding anniversary to my parents.

Please feel free to check it out in the deployed page: https://ash-iol.github.io/parents-marriage-clock/

Signing off,
Ash-ioL

0
0
10
Open comments for this post

3h 34m 52s logged

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

0
0
3
Open comments for this post

3h 36m 32s logged

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

1
0
3

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…