Submitted

Pomodoro App Challenge w/extra features!

P
Martin 1,150

@ringm

Desktop design screenshot for the Pomodoro app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

4

HTML Issues

View Report

Community Feedback

P
Matt Studdert 13,241

@mattstuddert

Posted

Love this solution, Martin! It looks amazing, and it's nice to see you adding some extra features as well. Good job manipulating SVG elements for the circular progress bar!

Did you learn anything new while working through this project?

1


P
Martin 1,150

@ringm

Posted

@mattstuddert definetly! For starters, it was my first time working with a animation library (I used animejs). Was really helpful specially for animating the svg circular line.

Also had to research which was the best approach for changing the font a color in several places at the same time. Turns out the best practice was using css variables and update them with JS.

It was also a great UX excercise. Going through the project I had to make decisions such as:

  • Should the clock stop when you open the menu?
  • What happens if you want to reset the clock without realoading the page?
  • It would be nice to keep track of the amount of time you've been working, without taking into account the breaks... maybe add a little clock for that?

It was interesting to develop the code with this questions in mind. I felt I could follow the guidelines of the project and then put some ideas of my own, which makes the end result more personal.

1

P
Matt Studdert 13,241

@mattstuddert

Posted

@ringm that's awesome! Those are some great questions that you were asking as you worked through the project. There's definitely a lot of scope for personalisation. It's those extra touches and details that really make the difference!

Using CSS variables for changing the theme was definitely a good approach to take. They make it so much simpler!

0

P

@emestabillo

Posted

Hey @ringm, awesome job! I like that I can see the timer on the browser tab. I'm viewing this on a smaller laptop and I'm not able to scroll down and see the entire length of of the project. Seems the class .h-screen {height: 100vh} is doing it. I'd also very much like to study your code and learn from it but the repo is not giving me anything lol.

1


P
Martin 1,150

@ringm

Posted

@emestabillo sorry about the repo problem! I just updated it :D

Thanks for the feedback! Let me know what you think about the code.

1

@astroud

Posted

Nice work Martin! I'm still working on my solution. Started out as a pure js solution like yours, but now I've learned enough React to reimplement it as a React app.

What was part did you find the most difficult? I stalled out at the circular progress bar. I think I'll be using this library to implement it.

1


P
Martin 1,150

@ringm

Posted

@astroud thank you! I'm planning to do a React course now, and then take new challenges to put it to practice.

The progress bar was certainly challenging, I used animejs as an animation library and was great, gave me lot of control when it came down to animating it. I made transition animations between clocks and also when u reset the counter.

I'm looking forward on seeing your solution!

1

@astroud

Posted

@ringm Martin, I finally wrapped up my version.

I'm interested in any and all feedback. I'm planning to refactor the project after a learn more about testing and state management with Redux. I also have a CSS issue or two to track down.

0

Give some feedback to @ringm about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!