How to make a Calculator using HTML CSS JavaScript

Поділитися
Вставка
  • Опубліковано 30 вер 2024

КОМЕНТАРІ • 831

  • @codetraversal
    @codetraversal  Рік тому +227

    If you like this video, please don't forget to like and subscribe to this channel🙂.

    • @safwankhattak9769
      @safwankhattak9769 Рік тому +5

      mam mera ek error a raha hai jab me calculator me koi bhi button press karta hun to wo bohttt likh deta hai jese 9 press kiy to ye a jata hai
      99999999999999999999
      same esi tara har word ye kya problem hai ?
      mene full copy kiya hai still ye a raha hai

    • @codetraversal
      @codetraversal  Рік тому +5

      Aapne kahi addEventListener all buttons pe to nhi laga diya. Check I have applied the listener on button variable that is used inside forEach loop not on the buttons variable. And use consoe.log() to check how many times your event is running on click of a button. button and buttons are two different variables. You can use different names of variables to avoid confusion.

    • @sushilkanhar7250
      @sushilkanhar7250 Рік тому +3

      Mam equal button work nehi kar Raha hei jitna research karneke bad v
      Problem - equal symbol show ho Raha hei
      Agar 1+2= press karuta 1+2= Output heraha hei please solution bata do🙏🙏

    • @codetraversal
      @codetraversal  Рік тому +3

      First evaluate the output string using eval() function and then pass that string to the input or your display.

    • @rahuladkar6649
      @rahuladkar6649 Рік тому +6

      @@safwankhattak9769 use this Code : -
      let input = document.getElementById('inputBox');
      let buttons = document.querySelectorAll('button');
      let string = "";
      let arr = Array.from(buttons);
      arr.forEach(button => {
      button.addEventListener('click', (e) => {
      try {
      if (e.target.innerHTML == '=') {
      string = eval(string);
      input.value = string;
      } else if (e.target.innerHTML == 'AC') {
      string = "";
      input.value = string;
      } else if (e.target.innerHTML == 'DEL') {
      string = string.substring(0, string.length - 1);
      input.value = string;
      } else {
      string += e.target.innerHTML;
      input.value = string;
      }
      } catch (err) {
      console.log('Error:', err.message);
      input.value = 'Error';
      string = '';
      }
      })
      });

  • @APK519
    @APK519 11 місяців тому +3

    Ek calculator ke liye itni coding HTML CSS Javascript 3 3 jga coding
    M to hello world likh khud ko web developer smjhne lga tha 😅
    Ma'am apki salary kitni hogi 🤔

  • @adeebkhan8531
    @adeebkhan8531 Рік тому +84

    I recently discovered this channel and found it extremely useful in terms of learning. Plus I really liked your way of teaching (simple and easy). Thanks :)

  • @Rapunzel-mo9ur
    @Rapunzel-mo9ur Рік тому +21

    There is a bug in your js code. (For example for the input 9%*3 = nothing happened. So, the user will get confused.)
    Use try-catch to throw a "syntax error ".
    Btw Thank you for ur amazing afford ma'am.

    • @nikethdonthula2123
      @nikethdonthula2123 Рік тому +8

      Yes that is a bug and here is the code to get rid of it :
      This is the code for only the If part
      if(e.target.innerHTML == '=')
      {
      try {
      string = eval(string);
      if(isNaN(string))
      {
      throw new Error('')
      }
      input.value = string;

      } catch (error) {
      input.value = "Syntax Error";
      setTimeout(()=>{
      input.value = "";
      },2000)
      }
      }

    • @Rapunzel-mo9ur
      @Rapunzel-mo9ur Рік тому +1

      @@nikethdonthula2123 why don't use chatgpt instead😉

    • @sourabhpunase873
      @sourabhpunase873 Рік тому

      We can use" ===" instead of==

    • @ShubhankarSharma-vr6zg
      @ShubhankarSharma-vr6zg Рік тому

      ​@@Rapunzel-mo9urin debugging?

  • @VashishthGhevariya-x8l
    @VashishthGhevariya-x8l 8 місяців тому +27

    you are such a good teacher i saw on UA-cam and your voice is so cute, sweet and listenable

  • @MohitBarkhe
    @MohitBarkhe Рік тому +26

    बिल्कुल तसल्ली से और सबसे आसान तरीके से .. HTML, CSS और JAVASCRIPT की सहायता से आपने CALCULATOR बनाना बताया !
    शुक्रिया ...

    • @codingwallah-ou1hm
      @codingwallah-ou1hm 6 місяців тому

      Subscribe for learn coding : ua-cam.com/users/postUgkx1oxDYQjpogD0gq03eQ74_2kEls9KvIY2

  • @Deepty_kk_20
    @Deepty_kk_20 8 місяців тому +1

    Hlo , isme percentage wala button kaise kam krega plzz bata dijiye

  • @RonakSinha45
    @RonakSinha45 3 місяці тому +25

    Finally someone using HTML CSS and JS very perfectly

  • @learnerboy-kc9fd
    @learnerboy-kc9fd Рік тому +19

    Wow, what an amazing teaching method! The way you delivered it is outstanding.

  • @beMdgamer
    @beMdgamer Рік тому +36

    Didi ap Script part ko thoda aur explain kar dete to achha hota. Kiuki jisko bhi Js nehi ata he bobhi samjh jata. This is my point of view.

    • @codetraversal
      @codetraversal  Рік тому +14

      Thanks for the feedback. I'll try from next time.

    • @premrathod11
      @premrathod11 Рік тому +2

      Script is JavaScript used and writing program

    • @romeeovlogs4148
      @romeeovlogs4148 Рік тому +1

      Isme string property can not create bata raha hai

  • @jahnavi.youtube
    @jahnavi.youtube Місяць тому +3

    omggg thank you so much !
    i made my 1st calculator!
    your explanation is so good!

  • @marvelouscoder
    @marvelouscoder Рік тому +5

    Wowwww😮😮😮😮😮

  • @umutkaraagac5871
    @umutkaraagac5871 9 місяців тому +2

    I emjoyed your teaching method but sometimes there is no way to understand which language you talk :)

  • @Mayank_Bisht_MB
    @Mayank_Bisht_MB Рік тому +1

    same code, code with harry ka hai. Jo bhi ho samjha diya vahi bahut hai.

  • @ishuflachere
    @ishuflachere Рік тому

    Dimdi ji apne (X) included krna bhul gyi😢

  • @nrsmartlife6470
    @nrsmartlife6470 Рік тому +5

    Nice tut very easy to understand looking forward for more tuts

  • @DigitalDesignDrive
    @DigitalDesignDrive 15 днів тому +1

    improve your teaching skills 🤫🤫🤫

  • @GamerMohityadav
    @GamerMohityadav 11 місяців тому +1

    Hii, Yours Voice is so amazing so i'm thinking how was you look like...

  • @mindmdknowledge932
    @mindmdknowledge932 Рік тому +1

    Mujhe apki voice bahut mst lgi

  • @coding-journey22
    @coding-journey22 5 місяців тому +8

    % is not working properly 😷

  • @nishantraj2838
    @nishantraj2838 Рік тому +2

    Can u please make a tutorial in javascript btw love from Bihar😉

  • @M1_sandeep21
    @M1_sandeep21 3 місяці тому +1

    Hello ma'am
    Vs code pr code write kr liya hai structure and view to same hai and axa dikh rha hai but working calculation ni kr rha 2 din se pareshan hu & 3 time code bhi check kr chuka hu ... Help kriye

  • @abhishekkr8077
    @abhishekkr8077 Рік тому +1

    Eval wala kaam nhi kr rha hai = button not working in chrome and ms edge what to do?

  • @YoYoNo.1official
    @YoYoNo.1official Рік тому +1

    THanks didi♥️✨

  • @cydexcode
    @cydexcode Рік тому +12

    once the video is posted by "code traversal" you know that you are going to understand everything quickly... thanks for everything that you teach us... i hope you will never stop teaching cause you are a very good teacher.... much love.....

  • @mathsgames1074
    @mathsgames1074 Рік тому +1

    Thanks for it bro the source

  • @bilalhussain5161
    @bilalhussain5161 10 місяців тому +2

    Your method of explanation is very good....I was very impressed.☺ And have you upload a full course on JavaScript...🙄

  • @LofiQuran-sp6nw
    @LofiQuran-sp6nw 11 місяців тому +1

    Hello can anybody help me i display of calculator is not showing

  • @dhvanitrivedi8618
    @dhvanitrivedi8618 11 місяців тому +1

    Mem html css, javascript, reactjs node js angler js bhi sikhado

  • @bisarsalhan4601
    @bisarsalhan4601 Рік тому +1

    "Uncaught TypeError: Cannot set properties of null (setting 'value') " how can i solve this problem? PLEASE HELP MEEEE!!!!

  • @death_note-o8d
    @death_note-o8d 9 місяців тому +1

    Ma'am how to open index HTML right side page

  • @hpsilentboy2951
    @hpsilentboy2951 10 місяців тому +1

    I have a problem my equal button color not change how can i change

  • @ripanulalamridoy9706
    @ripanulalamridoy9706 10 місяців тому +1

    In your input box css box shadow not work, cause your color mention is wrong rgbs, which is actually rgba. It’s a type mistake

    • @codetraversal
      @codetraversal  10 місяців тому

      Yeah it's a typo. Thanks for mentioning.

  • @shubhamuniyal9047
    @shubhamuniyal9047 Рік тому +3

    I'm your fan now 😁

  • @AnirbanKar-yd9yv
    @AnirbanKar-yd9yv 7 місяців тому +1

    thank all of you .mame

  • @Coding_love_
    @Coding_love_ 11 місяців тому +1

    Ma'am ak video portfolio website ke liy bhi banaiye

  • @vedgamesfun
    @vedgamesfun Місяць тому

    my java script code is not runing after coping your code also

  • @RealSoldierX
    @RealSoldierX Рік тому +12

    This video is really helpful and really easy to understand. Thank you so much. I am starting my 9 months full stack web dev course here in France from october and I believe your channel is going to help me a lot.

  • @CodeLearn2715
    @CodeLearn2715 Рік тому +5

    Thanks a lot 😊😊❤❤, this video is very helpful to me because currently I'm learning front-end development.

  • @Computerblogs
    @Computerblogs Рік тому +1

    Please help me mam beacuase my ALL buttons not working in this calculator

    • @codetraversal
      @codetraversal  Рік тому

      Check if the button is actually accessible using console or you can also refer the source code if have provided in the description box.

  • @talhashah3986
    @talhashah3986 8 місяців тому +1

    Thank you so much mam, it's working perfectly.

  • @shivanitiwari1836
    @shivanitiwari1836 11 місяців тому +1

    Could you tell me plzz how can I do it ...

  • @madhurmoms
    @madhurmoms Рік тому +132

    Shuru me mujhe samjh hi nhi aaya ki ladki h ya koi chota baccha padha rha h 😅

  • @rajatsaraswat64
    @rajatsaraswat64 11 місяців тому +1

    Or bhee vedio laao project se related

  • @MAfaqAli-jc4eo
    @MAfaqAli-jc4eo Місяць тому +1

    where are you plzz come back

  • @IslamicTips-786
    @IslamicTips-786 Рік тому +6

    One of the most very very helpful video with simply explanation.... Keep it up we are always with you ... Take Love 💕

  • @md.monjuralahibizu785
    @md.monjuralahibizu785 11 місяців тому +1

    Can input number be unlimited?

  • @techterm6587
    @techterm6587 Рік тому +1

    Kindly explain it in a proper way

  • @freefireshorts4712
    @freefireshorts4712 3 місяці тому

    my code is not working of js index.js:13 Uncaught TypeError: Cannot set properties of null (setting 'value')
    at HTMLButtonElement. (index.js:13:21) showing this error

  • @ahmad4jutt
    @ahmad4jutt 7 місяців тому

    Const display= document.getElementbyId ('display')
    Make input id as display for showing figure make id as appendToDisplay
    For clearscreen put id on button AC as clearDisplay
    For calculate
    Put id on = symbol calculate
    Make three functions appendToDisplay(input) {display.value += input } // figures will show in input
    Function clearScreen (){
    Display.screen =' '}
    Function calculate (){
    Try{display.value=eval(display.value)} catch (error)
    {Display.value ='error'}
    }
    This is the simple code you make it tooo complecated

  • @drawingwithanmaar2330
    @drawingwithanmaar2330 9 місяців тому +2

    8:13 you mistakenly wrote rgbs instead of rgba
    Btw Nice calculator looking cool 👍🏻

  • @SCOB39MachpalleBalaji-hd9xn
    @SCOB39MachpalleBalaji-hd9xn Рік тому +6

    Your teaching is very good,I mean it is very easy to understand all those things (html&css).keep going and create a content as like that

  • @unseenjoda9899
    @unseenjoda9899 Рік тому +3

    Make more micro projects.. It helps alot for beginners..

  • @SkyCarly
    @SkyCarly 4 місяці тому

    **Mam how can I use squraroot operator it's not working can you provide just the code related to squareroot for JavaScript file only**

  • @saarthitraders
    @saarthitraders Рік тому +1

    Main apka channel subscribe kar Raha hun ummid karta hun aur js projects laoge Hindi 😊😊

  • @rudrapatel2919
    @rudrapatel2919 Рік тому +1

    how old you are
    ha ha muje pata jai ki kisi ladaki unki age nahi puchani chahiye
    but kya karu app ki awaz hi itaini achii hai ki kya karu
    you will be a big you tuber

  • @Intikhabkhursheed
    @Intikhabkhursheed Рік тому

    i copy you word by word but this eror is occur
    " script.js:8 Uncaught TypeError: button.addEventlistener is not a function
    at script.js:8:12
    at Array.forEach ()
    at script.js:7:5 "

  • @alonehacker108
    @alonehacker108 Рік тому +2

    Wow didi aapne bahut zada accha or attractive Calculator banaya😱😱🥶😱
    😊😊😊😊

  • @m.dansari7161
    @m.dansari7161 Рік тому +3

    Aapka ye project 100% samjh mei aya mujhe thanks .mai web dev .corce kar rha hun fihaal

  • @FaizanSarwar-zs8eu
    @FaizanSarwar-zs8eu 4 місяці тому

    Tremendous work.!
    Kindly provide me with some tactics on how to improve my front end development because I am a newbie to these things.
    Ps ( I am very confused by divs and their relations).
    Waiting for your reply.....

  • @naatia-shorts
    @naatia-shorts 2 місяці тому

    Asalam o alikum mam.. i am writing the same code my whole code is working but substring property is not working.tell me what i do?

  • @siddiquabagwan7551
    @siddiquabagwan7551 Рік тому +1

    Mam my code is not working AC and DEL is still shown in input and my calculator is not working when I do large numbers calculation

  • @gulshancreations304
    @gulshancreations304 2 місяці тому +1

    How old are you sister

  • @saimshaikh_
    @saimshaikh_ Рік тому +3

    wow mam the way of your teaching is awesome.... i found a diamond on youtube i like to wach your all videos i love you mam love you 3000>> this will help me alot to start my js journey thanks a lot of you 😃🥰😀

  • @snigdharoy1938
    @snigdharoy1938 Рік тому +2

    Make More This Kind Of Video,, Thank You ❤

  • @rnhminitv
    @rnhminitv 6 місяців тому +1

    Ma'am this and your all tutorials are amezing and Your way of explaining is also very good, this tutorial is very very helpful for me, thanks a lot ma'am ❤❤❤❤❤

  • @shoaibhasan4026
    @shoaibhasan4026 Рік тому +3

    Great explanation but % button is not working Thanks for this video furthermore I simply love your video style, truly refreshing and creative.💛💛

  • @biswajitmaity8169
    @biswajitmaity8169 Рік тому +2

    Mam maine bohot calculator making video dekha but.. Aap ek ek point bolte ho... It's very helpful... Aur bhi aise project banao mam.. Portfolio website, toc toe game etc

    • @codetraversal
      @codetraversal  Рік тому +1

      Thankyou.....We will make everything one by one.

  • @sobiaashraf8943
    @sobiaashraf8943 11 місяців тому +1

    Thank you sister ❤

  • @sochbyclassroom
    @sochbyclassroom 10 місяців тому +2

    Thanks

  • @MrKiranKumar20
    @MrKiranKumar20 Місяць тому

    This project has so many bugs
    1. What of I click 2 times to the DEL button?
    2.What if i put the space in between the strings ?

  • @saimsarwar3171
    @saimsarwar3171 3 місяці тому +1

    It is really an amazing and most helpful video for me and in this video the way of teaching is incredible

  • @yashrajdandnaik8127
    @yashrajdandnaik8127 Рік тому +15

    You did a great job lady as a developer , your channel is growing

  • @shubhammehta6554
    @shubhammehta6554 8 місяців тому +1

    Hare Krishna mataji.

  • @ranitdey7114
    @ranitdey7114 Рік тому +1

    Mam ap run karaneke lie konsa extension use kar rahi ho?
    Mai visual studio code ka new user hu
    Isiliye dikkat ho Raha hai extensions select karne me
    Help me mam.

  • @adnanhossen2332
    @adnanhossen2332 25 днів тому

    Thank you so much for you outstanding video. I wanna learn so I'll stay with you.

  • @KelashPunhwar-v6e
    @KelashPunhwar-v6e Рік тому +1

    Very nice Sister my Bhagwan give you success in every step of life

  • @xyeem1566
    @xyeem1566 Рік тому +2

    in Line 7 of js File
    arr.forEach(button
    why you have put the parameter as button but not the buttons WHILE variable Name is BUTTONS .

    • @xyeem1566
      @xyeem1566 Рік тому +1

      kindly explain

    • @codetraversal
      @codetraversal  Рік тому +1

      Because we are accessing button one by one using for each loop. You can also use any other name instead of button.

  • @vloghuzaifa6225
    @vloghuzaifa6225 10 місяців тому +2

    i like this video i learn alot from this

  • @PakistaniDramas-xp1nq
    @PakistaniDramas-xp1nq 10 місяців тому +1

    Thanks for teach ❤❤

  • @godismyway7305
    @godismyway7305 Рік тому +1

    It was all fun until he start JavaScript haha. Thanks Man! Subscribed and Liked!

  • @muhammadayan5112
    @muhammadayan5112 2 місяці тому

    How about add subtract multiply divide or any Thing ????

  • @showbikshowmma3520
    @showbikshowmma3520 Рік тому +2

    quite modern ux as well

  • @shivanitiwari1836
    @shivanitiwari1836 11 місяців тому +1

    Mera js functioning nii kr raha h

  • @ChinonsoRosemary-w3g
    @ChinonsoRosemary-w3g Рік тому

    Your teaching was really helpful, thank you, but I didn't understand the js part from else if ,cos I couldn't understand the language

  • @xyeem1566
    @xyeem1566 Рік тому +1

    Subscribed to your Channel.
    Please Make More videos . Moreover your Voice is very Cute 😍

  • @Jackadam321
    @Jackadam321 2 дні тому

    you are the bestkind and your content is also helpfull i really like it

  • @chatgpt2x5
    @chatgpt2x5 11 місяців тому +1

    thank you soo much mam.

  • @TheHiten
    @TheHiten 3 місяці тому

    Hello Ma'am css pr button box-shadow nhi aa rhi mere pc pr code v check liya
    If u seen this msg please reply

  • @aarushirajput7821
    @aarushirajput7821 Рік тому +1

    mujhe javascript itna nhi samjh ata kya aap javascript for beginners series chalu kr sakte ho mam?

  • @Musichouse02
    @Musichouse02 11 місяців тому +1

    Mem ishme % work nhi kr rha h

  • @HasmeRafsanjani
    @HasmeRafsanjani Рік тому

    its a very good project for beginner and great work 👌👍
    The "%" button is not working is that my code is foulty or something ? c

  • @urfazahmad1378
    @urfazahmad1378 Рік тому +1

    mam agr height 100% dete hain tw align-items work ni krta. Agr height 100vh deta hain phir align-items work krta ha . kindly thora bta dein

  • @onlystudy952
    @onlystudy952 7 місяців тому

    Didi mera ek solution bataiye
    Html or CSS issme pura work mera Kiya jbki javascript ka same code copy kiye bt undefined kyu batara plz bataoye😅😅😅😅😅

  • @NirajKumarPandey1234
    @NirajKumarPandey1234 2 місяці тому +1

    [1].I have seen this lecture today.I have completely understood all the concepts you explained in class. Your teaching method was very simple and effective, which made me understand everything easily. I am very grateful to you for your guidance and hard work. Your student, [Ayush & Adarsh]...🫡❤
    18TH JULY 2024...

  • @coolboy3018
    @coolboy3018 11 місяців тому +1

    Thank you so muchhh

  • @rmworld420
    @rmworld420 4 місяці тому

    today I subscribe your channel when I watch your video

  • @BakuraGZ
    @BakuraGZ Рік тому +1

    Excuse me. How do you watch your result while coding?

  • @Vishal-Travel-Diaries
    @Vishal-Travel-Diaries Рік тому

    "Equalto button show undefined error please fix this"

  • @safwankhattak9769
    @safwankhattak9769 Рік тому +2

    very very very very helpfull and amazing video thanks you so much you earned my subscription and all notification , muj se yahi ho sakta hai but me apki video group me share akrta hun jaha par sabko aisi hi video ki talash hai thank you so much
    😃😃