CoffeeCo  banner

CoffeeCo

7 devlogs
10h 11m 54s

a simple coffee themed pomodoro. the coffee cup fills up as your session progresses, and you can set breaks, change background colors, add a task list and pick a music track to help you stay focused!

This project uses AI
  • used Github’s copilot for autocompletion and minor css fixes
Demo Repository

Loading README...

grumpymarie

Shipped this project!

I built a coffee themed pomodoro timer for the caffeinated sidequest!

grumpymarie

ADDED MP3’s for the tracks!
β€ˆ

  • added the mp3’s for the music tracks, I tried several approaches for this like using cloudinary and git LFS, but those were having play/pause issues and storage issues so I just committed all of them to git, not the most efficient idea, but it works!
     

Changelog

0
grumpymarie

REMOVED SPOTIFY INTEGRATION, AND REPLACED IT WITH AN EMBED!
 

  • I tried using ai for the Spotify integration but it didnt work because I need Spotify premium for the WebAPI so a lesson to not use ai I guess. I replaced it with a spotify embed.
  • I also rewrote the playTrack function properly. before, it was just showing a the toast, and audio wasnt playing ;(
  • I also updated the tracks - cafe scape, forest scape, lofi, white noise and classical music on a deadline and also added art for the tracks (this art is not mine, just images found on the internet- the rest of the art mentioned is my art tho).
     

Changelog

Attachment
Attachment
0
grumpymarie

SPOTIFY INTEGRATION, and CAT WIDGET!
 

  • I rewrote the css to use custom properties instead of the hardcoded colors.
  • added a custom art background overlay of coffee beans.
  • added a theme switches to support both the dark and light colors. also added three new background colors, mist, dark roast, and forest.
  • added a spotify integration (that doesnt currently work), I did use AI for this cuz I couldnt for the life of me figure out why. (FUTURE UPDATE: its for Spotify Premium users only- the API, so I scrapped that completely later on, and just switched to an embed)
  • added task per sessions, so you can allocate the no. of session required for a particular task.
  • added a cat widget in the corner, on click, it bounces? and shows a random message using toast!!
     
    FIXES:
  • fixed the cup update so that it only swaps the image when the image actually changes and now unnecessary DOM changes arent required.
  • fixed the toast function, it was creating a new element instead of updating the existing one.
     

Changelog

Attachment
Attachment
Attachment
Attachment
0
grumpymarie

ADDED SIDEBAR TABS, SETTINGS, AND BACKGROUND COLORS!
 

  • added tabs to the sidebar for settings, music and tasks.
  • added settings tab with editable timer durations for focus, short break and long break. session dots are rebuilt according to the no of sessions.
  • added notifications
  • added background swatches to choose from for the background color in the settings panel. also added toggles for auto start break after focus and auto start focus after break.
  • added a music tab, with tracks like lofi, jazz, cafe scape, classical.
     

Changelog

0
grumpymarie

ADDED CUP ART, CUPS FILLING AS THE SESSION PROGRESSES AND BUG FIXES!
 

  • added the coffee cups (yes, I drew them- rather poorly, but nonetheless)
  • the cup fills up as the session progresses (the images change based on the % of the session, so the cup is filled 25% of the 25% mark, so on and so forth)
  • made the cup also clickable as play/pause button cuz why not? I felt like it should do something.
  • fixed the borders, made them a bit bigger
  • added checkboxes, hover and strikethrough (when completed) for tasks.
     
    BUGS FIXES:
  • I put break-msg in one place, and break-message, I think somewhere in HTML and somewhere in JS, dont remember where I put which, but in short there was a mismatch in the id and the function wasnt working, so I fixed that.
  • fixed the sidebar, it had a wrong color value (dot instead of a comma in the rgba) which was causing the section title to be not visible.
     

Changelog

Attachment
Attachment
0
grumpymarie

I was so burnt out from my last project so I wanted to make something that didnt need a whole ton of maths and physics, this is supposed to be that, something that brings me joy <3.
β €
its a coffee themed pomodoro timer.

  • added modes (focus- 25 mins, short break- 10 mins, long break- 15mins), and after every session a pop up asks you to take a break.
  • after every 4 session, you’ll be asked to take a long break- 15 mins.
  • added session dots at the bottom, they track where you are in the cycle of 4 sessions.
  • task list right now, is a plain array and re-renders on every change, so ill fix that in the next commit
  • basically added all the groundwork, the actual timer, some of the foundational css, js and stuff.
    β €
    TODO:
  • the task list re-renders when a new task is added, so fix that
  • add custom cups that fill up as the session progresses
    β €

Changelog

Attachment
0