loading...
Play Button Pause Button

🌍Countdown Timer/Pomodoro (JS + CSS) [YouTube LIVE]

eleftheriabatsou profile image Eleftheria Batsou ・1 min read

⬇️ In this video we will code a countdown timer, similar to Pomodoro clocks. You can schedule your own break, watch the countdown and also the time you have to return, or you can choose time/break by the predefined buttons.

Codepen: https://codepen.io/EleftheriaBatsou
Working project: https://codepen.io/EleftheriaBatsou/pen/bGVeWPP
Video tutorial: https://youtu.be/G7djKBUSiCk

P.S. OMG, I found what was wrong at the end of the video...
check out the first 4 lines of JS, it should be:

let countdown;
const timerDisplay = document.querySelector('.display_time-left');
const endTime = document.querySelector('.display
_end-left');
const buttons = document.querySelectorAll('[data-time]');

The inspiration for this project is coming by javascript30.


👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: paypal.me/eleftheriabatsou but If you can't that's ok too!


🙏It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.

🌈Youtube | Codepen | GitHub | Twitter | Site | Instagram

Posted on by:

eleftheriabatsou profile

Eleftheria Batsou

@eleftheriabatsou

⌨App developer, UX/UI enthusiast & content/youtube creator 🙆Here to share my passion && transfer/receive knowledge Loves to: ✈️🍪💃

Discussion

markdown guide