Skip to content
Submitted about 2 months ago

Pomodoro in Tailwind and Svelte with SVG

#animation#svelte#tailwind-css#vite
Sam Hooker•780
@35degrees
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pomodoro app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I could make a slick interface with a timer that works. I spent a lot of time learning Svelte state, and ended up with stores instead which I'm disappointed in. Also I spent time with the SVG line but it's not perfect.

What challenges did you encounter, and how did you overcome them?

No idea how to do the circle, I had to spend time with several SVG tutorials and still don't feel fluent in it. Also lots of wrestling with the Svelte components and moving props. good exercise to improve.

Community feedback

  • Kamran Kiani•1,540
    @kaamiikPosted 5 days ago

    Hi I am very impressed by the animations and extra features you implemented in this project. Congratulations on a job well done. However, I have some notes I'd like to share:

    1. Lack of header and main elements: Your HTML code does not include header and main elements. These elements are crucial for a well-structured page and improve both accessibility and SEO.
    1. Heading Structure: The h1 tag should be the first heading tag on your page and should be followed sequentially by other heading tags (e.g., h2, h3, etc.). This creates a clear and logical hierarchy for your content.
    1. Accessible Navigation: I suggest turning the top nav into a tab system that is fully accessible. Currently, I am unable to navigate your site using only the keyboard. For guidance on how to build an accessible tab system, you can refer to Kevin Powell's tutorial

    Additionally, there are several accessibility issues in your code. While your design and animations are beautiful, a solid structure is equally important. Ensuring accessibility means that all users, including those with disabilities, can effectively use your website and easily review your code.

    Thank you for your hard work, and I hope these suggestions help enhance your project.

    Best regards,

    Marked as helpful
    1
    Sam Hooker•780
    @35degreesPosted 4 days ago

    @kaamiik appreciate the specific feedback and Kevin Powell's video. I get mixed up with a11y and tab systems. Happy New Year!

    1

Please log in to post a comment

Log in with GitHub

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