Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

BONUS SOLUTION - Static HTML5, CSS3 and JS using Grid and Flexbox

@Shirajuki

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! 👋

This is my 3rd solution on Frontend Mentor, and also my 3rd week here! As this was my first intermediate challenge, and also quite simple, I chose to build it using static HTML5 and CSS3 and vanilla javascript. 🙂

I used more time on this solution this week as Easter break 🐣 just began for me and thus I it took 4-5 hours on this solution in the span of 2 days. Feedbacks on my excessively use of pseudo-element ::before/::after, if that may be unnecessary or not, to my solution of the flipping animation of the card are appreciated. I tend to also write lots of redundant and unclean code but I am willing to improve, thus any feedback from the community on that or anything else are also greatly appreciated!

Once again I used Figma 🎨 for measuring which has made it a lot easier to get the measurement, but is still difficult to get the solution to be "pixel correct" on a big display as my monitor is smaller than 1440px. The solution uses the WebStorage API / LocalStorage for saving the countdown timer, and the use of setInterval for the countdown. 💻

I'll be back for another challenge next week, happy Easter and see you all again next week! 🙂

  • Shirajuki

Community feedback

Guliye 290

@guliye91

Posted

The overall layout and the design is Ok. But am getting -1 in the minutes when first the page loads. What is it? I think you need to check that

0

@Shirajuki

Posted

Hello guliye91! Thank you for the feedback! I actually am aware of the issue with -1 in the minutes and hoped that it wasn't that noticeable, since truth to be told I was just too lazy to fix it (I'll be fixing it in a future date when I have more time). Is it however possible for you to briefly explain more on how I can improve the layout and the design? Is it the margin or the padding that is a little bit off? Or is something with the html structure? 😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord