Frontend Mentor: Pomodoro Timer Challenge

Welcome 🍃

This was an excellent project challenged by frontend mentor Also was a good project to put into practice my CSS and Javascript skills.

Links

• My Linkedin Linkedin
• My email ahmetndiaye404@gmail.com
• Live Project Pomodoro App
• Challenged by Frontend Mentor

Challenge

Your users should be able to:

• Start 3 types of timers
• Pause, start and restart the timer
• Set a pomodoro timer and short & long break timers
• Customize how long each timer runs for. See a circular progress bar that updates every minute and represents how far through their timer they are.
• Change visual of the app. Customize the appearance of the app with the ability to set preferences for colors and fonts

Design of the App

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• SASS
• Vanilla JavaScript, localStorage and Gulp.js

What I learned

• SVG animated path
• JavaScript modules
• Changing CSS custom properties with JS

How To Run The Project

1. First of all you would need a Node installed.
2. Then you would need to install project dependencies from the package.json file, by running the npm install command. This.