JavaScript COUNTER PROGRAM 🔢

Поделиться
HTML-код
  • Опубликовано: 27 дек 2024

Комментарии • 63

  • @BroCodez
    @BroCodez  Год назад +15

    // 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%)
    }

  • @l-fitness3590
    @l-fitness3590 11 месяцев назад +8

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

    • @l-fitness3590
      @l-fitness3590 11 месяцев назад +2

      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
    @piotrmazgaj 4 месяца назад +5

    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
    @rayyan-n9k Год назад +3

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

  • @mr.kachoo8784
    @mr.kachoo8784 Год назад +3

    I really enjoyed this, thanks for sharing!

  • @nevouxjulie6595
    @nevouxjulie6595 10 месяцев назад

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

  • @peaklegacy146
    @peaklegacy146 Год назад +18

    So sad that onLick doesn't work😭😛

    • @Jayeffice
      @Jayeffice Год назад +2

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

  • @pablosantos-bk4hy
    @pablosantos-bk4hy 7 месяцев назад +2

    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!

  • @nikakuprashvili8235
    @nikakuprashvili8235 Год назад +1

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

  • @folgediewahrheit2827
    @folgediewahrheit2827 11 месяцев назад +1

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

  • @jagdishjena9058
    @jagdishjena9058 3 месяца назад

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

  • @helioobianchi
    @helioobianchi 9 месяцев назад

    Thanks, bro. You're a real bro 💪

  • @codewhiz2.0
    @codewhiz2.0 Год назад +2

    i like how you explain those things bro code

  • @kaveenpspoorna7379
    @kaveenpspoorna7379 4 месяца назад

    Thankyou so much sir😊

  • @stadx
    @stadx Год назад +2

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

  • @badreddineelkalai9052
    @badreddineelkalai9052 10 месяцев назад +1

    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?

  • @Jayeffice
    @Jayeffice Год назад +1

    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.

  • @hlahtunthein9455
    @hlahtunthein9455 5 месяцев назад

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

  • @medad1877
    @medad1877 Год назад +2

    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 :( ?

  • @nikakuprashvili8235
    @nikakuprashvili8235 Год назад +2

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

  • @murthysatti2035
    @murthysatti2035 12 дней назад

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

  • @DamosyTheFreckle
    @DamosyTheFreckle 5 месяцев назад

    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?

  • @Qtaro-oh
    @Qtaro-oh Год назад +6

    how to recreate NASA database from scratch next ples

    • @Hnxzxvr
      @Hnxzxvr 27 дней назад +2

      I’m done :)

    • @Qtaro-oh
      @Qtaro-oh 27 дней назад +1

      @@Hnxzxvrdone with what

    • @Hnxzxvr
      @Hnxzxvr 27 дней назад +2

      @ making the NASA db

    • @Qtaro-oh
      @Qtaro-oh 27 дней назад

      @@Hnxzxvr send ples

  • @theoneandonly2441
    @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
      @huydo1784 Год назад +2

      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

  • @Jamx971
    @Jamx971 4 месяца назад

    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
      @Jamx971 4 месяца назад

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

  • @Misterkennedy04
    @Misterkennedy04 5 месяцев назад

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

  • @Saksham_1718
    @Saksham_1718 4 месяца назад

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

  • @alif.mahmud
    @alif.mahmud Год назад

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

  • @atifplaysfn5446
    @atifplaysfn5446 Год назад +1

    Bro how you attach html or css page in one file

  • @rafaelsfasie5347
    @rafaelsfasie5347 7 месяцев назад

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

  • @NickTorius
    @NickTorius 6 месяцев назад +1

    Mine didnt work

    • @WaldeliceBraga
      @WaldeliceBraga 5 месяцев назад

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

  • @tadasmenulis8936
    @tadasmenulis8936 Год назад

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

    • @tadasmenulis8936
      @tadasmenulis8936 Год назад

      or some drives what are special for promaers if those etc

  • @hunin27
    @hunin27 Год назад

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

  • @manojmurugan590
    @manojmurugan590 Год назад

    How to contact you about courses please reply

  • @pp04485
    @pp04485 5 месяцев назад

    i think assigning a constant to the buttons was unneccesary

  • @SoftwareTechByVP
    @SoftwareTechByVP 10 месяцев назад

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

  • @codeguy11
    @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
    👇

  • @anonymous13378
    @anonymous13378 10 дней назад

    my humor is so broken that I laughed on onLick

  • @manojmurugan590
    @manojmurugan590 Год назад

    Bro upload React full video please

  • @capslock3250
    @capslock3250 Год назад

    Todo list?

  • @precious_reads
    @precious_reads Год назад +1

    I did it wooohooo🫡

  • @sportsknowledge92
    @sportsknowledge92 11 месяцев назад

    Hi bro code please make small small project like this

  • @Appwinkel
    @Appwinkel 22 дня назад

    This can an another way

  • @1T_pressly
    @1T_pressly Год назад

    Your moving fast 😭

  • @EllisKankam
    @EllisKankam Год назад

    Bro code please we need django course

  • @TorabekRaufov-p8x
    @TorabekRaufov-p8x 2 месяца назад

    random comment

  • @rayforever
    @rayforever Год назад +2

    TYPE SCRIPT !!! PLEASE BRO

  • @samuraijack8255
    @samuraijack8255 6 месяцев назад

    THANKS MAN