Coder Social home page Coder Social logo

evanribey / pomodoro-timer Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 57.07 MB

A small pomodoro timer web app to help with your time management and tasks

Home Page: https://pomodoro.evanribey.com

JavaScript 1.01% HTML 3.71% CSS 2.37% TypeScript 85.89% Less 7.03%
less reactjs typescript

pomodoro-timer's Introduction

๐Ÿ… Pomodoro Timer

A small web-based Pomodoro timer built using ReactJS, Typescript, and some components from the MUI library. It will create a countdown for each pomodoro and will wrap up the interval with a sound effect notifying the user that the next interval is about to begin.

Features

  • Standard functionality for a pomodoro timer, focus for 25 minutes, break for 5 minutes, and after 4 focus timers, breaking for 15 minutes
    • Includes an onscreen timer and a sand hourglass-like visual showcasing how much time is left in each pomodoro
    • Also includes the live timer and type of pomodoro in the title bar
    • The timer automatically moves forward to the next pomodoro with a "3..2..1" countdown sound effect
  • Includes an option for a "long" pomodoro timer which doubles the focus time to 50 minutes, the break to 10 minutes, and the long break timer to 30 minutes
  • A todo list manager to keep track of any tasks within the application. The list also persists on visits, so coming back to the page or refreshing keeps your tasks
  • A mini-player for lofi music that plays from the "3 Am. Study Session" album with pause/play functionality and song credits
    • I will probably include more albums in the future to randomize based on the month, or look to include the live lofi videos

Personal Comments

My partner mentioned using pomodoro timers to help her focus on tasks, and I wanted to see if I could program one (even if there are many of these on the internet). Coming from some more experience working with React, I wanted to see if I could flex my skills with my own project while adding Typescript on so that I can practice. Plus in the developer mindset I wanted to see if I could build something relatively in the way that I would want to use it.

Overall I'm very happy with how this came out in such a short period of time. It was fun to play around with the sound effects/music as well as Audio was something that I haven't personally worked with before.

pomodoro-timer's People

Contributors

evanribey avatar dependabot[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.