https://github.com/mouhametnd/pomodoro-app

This project is made with HTML, CSS, SCSS, Javascript, localStorage and Gulp.js
https://github.com/mouhametnd/pomodoro-app

bem-methodology gulpjs javascript localstorage postcss scss

Last synced: about 1 month ago
JSON representation

This project is made with HTML, CSS, SCSS, Javascript, localStorage and Gulp.js

• Host: GitHub
• URL: https://github.com/mouhametnd/pomodoro-app
• Owner: mouhametnd
• License: mit
• Created: 2022-05-05T11:56:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-17T10:18:44.000Z (over 2 years ago)
• Last Synced: 2024-10-11T23:41:05.166Z (about 1 month ago)
• Topics: bem-methodology, gulpjs, javascript, localstorage, postcss, scss
• Language: JavaScript
• Homepage: https://mouhametnd-pomodoro.netlify.app/
• Size: 570 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.linkedin.com/in/mouhametndiaye/)

- My email [email protected]

- Live Project [Pomodoro App](https://mouhametnd-pomodoro.netlify.app/)

- Challenged by [Frontend Mentor](https://www.frontendmentor.io/home)

## 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

![Design preview for the Pomodoro App page coding challenge](./pomodoro-app.gif)

## 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.