Build this JS calculator in 15 minutes! 🖩

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 พ.ย. 2024

ความคิดเห็น • 470

  • @BroCodez
    @BroCodez  11 หลายเดือนก่อน +299

    IMPORTANT NOTE: eval() allows you to execute a string of code as if it were actual JavaScript code.
    While it is a useful tool, it is a security risk. I would recommend using eval() ONLY for learning purposes and not any actual production code.
    // CALCULATOR PROGRAM
    const display = document.getElementById("display");
    function appendToDisplay(input){
    display.value += input;
    }
    function clearDisplay(){
    display.value = "";
    }
    function calculate(){
    try{
    display.value = eval(display.value);
    }
    catch(error){
    display.value = "Error";
    }
    }


    Document




    +
    7
    8
    9
    -
    4
    5
    6
    *
    1
    2
    3
    /
    0
    .
    =
    C



    body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: hsl(0, 0%, 95%);
    }
    #calculator{
    font-family: Arial, sans-serif;
    background-color: hsl(0, 0%, 15%);
    border-radius: 15px;
    max-width: 500px;
    overflow: hidden;
    }
    #display{
    width: 100%;
    padding: 20px;
    font-size: 5rem;
    text-align: left;
    border: none;
    background-color: hsl(0, 0%, 20%);
    color: white;
    }
    #keys{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 25px;
    }
    button{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: none;
    background-color: hsl(0, 0%, 30%);
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    }
    button:hover{
    background-color: hsl(0, 0%, 40%);
    }
    button:active{
    background-color: hsl(0, 0%, 50%);
    }
    .operator-btn{
    background-color: hsl(35, 100%, 55%);
    }
    .operator-btn:hover{
    background-color: hsl(35, 100%, 65%);
    }
    .operator-btn:active{
    background-color: hsl(35, 100%, 75%);
    }

    • @skappy2000
      @skappy2000 11 หลายเดือนก่อน +15

      Hey bro code big fan here
      I was thinking will you make website projects using html, css and js?
      It will help a lot with people understanding more better in that way
      Portfolio-worthy projects

    • @mirmumit3888
      @mirmumit3888 10 หลายเดือนก่อน

      Can u plz tell me, how to change the only color of the text "Error" on the calculator display?

    • @skappy2000
      @skappy2000 10 หลายเดือนก่อน

      ​@@mirmumit3888
      Use the display.style.color property in script.js file
      function calculate(){
      try{
      display.value = eval(display.value);
      display.style.color = 'white'; // Set text color to white after successful calculation
      }
      catch(error){
      display.value = "Error";
      display.style.color = 'red'; // Set text color to red for error message
      }
      }

    • @SiiamW
      @SiiamW 9 หลายเดือนก่อน +5

      Hey clicking ''." more than once is an error too. this program is slightly wreaked.

    • @oli3641
      @oli3641 9 หลายเดือนก่อน +4

      @@SiiamW well obviously, because 2..4 is not a valid float or integer

  • @alvinderama3196
    @alvinderama3196 11 หลายเดือนก่อน +399

    Watching something being created from scratch is pretty entertaining and educational.

  • @vc6218
    @vc6218 6 หลายเดือนก่อน +52

    one of the few videos on here that breaks it down simply. I already understood a bit of html and css - javascript hasn't made that much sense to me until now. Thank you!

    • @Podlols
      @Podlols หลายเดือนก่อน +1

      sooo can you understand js now ??

  • @doronfeldman5152
    @doronfeldman5152 11 หลายเดือนก่อน +93

    You have the best programming channel, I learn html, css, javascript and python in your channel

    • @SinmisolaJohnson
      @SinmisolaJohnson 13 วันที่ผ่านมา

      That is crazy. Hope you practice daily.

  • @loosabway3400
    @loosabway3400 3 หลายเดือนก่อน +3

    I'm a teacher and found this to be well-paced, explained in more detail where necessary without getting bogged down in stuff students can research for themselves, and fun.
    Well done.

  • @nergizken
    @nergizken 10 วันที่ผ่านมา +1

    That was easily the most clear-cut project-guide I've come across. Though building a calc isn't rocket science but due to your explanation it was even more understandable! Thank you

  • @DanielBrownsan
    @DanielBrownsan 4 หลายเดือนก่อน +56

    Me: (Imagining 15-20 lines of code)
    Lesson: "One line using eval does it."
    I would be curious to see this done without eval. This feels like one of those, "Well, you CAN do it that way, but you shouldn't" situations. Great stuff!

    • @amineaheddare4918
      @amineaheddare4918 2 หลายเดือนก่อน +5

      i did it and as a beginner it was a hell 😅

  • @syroxdxd
    @syroxdxd 7 หลายเดือนก่อน +2

    I just have to say that you are amazing. I had an introduction class in java and I missed every lecture. I whatched the first 5 hours of your 12hr java course and I passed the exam. You are an amazing teacher. Better than the ones I have at univerity :)

  • @f4sma
    @f4sma 7 หลายเดือนก่อน +19

    Your tone of the voice, the way you explain what you are doing.. it's perfect. Subbed!

    • @Prakash-i7y
      @Prakash-i7y 4 หลายเดือนก่อน +1

      tk

  • @watchdoggie8145
    @watchdoggie8145 7 หลายเดือนก่อน +12

    Super thankful for the awesome instructions! keep up the good work.

  • @arjunpailoor4559
    @arjunpailoor4559 2 หลายเดือนก่อน +5

    Thanks for this. a backspace button could be added,

  • @petersagan370
    @petersagan370 5 หลายเดือนก่อน +17

    You shouldve added a function that prevents entry of another decimal point once it has been added to the display once.
    For example, once you enter 3.14, you cant add another decimal point until you enter an operator such that (3.14159.3123) wont be possible to enter in the display

  • @Nanashi_29
    @Nanashi_29 8 หลายเดือนก่อน +7

    Best channel about programming

  • @sogwafl
    @sogwafl 11 หลายเดือนก่อน +40

    I have a terrible Java Professor, cant retain an oz of her teaching. So I exclusively built my own syllabus off your java topic vids and passed. You are doing gods work and are great at helping my dumbass retain all this info.

    • @ent.8979
      @ent.8979 11 หลายเดือนก่อน +8

      youre not a dumbass, some teachers just don't know how to teach and make the subject impossible to understand. And that's mostly college professor. That's why learning from the internet is becoming more and more valid

    • @russellhan3534
      @russellhan3534 10 หลายเดือนก่อน

      @@ent.8979facts, attending college literally for the degree

    • @lintee_12
      @lintee_12 10 หลายเดือนก่อน +5

      @@ent.8979 i mean its probably because he was getting taught real programming fundamentals... he didn't even know that this was javascript not java

    • @shush5878
      @shush5878 3 หลายเดือนก่อน +5

      bros prof is so bad he thought this was Java

  • @pope1089
    @pope1089 9 หลายเดือนก่อน +31

    Just started coding, That video helped alot. Straight to the point. I,ll have to check your other videos out before i start asking questions about eval() ans security risks. Thanks

    • @yateen-hi9er
      @yateen-hi9er 8 หลายเดือนก่อน +2

      share some resorses with i am a beginner too

    • @Hub_Comments
      @Hub_Comments หลายเดือนก่อน

      ​@@yateen-hi9er Sololearn or mimo for course(I'm not sure about mimo and sololearn is more popular, I use it too.) W3schools website, freecodecamp TH-cam channel

  • @RajagopallanV
    @RajagopallanV 6 หลายเดือนก่อน +3

    After seeing other videos of writing the code for Calculator app, I find yours the best and easy to understand and needs less lines of code. Thank you very much for uploading this.

  • @He_Roll2024
    @He_Roll2024 8 หลายเดือนก่อน +5

    Few codes but precised. I'm amazed bro.

  • @Azufunnycomedy
    @Azufunnycomedy 12 วันที่ผ่านมา

    one of the best designs i have ever seen

  • @bama2619
    @bama2619 หลายเดือนก่อน

    never thought it could be that easy, thank you for the explanation

  • @Andrew-y7l
    @Andrew-y7l 10 หลายเดือนก่อน +7

    I think this was the easiest calculator build and explanation from any other youtube channel

    • @samueldayo9261
      @samueldayo9261 10 หลายเดือนก่อน

      Was about to comment this yesterday it is the best

  • @petersimthobele
    @petersimthobele 8 หลายเดือนก่อน +3

    I learnt a lot from this video in 15 min 👏👌

  • @habibousy8723
    @habibousy8723 6 หลายเดือนก่อน

    GREAT I'm senegalese and my english is not perfect but I learn a lot because of you😎😎😎. My javascript futur will be bright with you😎😎

  • @reptilianis577
    @reptilianis577 11 หลายเดือนก่อน +12

    Another useful video! I am waiting for more ;)

    • @Prakash-i7y
      @Prakash-i7y 4 หลายเดือนก่อน

      supper

  • @miladevs
    @miladevs 5 หลายเดือนก่อน

    Awesome video! I love the clear explanations and the styling tips. Incorporating functional programming principles, like using pure functions, could further enhance the calculator’s logic. It would be interesting to see how this approach can make the code more concise and testable. Keep up the great work! 👍

  • @0cactus
    @0cactus 4 หลายเดือนก่อน

    Thanks, I know a little JavaScript, but unable to build beautiful design in html with css. Now I understood some interesting conceptions about css styling and feel ready to learn css.

  • @ritechaserious
    @ritechaserious 4 หลายเดือนก่อน +1

    sir i loved it. It helped a lot in confidence building as a beginner

  • @Miko-kc9td
    @Miko-kc9td 2 หลายเดือนก่อน

    Awesome, clear instructions and straigth to the point.

  • @esatkurtul451
    @esatkurtul451 10 วันที่ผ่านมา

    you can use
    button:nth-child(4n-3) {
    background-color: hsl(39, 100%, 50%);
    }
    instead of .operator-btn class

  • @piotrmazgaj
    @piotrmazgaj 4 หลายเดือนก่อน +2

    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.

    • @bennymeister
      @bennymeister 4 หลายเดือนก่อน +1

      this is my seal 🦭

  • @zxot14
    @zxot14 7 หลายเดือนก่อน

    I don't understand code that well but something about his videos is just so therapeutic.

  • @muhammet_05
    @muhammet_05 11 หลายเดือนก่อน +8

    Thanks for those teaching video. i love it ❤

  • @mohamedahsan4710
    @mohamedahsan4710 3 หลายเดือนก่อน

    Bro deserves recognition!!!!

  • @artisticmohan5544
    @artisticmohan5544 3 หลายเดือนก่อน

    Thanks Mate. Really helped with my project.

  • @Alauddindipu
    @Alauddindipu 3 หลายเดือนก่อน

    Excellent.
    In short, you did a lot!

  • @abhisasmal271
    @abhisasmal271 19 วันที่ผ่านมา

    U can also make it a typable one by removing the 'readonly'. Its easier then just clicking buttons

  • @Zahraalishahan
    @Zahraalishahan 5 หลายเดือนก่อน

    woow! easiest way to create a calculator..i did it because ov u..thankuu so much:)

  • @cheaterlp23
    @cheaterlp23 7 หลายเดือนก่อน

    My version didn't work, so I searched for a while.
    Guess what the error was.
    Correct:
    My version:
    =_=
    Anyway, really useful video, learned a lot.

  • @hunin27
    @hunin27 11 หลายเดือนก่อน +17

    Wow, then what we are doing is pretty much just styling. I had no idea javascript had a "built-in" calculator inside of a function!!

    • @BroCodez
      @BroCodez  11 หลายเดือนก่อน +9

      eval() runs a JS expression dynamically at runtime. It can be a security risk tho

    • @hunin27
      @hunin27 11 หลายเดือนก่อน

      oh, well im pretty sure its not that hard to make a calculator without using it. i mean eval is a function and we could just recreate it@@BroCodez

    • @QuantumCanvas07
      @QuantumCanvas07 9 หลายเดือนก่อน

      You can have 100 years of JS experience but still be encountering something damn new 💀 Just a beauty of coding

    • @bhaveshjadav804
      @bhaveshjadav804 3 หลายเดือนก่อน +1

      @@BroCodez hey bro there is a error in this code when i click any mathematical sign(+,-,*,/) more that 2 time it display on the screen . for example if i click + button 2 times then it display 2 time like this (2++2) ,please solve this error

    • @daeltam
      @daeltam 15 วันที่ผ่านมา +1

      @@bhaveshjadav804 That's not an error in the way that you can print whatever you want on the display there is no limit, same thing for . we can write 3.1415.926 which is not correct. It would need some checking that i don't know how to do.

  • @levon9
    @levon9 5 หลายเดือนก่อน

    Wow .. FANTASTIC - thank you so much for this. Going to look for other videos like this from you. (also subscribed :)

  • @naglakandeel3152
    @naglakandeel3152 7 หลายเดือนก่อน

    best teacher ever continue ❤

  • @hurricanos13
    @hurricanos13 11 หลายเดือนก่อน +1

    One of the best coding channel aside with the legendary new boston Bucky Roberts. but i think this channel stuff is also hated by youtube algorithms

  • @Aim00108
    @Aim00108 5 หลายเดือนก่อน

    thank you bro for introducing me with "value" method

  • @elitetatsuya
    @elitetatsuya 10 หลายเดือนก่อน +1

    iPadOS developers should watch this

  • @jacksondidas9403
    @jacksondidas9403 3 หลายเดือนก่อน

    Thank you very much, I understand and it helped me a lot

  • @SamialFardin
    @SamialFardin 3 หลายเดือนก่อน

    Thanks you so much bro ❤❤
    Keep it DOING ❤❤❤❤

  • @niyonkuruinnocent17
    @niyonkuruinnocent17 8 หลายเดือนก่อน

    You're the best teacher ❤

  • @TheRealKingofCubing
    @TheRealKingofCubing 7 หลายเดือนก่อน

    This is teaching me so much amazing video

  • @hariharasudhans7828
    @hariharasudhans7828 2 หลายเดือนก่อน

    Definitely Impressive🤩🤩

  • @wonders8410
    @wonders8410 7 หลายเดือนก่อน +2

    Hey just want to let you know that there is an error in the code that you have presented if you do 7+ =you know it equals an error but that error is a text and you can do something like Error + 7 = FUNCTION ERROR() {[NATIVE CODE]}

  • @jiyoungkim9258
    @jiyoungkim9258 10 หลายเดือนก่อน

    you literally give me confidence

  • @12karmel12
    @12karmel12 11 หลายเดือนก่อน

    thank you for making daily javascript videos

  • @aminahshentour8002
    @aminahshentour8002 6 หลายเดือนก่อน

    Never understood JS as much as i did now. I am a loyal fan. Thank you

  • @JibinSajuJoseph
    @JibinSajuJoseph หลายเดือนก่อน

    Awesome!
    I noticed when display.value is “Error” then input is appended to it (e.g., “Error123”).
    Fix:
    function appendToDisplay(input) {
    if (display.value == "Error") {
    clearDisplay();
    display.value += input;
    } else {
    display.value += input;
    }
    }

  • @qwi-yu4xf
    @qwi-yu4xf 5 หลายเดือนก่อน

    В августе 2023 я смотрел его видео по html и css за 7 часов вроде. Я его просмотрел за 7 дней по 1.30 если не ошибаюсь. И 8 июня я смотрю его же видео, но про то 'как сделать калькулятор на js'))

  • @MariaMutima-s6c
    @MariaMutima-s6c หลายเดือนก่อน

    Very much for every developer

  • @Zaynahazlanworld
    @Zaynahazlanworld 5 หลายเดือนก่อน

    thanku .i hv done some typo mistake ,but handle it through chatgpt.thanks for the code

  • @godcomplex1929
    @godcomplex1929 11 หลายเดือนก่อน +6

    Sir, I think we are due a database tutorial.
    I was tryna learn on MariaDB since it was free but couldn't get anywhere without your detailed guide.

  • @Oh_Sayang
    @Oh_Sayang 11 หลายเดือนก่อน +1

    Now my iPad can finally have a calculator app lol

  • @armandopena5508
    @armandopena5508 8 หลายเดือนก่อน +2

    I was hopping to see how you made the actual calculation taking into account that eval is not safe, it would be awesome if you could share how to make a function that at least calculates some basic mathematical operations since this is a very basic project that many people who are starting in programming make, usually without adding the funcitonality, when parsing the math operation is the most important thing of this project!. Great content!

    • @shjsbsbs7186
      @shjsbsbs7186 8 หลายเดือนก่อน

      Agree, eval is not safe for newbie

    • @larslover6559
      @larslover6559 7 หลายเดือนก่อน

      Theres several nice tutorial on python to make calculator without the eval function. There you really see it hard coded from scractch!

  • @elisabethkolar9364
    @elisabethkolar9364 8 หลายเดือนก่อน +1

    super cool, thank's a lot

  • @volinh6386
    @volinh6386 10 หลายเดือนก่อน

    your style' css so good , it very butufu

  • @buriedbones-nh9xr
    @buriedbones-nh9xr 5 หลายเดือนก่อน

    "Every programmer should code his own calculator, at least a dozen times"
    - Inventor of C++, Bjarne Stroustrup

  • @neerajmeka25
    @neerajmeka25 9 หลายเดือนก่อน +1

    Great Project had fun to build this project, u got a new sub will check your more videos

  • @mohsenvanc
    @mohsenvanc 7 หลายเดือนก่อน

    that is amazing, thank you

  • @venug2617
    @venug2617 4 หลายเดือนก่อน

    Beautiful presentation.....

  • @hada31
    @hada31 7 หลายเดือนก่อน

    function calculate() {
    try {
    display.value = math.evaluate(display.value);
    } catch (error) {
    display.value = "Error";
    }
    }

  • @namanthacker
    @namanthacker 8 หลายเดือนก่อน

    Very nice video
    Thanks!!

  • @BaljinderKaur-hd4dj
    @BaljinderKaur-hd4dj 5 หลายเดือนก่อน

    really helpful. Thanks a lot

  • @leobertobittencourtfilho3036
    @leobertobittencourtfilho3036 7 หลายเดือนก่อน

    I wish (and I'm trying to) that I could code at this level. Honestly!

  • @Newbtube92
    @Newbtube92 6 หลายเดือนก่อน

    Great tutorial!

  • @4chillingout
    @4chillingout 8 หลายเดือนก่อน

    So educational video ever seen

  • @esclevi
    @esclevi 2 วันที่ผ่านมา

    Your explanation is perfect!!!! However, which method would be more conducive to production without compromising the security of the system?

  • @PyTechUz
    @PyTechUz 2 หลายเดือนก่อน +1

    bro thank you 👍

  • @sandippandey9181
    @sandippandey9181 3 หลายเดือนก่อน

    Pretty Awesome !done

  • @thegoldgamer6339
    @thegoldgamer6339 10 หลายเดือนก่อน

    bro knows 4 programming languages bros a god

  • @samikshakittur1078
    @samikshakittur1078 2 หลายเดือนก่อน

    Thank you so much!!

  • @khushantwankhede8311
    @khushantwankhede8311 9 หลายเดือนก่อน

    thankyou for such a useful content.

  • @marianoduarte1505
    @marianoduarte1505 8 วันที่ผ่านมา

    Great and all of that, it was really useful but you sound like Josh from Let's Game it Out, was expecting something to blow up in all directions

  • @MufareezMMM
    @MufareezMMM 15 วันที่ผ่านมา

    best ... one . thank you

  • @hunters1212
    @hunters1212 4 หลายเดือนก่อน

    Really nice explanation

  • @Thug9TomABQ
    @Thug9TomABQ 4 หลายเดือนก่อน

    how can someone be so smart

  • @Zaher24
    @Zaher24 6 หลายเดือนก่อน

    Why so simple?!?
    Thanks!

  • @kingshahzad78
    @kingshahzad78 3 หลายเดือนก่อน

    Outstanding❤

  • @fk2780
    @fk2780 17 วันที่ผ่านมา

    //You're amazing bro!//

  • @paraglide01
    @paraglide01 11 หลายเดือนก่อน +2

    Wauw, thanks man this is great. Making a calculator creates so many ideas for apps that need input and calculating.

  • @Inke7
    @Inke7 11 หลายเดือนก่อน

    Thank you kind sir!

  • @coderprakash
    @coderprakash 11 หลายเดือนก่อน

    Hi please make a complete tutorial on typescript 🙏 i followed ur javascript and react thanks alot ❤️🔥 love from India, I know Frontend development because of u please consider my request and make typescript full tutorial

  • @foxstarr9508
    @foxstarr9508 4 วันที่ผ่านมา +1

    11months later and still helped 👍. but the js doesn't work and i've re written it 4 times 😢

  • @kursatepik5197
    @kursatepik5197 11 หลายเดือนก่อน

    you are a hero brother

  • @FrankAnyalewechi
    @FrankAnyalewechi 4 หลายเดือนก่อน

    Just like the iPhone calculator, Great

  • @argagan2609
    @argagan2609 10 หลายเดือนก่อน +2

    lemme share this video with the ipad developers.

  • @PurplexSKyo
    @PurplexSKyo 11 หลายเดือนก่อน +6

    Hello Bro Code
    I love your videos, I try to learn C by looking your videos and its amazing
    I know its a litter bit late for tell you this but can you please do a tutorial learn Lua please if its don't mind you
    Thanks you for having the time to look the lines and keep continute
    I love your videos👍🏾👍🏾

    • @mcpigeon6908
      @mcpigeon6908 11 หลายเดือนก่อน +2

      yes I'd love to learn Lua too :)

  • @siampro3891
    @siampro3891 10 หลายเดือนก่อน +1

    BEST👍👍👍👍

  • @OkenuObinna
    @OkenuObinna 9 วันที่ผ่านมา

    Thank you Sir, this was really helpful. #nigeria

  • @hunin27
    @hunin27 11 หลายเดือนก่อน +1

    Thanks!!!

  • @ChristianChinakuezeofficial
    @ChristianChinakuezeofficial 2 หลายเดือนก่อน

    Nice tutorial sir

  • @pratyushmishra77
    @pratyushmishra77 2 หลายเดือนก่อน

    Thanks bro 🙌

  • @mmafights__
    @mmafights__ 9 หลายเดือนก่อน

    soooooo useful thankssssss❤❤

  • @fireflysemanticsmedia6267
    @fireflysemanticsmedia6267 4 วันที่ผ่านมา

    Cool!!

  • @saqlain0902
    @saqlain0902 2 หลายเดือนก่อน

    wooah you made it easy