JavaScript COUNTER PROGRAM 🔢

[@BroCodez]

// COUNTER PROGRAM
const increaseBtn = document.getElementById("increaseBtn");
const decreaseBtn = document.getElementById("decreaseBtn");
const resetBtn = document.getElementById("resetBtn");
const countLabel = document.getElementById("countLabel");
let count = 0;
increaseBtn.onclick = function(){
count++;
countLabel.textContent = count;
}
decreaseBtn.onclick = function(){
count--;
countLabel.textContent = count;
}
resetBtn.onclick = function(){
count = 0;
countLabel.textContent = count;
}


My website

0

decrease
reset
increase


#countLabel{
display: block;
text-align: center;
font-size: 10em;
font-family: Helvetica;
}
#btnContainer{
text-align: center;
}
.buttons{
padding: 10px 20px;
font-size: 1.5em;
color: white;
background-color: hsl(214, 100%, 74%);
border-radius: 5px;
cursor: pointer;
transition: background-color 0.25s;
}
.buttons:hover{
background-color: hsl(214, 100%, 56%)
}

[@EllisKankam]

Bro code please we need django course

[@SourovChandraBarmon]

Thanks a lot sir🥰

[@l-fitness3590]

After you showing the increase it was straight forward after that great video and fun little project

[@l-fitness3590]

1st day of learning javascript I managed to take this and make it so you get a point every time you hit a number which will give you a point using if statements

[@piotrmazgaj]

This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal.

[@rayyan-n9k]

bro thanks for your video not only I learned javascript but also css
keep up the good work

[@mr.kachoo8784]

I really enjoyed this, thanks for sharing!

[@pablosantos-bk4hy]

eu fiquei muito feliz, tentei fazer o reset sozinho, botei lá count = 0 e deu certo, foi o mesmo jeito que vc fez! ok i Will try in english ------- I am very happy because I try to do the reset part alone, and I put count = 0 and the result was the same of you!

[@peaklegacy146]

So sad that onLick doesn't work😭😛

[@Jayeffice]

I watch for the HUMOR first and the coding second..!
so glad he didn't disappoint :)

[@nevouxjulie6595]

Thank you, they aren't enough videos of people demonstrating !!

[@nikakuprashvili8235]

Thank you very much bro and good luck in this good work, you explain the best and most clearly on all TH-cam👌👋❤

[@folgediewahrheit2827]

That was very good, thank you very much. i like how you explain too.

[@stadx]

Hey bro, do you plan to bring a beginner's TypeScript playlist? Cheers.

[@Jayeffice]

Without the humor, dry mono tone oration , and I don't give crap about being politically correct, these are just another coding tut. Love em you never disappoint OnLick :0
It's as if Jamie King's Voice got three octaves higher, added some humor, and spoke at a better cadence.
No slam loved him when he was still posting vids.

[@jagdishjena9058]

Superb explanation sir.. Love the way you teach in a simple manner

[@helioobianchi]

Thanks, bro. You're a real bro 💪

[@Qtaro-oh]

how to recreate NASA database from scratch next ples

[@Hnxzxvr]

I’m done :)

[@Qtaro-oh]

@@Hnxzxvrdone with what

[@Hnxzxvr]

@ making the NASA db

[@Qtaro-oh]

@@Hnxzxvr send ples

[@codewhiz2.0]

i like how you explain those things bro code

[@nikakuprashvili8235]

next can you explain how to build windows form application with C# for begginers please

[@kaveenpspoorna7379]

Thankyou so much sir😊

[@medad1877]

you're the best.
let me know now I understand everything but still my problem I can't build the project alone just from ideas using Html &CSS even will I finish JS too, How can I will be the good programmer :( ?

[@johnzgallerie2827]

@BroCodez ur the man - OMG... how cool is this!!!

[@viniciusm.m.7822]

THANKS!

[@badreddineelkalai9052]

Hi, I come from a background where I learned JavaScript as a standalone coding language, without a specific focus on web development. Should I prioritize learning DOM manipulation first to adapt quickly, or are there other aspects I should consider?

[@hlahtunthein9455]

did you declare the tag before the html contents ??
then let the script tag put buttom after the html tags

[@manojmurugan590]

How to contact you about courses please reply

[@atifplaysfn5446]

Bro how you attach html or css page in one file

[@theoneandonly2441]

Thanks! Just a question, I saw your other video about the counter program and I was wondering what was the difference on using .textContent over .innerHTML to change the counter number on the js file?

[@huydo1784]

textContent: This property sets or returns the text content of the specified node and all its descendants. It treats everything as plain text, ignoring any HTML tags within the content. It's useful when you want to deal strictly with text and don't want any HTML formatting or interpretation.
Example:
const element = document.getElementById('exampleElement');
console.log(element.textContent); // Retrieves the text content
element.textContent = 'New text'; // Sets new text content
innerHTML: This property sets or returns the HTML content (including tags) of an element. It allows you to manipulate the HTML structure and content of an element directly. It's powerful but should be used carefully as it can execute scripts and potentially create security vulnerabilities if the content isn't sanitized properly.
Example:
const element = document.getElementById('exampleElement');
console.log(element.innerHTML); // Retrieves the HTML content
element.innerHTML = 'New HTML content'; // Sets new HTML content

[@murthysatti2035]

Hey bro can i know why you style class name although having id for div section in CSS file

[@Misterkennedy04]

transition is not working for me I typed ot the exact same way you did, I had to type color instead

[@NickTorius]

Mine didnt work

[@WaldeliceBraga]

Try again!
My did but I'll set aside some time to redo it later.

[@DamosyTheFreckle]

I did this, it is amazing! But everytime I refresh or close tab, I lose the number where I previously left off. How do I make it such that everytime I refresh, i still get the previously stored number?

[@Jamx971]

Hello ! thanks for this great content. I am trying to go further and I would like to not be able to go abo 0. I don't want -1 -2 etc...
I've tried to add "while (count > 0)" in the function but it doesn't work.
I am a beginner in JS but have some notions in Python.
Can you please give me a hint?
Thanks

[@Jamx971]

decreaseBtn.onclick =function(){
while (count>=1) {
count--;
}
countLabel.textContent = count;
}
What is wrong with this?

[@rafaelsfasie5347]

Hello! Can You make a course of VueJS? IT will be very usefull.

[@hunin27]

sorry for asking but if you could continue with the react tutorial ❤

[@alif.mahmud]

I believe this topic was in the js course...🎉

[@tadasmenulis8936]

yea same have some erros for numbers define or others commands maybe are some settings what need know

[@tadasmenulis8936]

or some drives what are special for promaers if those etc

[@manojmurugan590]

Bro upload React full video please

[@anonymous13378]

my humor is so broken that I laughed on onLick

[@persyout]

6:01

[@capslock3250]

Todo list?

[@Saksham_1718]

my live previewing is not working within the vs code , can anyone suggest what's wrong????

[@marialejandrachavez5379]

it doesnt work. help

[@pp04485]

i think assigning a constant to the buttons was unneccesary

[@codeguy11]

Me: Creating counter program
Me: Counting the times i failed/has bugs
Below is the counter I made and each like is the amount of times i fail
👇

[@SoftwareTechByVP]

Im put in increase de symbol + en decrease the symbol -

[@sportsknowledge92]

Hi bro code please make small small project like this

[@EllisKankam]

Bro code please we need django course

[@precious_reads]

I did it wooohooo🫡

[@1T_pressly]

Your moving fast 😭

[@Appwinkel]

This can an another way

[@TorabekRaufov-p8x]

random comment

[@rayforever]

TYPE SCRIPT !!! PLEASE BRO

[@samuraijack8255]

THANKS MAN