Pomodoro Timer Project | Only with HTML, CSS and JavaScript

In this video, I'll show you how to build a simple Pomodoro timer using HTML, CSS and JavaScript.
The Pomodoro technique is based on the idea that by dividing our workflow into blocks of intense concentration, we can improve brain agility and stimulate our focus.
==== Source code - (give it a star ⭐)
bit.ly/repo-po...
==== Live demonstration
bit.ly/live-po...
Like and Subscribe !!
===== ⏱ Times =====
Demonstration: 00:00
HTML: 00:16
CSS: 03:06
JS: 11:42
TimeLapse: 20:40
===== 🎵 Music =====
On My Way by Ghostrifter Official | soundcloud.com...
Music promoted by www.chosic.com...
Creative Commons CC BY-SA 3.0
creativecommon...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BLOOM by Uniq | soundcloud.com...
Music promoted by www.chosic.com...
Attribution 4.0 International (CC BY 4.0)
creativecommon...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Afternoon Nap by Ghostrifter Official | soundcloud.com...
Music promoted by www.chosic.com...
Creative Commons CC BY-SA 3.0
creativecommon...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Music: www.chosic.com...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Embrace by Sappheiros | soundcloud.com...
Music promoted on www.chosic.com...
Creative Commons Attribution 3.0 Unported (CC BY 3.0)
creativecommon...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
And So It Begins by Artificial.Music | soundcloud.com...
Licensed under Creative Commons: Attribution 3.0 Unported (CC BY 3.0)
creativecommon...
Music promoted by www.chosic.com...

[@ek-developer]

font-size: 62.5% --> 1rem = 10px

[@espio3364]

Beautiful! this was my first project
Thank you for such an Awesome Video :)

[@joaopedropinheiro3904]

Voltando a estudar webdev, ótimo projeto, me fez relembrar muita coisa

[@Jane-cq9ku]

Your counter missed 00 (after 1 starts 59). But nevertheless it helped me with my project, thank you!

[@gabrieldecastro5030]

if(seconds = 0) {
seconds = '0' + seconds;
}
if(seconds < 0) {
seconds = 59;
workMinutes = workMinutes -1;
}
if you guys want seconds to show a 0 on the left.

[@estebansantacruz3394]

how could you add the instructions that you had in the js file to the html at 13:18?
it is because of some VSC plugin?

[@ek-developer]

Are you talking about class="active"?
If so, the class was added before on the HTML at 7:57

[@amaningopoku]

Awesome tutorials.

[@sltho]

thanks for sharing. i like the design

[@luannguyenn]

what font did u use in VSCODE? thank you

[@varalta.floresta]

muito bom!

[@ek-developer]

Valeu! 🔥

[@minds_unchained]

Can you explain why we needed breakcount variable. And why we divided it % 2.

[@samuelgomez8656]

So if im not wrong, the breakCount (bC from now on) is used for counting when to start the breaks, so when the bC is an even number (That's why you start from zero) you know you are in a "work period" and when the bC is an odd number you know you are in a "break period"

[@fajrifarid5955]

i don't know why but, why my code isn't want to restart? when I click the restart icon it move to new page with the folder c(mine)?? anyone knows?

[@fajrifarid5955]

or is it the with the href="/" mean like i go back to my page again? so I can change to like a something like that?

[@ALEXANDER-jd4hw]

bom

[@Yang-pg5hp]

legal, ficou mt bom