Pomodoro App Challenge w/extra features!

Community feedback

• 

  Aaron Stroud•435

  @astroudPosted about 4 years ago

  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

  ---

  

  Martin•1,150

  @ringmPosted about 4 years ago

  @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

  

  Aaron Stroud•435

  @astroudPosted about 4 years ago

  @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
• 

  

  Emmilie Estabillo•5,580

  @emestabilloPosted about 4 years ago

  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

  ---

  

  Martin•1,150

  @ringmPosted about 4 years ago

  @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
• 

  

  Matt Studdert•13,611

  @mattstuddertPosted about 4 years ago

  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

  ---

  

  Martin•1,150

  @ringmPosted about 4 years ago

  @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

  

  

  Matt Studdert•13,611

  @mattstuddertPosted about 4 years ago

  @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