How To Make A Calculator Using HTML CSS And JavaScript

Sdílet
Vložit
  • čas přidán 21. 12. 2022
  • Make A Calculator Using HTML CSS And JavaScript | Build Calculator using JavaScript | JavaScript Project for beginners
    👉 Download 30 JavaScript projects Source Code (Including Calculator):
    greatstack.dev/go/30-js-projects
    👉Telegram: t.me/GreatStackDev
    👉More JavaScript Projects: greatstack.dev/
    ❤️ SUBSCRIBE: ‪@GreatStackDev‬
    This this video you will build a calculator using HTML CSS and JavaScript. This is best JavaScript project for beginners. In this calculator we will create UI design using HTML and CSS then we will add calculator functionality with the help for simple JavaScript code.
    #JavaScript
    -----------------------------------------
    Suggested Course:
    ❤️ Complete website Using HTML and CSS
    ✔️ 8 Complete website step by step
    ✔️ Source Code Download
    ✔️ 76 Lectures, 12 Hours Video
    ✔️ Course Completion certificate
    👉 easytutorialspro.com/go/course/
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    My recommended projects and courses
    👉 greatstack.dev/
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ CZcams: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

Komentáře • 612

  • @vitalisya9
    @vitalisya9 Před 2 měsíci +16

    who else is here for assignment

  • @naavidmorshed5516
    @naavidmorshed5516 Před 8 měsíci +46

    Can't stress enough how helpful this video is. Learned so much from a short 19 mins video.

  • @Sir21Goals
    @Sir21Goals Před 28 dny +3

    You're genius brother. Compared to other CZcams content creators with same calculator project. Thank you.

  • @emmanuelchuks4405
    @emmanuelchuks4405 Před rokem +89

    Nice video. However, I think adding a readonly attribute to the display input field would make the calculator more functional because as it is, one can directly type characters into the display screen of the calculator, which is not all that appropriate. Thanks for this video. I learnt a lot!

    • @GreatStackDev
      @GreatStackDev  Před rokem +47

      Thanks Emmanuel, this comment will help all viewers, they can simply add

    • @rananaidu9988
      @rananaidu9988 Před rokem +1

      @@GreatStackDev hi bro ..its not working for me

    • @hammadraza7064
      @hammadraza7064 Před rokem +1

      @@GreatStackDev sir why did u change tostring() in delete button?

    • @lokeshp1929
      @lokeshp1929 Před rokem +1

      @@hammadraza7064 that method will collect the value from del button and perform slice operation from string method

    • @niharikapatel5114
      @niharikapatel5114 Před rokem +1

      @@GreatStackDev after adding readonly I still can add anything to display input. Pls help

  • @rubinatabassum2562
    @rubinatabassum2562 Před rokem +10

    Thank you sir.
    Always Beneficial,Awesome work you share👍
    Waiting for more such tutorials...

  • @emmanuelchuks4405
    @emmanuelchuks4405 Před rokem +43

    And also, no real need converting to strings, since the input type of the display is already set to "text". It works already. I am looking forward to another amazing video

    • @m.j.mcintear793
      @m.j.mcintear793 Před rokem +1

      how to call the function with each of these variables as an argument emailaddress variable and emailconfirm variables
      Do you know how to make two of the same emails need to match and is that client side validation or server side? Inquiry of js on html form

    • @blessing-vl9qk
      @blessing-vl9qk Před 7 měsíci +1

      thank you so much now my delete button is working changed to this =>
      great video anyway

    • @__ikiran
      @__ikiran Před 3 měsíci

      thanks buddy i was confused why the DE button isn't working thanks a lot

    • @Macesanu18
      @Macesanu18 Před 12 dny

      wasdwasdwasdwawd

  • @Think____different
    @Think____different Před rokem +11

    Its cool and even child can understand your presentation...kudos to you for making this..
    Subscribed👌

  • @zolaniroqwane8491
    @zolaniroqwane8491 Před 10 měsíci +6

    Thanks, you've realy put things into perspective. Such a good teacher.

  • @Justicejr0010
    @Justicejr0010 Před rokem +6

    🎉🎉🎉 I love the way you explain the work.. Easy to understand and follow up... ❤❤❤

  • @asfandiyar5829
    @asfandiyar5829 Před rokem +8

    Thanks for the great tutorial. Can't believe how easy it was.

  • @nitinsaxena3082
    @nitinsaxena3082 Před 10 měsíci +14

    I'm searching for mini project using HTMl css js for my assignment I got this one thanks alot sir

  • @mohammedzaheer4215
    @mohammedzaheer4215 Před 5 měsíci +1

    The way of your coding is massive i found such a easy way of creating projects using JavaScript

  • @jamesmutungaaa
    @jamesmutungaaa Před rokem +14

    Great tutorial! Simple and straightforward. Subscribed 👍

  • @alexanalo5510
    @alexanalo5510 Před rokem +5

    Nice work... I'm a beginner but it was really easy following you.

  • @charlesotieno8778
    @charlesotieno8778 Před 11 měsíci +6

    Really inspiring, insightful and educating tutorial. Keep it up🥇🏅

  • @funskate8850
    @funskate8850 Před rokem +8

    Great tutorial, however,it could be much better if you can enable Live extension so that we see every changes you are implementing... thanks

  • @daydreamer_9911
    @daydreamer_9911 Před 3 dny +1

    Thanks a lot for this awesome video. I search a lot for calculator code but all of the codes were complicated. Yours is quite easy and understandable. 😀

  • @Sithkar03
    @Sithkar03 Před 11 měsíci +1

    Hats off to you bro i see many video to how to make calculator but this video is just mind blowing.

  • @namupark6854
    @namupark6854 Před 8 měsíci +12

    I love how you code - so simple yet effective! Thank you. I think it'd be nice to hear more explanation on javascript codes like toString().slice(0, -1) because I think that and eval() really makes things interesting. Thanks again!

  • @asadorakzaipti
    @asadorakzaipti Před rokem +122

    Very nice video, I learned a lot.
    If JavaScript was written in separate file we would understand it better.

    • @thecodexweb7766
      @thecodexweb7766 Před rokem +6

      You can write the same JS code in separate file and link with the HTML file.

    • @MbbScy
      @MbbScy Před 9 měsíci +1

      ​@@thecodexweb7766using documents to get ID righht?

    • @rdx4761
      @rdx4761 Před 8 měsíci

      ​@@thecodexweb7766 but can we add js in online without script src

    • @shaharyarranjha3397
      @shaharyarranjha3397 Před 8 měsíci

      Hello

    • @shaharyarranjha3397
      @shaharyarranjha3397 Před 8 měsíci

      Hi

  • @user-ir1sj5mc8p
    @user-ir1sj5mc8p Před 8 měsíci +1

    Thanks 1year searching video calculator best video thanks❤❤❤🎉

  • @nyokkongor3517
    @nyokkongor3517 Před rokem +1

    I like how you approach at a concept with ease, great video content bro, be sure to receive a subscriber

  • @examtoppers7541
    @examtoppers7541 Před rokem +6

    It was amazing experience by watching your videos. How softly and essily you are teaching us. Thanks alot❤

  • @Laci_1_
    @Laci_1_ Před rokem +1

    Thank you so much for this amazing tutorial video!

  • @garudateleshop
    @garudateleshop Před rokem +2

    I am very much happy with your tutorial. Good commanding and easy process. But I want this calculator using script function option. Please do one more video.

  • @apassionateteacher5651
    @apassionateteacher5651 Před rokem +1

    it's really helpful. Thanks for the great content!

  • @singletrackstatus1505
    @singletrackstatus1505 Před 9 měsíci +8

    While eval() can be powerful, it should be used with caution because it can execute arbitrary code and potentially introduce security risks. It's often better to use alternative methods for dynamic code execution, like using functions or JSON parsing, to avoid potential issues.

  • @Deepika2002
    @Deepika2002 Před rokem

    Thank you so much sir aaj mne pehla project bnaya h sirf aapki video ki help se😊😊😊😊

  • @olgalisenco
    @olgalisenco Před 8 měsíci +7

    Thank you for simple and good explanation. My suggestion for AC Button is :

    • @Harshk0
      @Harshk0 Před 4 měsíci

      Why ...any Specific reason?

  • @TheDanielnani09
    @TheDanielnani09 Před rokem +1

    Amazing video,thank you so much 👍👑

  • @BohemianOnTheRoad
    @BohemianOnTheRoad Před 7 měsíci +1

    thank you. i'm apply your js idea on front end mentor design , it's working nicely

  • @user-fp2sy5rl9p
    @user-fp2sy5rl9p Před 11 měsíci +4

    Great video! Thank you for sharing. I was just wondering how would I got about separating all the JavaScript into a separate js file?

  • @LinesofLove
    @LinesofLove Před 3 měsíci +1

    Everything seemed easy in this Calculator project , i did not knew about eval() function in Javascript (thank you , life saver ) , but if we are using the eval() function directly without any try catch block and as the display is an input text field , we are allowed to type any words or letters and this gives an error in the console, to avoid that I suggest using the html property readonly="yes" . Overall had fun, thanks

  • @Zepha21
    @Zepha21 Před rokem +1

    Very good! Thank you very much!

  • @thaynaramaciel3850
    @thaynaramaciel3850 Před 11 měsíci +1

    Very helpful. Thank you, sir!

  • @lokeshwaran7754
    @lokeshwaran7754 Před rokem

    Thank you so much brother
    I had seen so many videos but that videos program are getting any problem but
    Your video helps me to to complete my college project
    Once again a big thanks bro....

  • @muzammilansari4443
    @muzammilansari4443 Před rokem +1

    very simple and easy to learn thankyou so much please make many small project like this that enhance our java css html skills

  • @abigiyatadesse2672
    @abigiyatadesse2672 Před rokem +1

    Thank you for the lesson I learned a lot.

  • @margretmauno1285
    @margretmauno1285 Před 10 měsíci

    Now this is a PRO- grammer... Thanks!

  • @fabfitforever4934
    @fabfitforever4934 Před 8 měsíci +1

    thank you for this, opened up my knowledge more about css!

  • @riacharda
    @riacharda Před 3 měsíci +2

    The eval function was totally new to me. I thought there'd be a complex split and reduce algorithm, Great video!

  • @sahabStores
    @sahabStores Před rokem +3

    Thank you so much Sir. Enjoying every bit of your tutorial.
    Please more for JavaScript

    • @GreatStackDev
      @GreatStackDev  Před rokem

      Thanks Musa, Hope you will like this too: czcams.com/video/cO-qjCC_UYQ/video.html
      And More JavaScript projects here: czcams.com/video/9LZGB3OLXNQ/video.html

  • @aashirhameed2526
    @aashirhameed2526 Před rokem +3

    Thank you.
    It was a helpful tutorial to understand the concepts of JavaScript and use them in HTML.

  • @Codewithganesh124
    @Codewithganesh124 Před 4 měsíci

    Thankyou so much sir for about the project in the calculator by using html and css

  • @iamuzzalhossen
    @iamuzzalhossen Před 2 měsíci

    Super Simple! Thanks

  • @eekka117
    @eekka117 Před 8 měsíci +1

    Woah this one was so much easier than what i made. Thank you!!!!!!!

  • @user-sp7fx1ij5j
    @user-sp7fx1ij5j Před 10 měsíci

    I like this video, It is easy to understand and easy to follow the code, I hope more easy HTML, CSS & Javascript tutorial or easy Full stack project for aspiring programmer people.

  • @greentube2024
    @greentube2024 Před rokem

    bro u r awesome. Your content is mindblowing level. Thanks for this project.

  • @draftdrvmz
    @draftdrvmz Před 6 měsíci +12

    I did it! My first coding project! Thank you for the tutorial!

  • @nidheeshdesaistudios8439

    Amazing lesson 👏🏻

  • @thedinkydreads9351
    @thedinkydreads9351 Před 2 měsíci +1

    For some reason I can't get my input box to stop being a dark cube, but other than that, brilliant video. Great communication and easy to pick up for beginners like me - you've definitely got a sub from me!

  • @pranjalshrivastava7947

    Working just fine ...nice tutorial 😀

  • @alberparavel9350
    @alberparavel9350 Před rokem +1

    A melhor calculadora!!!

  • @nishababu9093
    @nishababu9093 Před 2 měsíci

    Thankyou sir.Its working perfectly.

  • @Ugbechievictoria-vi3lt
    @Ugbechievictoria-vi3lt Před 6 měsíci

    So sample and easy , Good job sir 👏👍

  • @kripo_se
    @kripo_se Před rokem

    Thank you, so much!!!

  • @arreybesong6175
    @arreybesong6175 Před 11 měsíci

    Wow you made it look so easy sir! Thanks alot🙏

  • @user-bf1sn9ne8x
    @user-bf1sn9ne8x Před 5 měsíci

    Thank you so much for this video.

  • @juanramirez4157
    @juanramirez4157 Před 11 měsíci

    Amazing, thank you so much!

  • @sounalexander875
    @sounalexander875 Před rokem

    Thanks for making this amazing tutorial video.

  • @isamsvideoediting4572
    @isamsvideoediting4572 Před rokem +1

    Thank you so much Avinash for this tutorial, This tutorial helped me understand JS very easily.

    • @GreatStackDev
      @GreatStackDev  Před rokem +2

      Glad you like this tutorial to make Calculator using JavaScript

  • @user-fm4fj5np7g
    @user-fm4fj5np7g Před 10 měsíci

    Superb. Dude- your effort is awesome. I learnt a lot.

  • @shwartz166
    @shwartz166 Před rokem

    Thank you very much. Good sir!

  • @user-qb9xr7bl4s
    @user-qb9xr7bl4s Před 4 měsíci

    Wow this video is amazing very simple to understand great content thank you sir

  • @ShylineZvarai-ln8bw
    @ShylineZvarai-ln8bw Před rokem

    What does tag used for Sir

  • @Brandgamer84
    @Brandgamer84 Před rokem

    Very helpful video I make thise calculator

  • @Angry_Farmerz
    @Angry_Farmerz Před 10 měsíci

    Love from america! this is awesome man

  • @robertom7326
    @robertom7326 Před rokem +1

    @Easy Tutorial thanks for the video. Do you have a video for creating an analog watch?

  • @alessanderadames3938
    @alessanderadames3938 Před rokem

    BRUTAAAAAL!!! Gracias :D

  • @manhhoangtien540
    @manhhoangtien540 Před rokem +3

    the video is very useful. Could you tell me the VScode theme used in the video? it looks so nice

  • @mubeenuddin8746
    @mubeenuddin8746 Před rokem +1

    very nice .explained . if anybody having problem .pls rewatch it properly . most of the time it will help you

    • @rajeshwaris1091
      @rajeshwaris1091 Před 2 měsíci

      Hello I had a doubt

    • @rajeshwaris1091
      @rajeshwaris1091 Před 2 měsíci

      In css there is some code to align in centre of the web page a calculator but I had given a code according to the video in my lap but it's not working I have checked so many times . What's the reason!!

    • @mubeenuddin8746
      @mubeenuddin8746 Před 2 měsíci

      @@rajeshwaris1091 Brother , I stoped coding I dont remember

  • @moeentrimzi.8532
    @moeentrimzi.8532 Před rokem

    Nice And Easy Way i built it as yours Thanks for the video

  • @OusmaneLy99
    @OusmaneLy99 Před rokem

    Great video thanks for your help

  • @swarupavathipothala6849
    @swarupavathipothala6849 Před 5 měsíci

    Really very nice explanation and i feel ooo how much simple is this ☺thank you soo much broo 🎉🎉🎉

  • @vigneshrajasekar-bc4jm

    You teaching me today task Thk u

  • @generalkuze6893
    @generalkuze6893 Před 4 měsíci

    Amazing, this channel is the best

  • @iMonu
    @iMonu Před rokem +3

    You've been very active lately...thanks for the tutorials and keep up the hard work. ✌

    • @GreatStackDev
      @GreatStackDev  Před rokem

      hope you will like this stopwatch tutorial too: czcams.com/video/cO-qjCC_UYQ/video.html

    • @iMonu
      @iMonu Před rokem

      ​@@GreatStackDev thank you so much for the recommendation...already made my stopwatch using your video with some of my own enhancements and added it to my list of projects 😇

  • @Kenitso
    @Kenitso Před 5 měsíci

    What an excellent tutorial!

  • @TembanBrisia
    @TembanBrisia Před 5 dny

    Amazing 🎉 video

  • @alone-pu1mu
    @alone-pu1mu Před 4 měsíci

    great video thank you

  • @MuudoNuux
    @MuudoNuux Před 7 měsíci +1

    Thank you so much for helping my Home work ❤

  • @Ghulammustafa-wg6cy
    @Ghulammustafa-wg6cy Před rokem +135

    Sir, we need more JavaScript projects

  • @PhatandChunky
    @PhatandChunky Před rokem +6

    wow I've seen two other tutorials and some website tutorials and this one made it super damn easy. amazing video

    • @GreatStackDev
      @GreatStackDev  Před rokem

      glad you liked my tutorial. you will love this JS project too: czcams.com/video/cO-qjCC_UYQ/video.html

  • @anushreejoshi1829
    @anushreejoshi1829 Před rokem

    Thankyou so much sir...

  • @tavishtayal1340
    @tavishtayal1340 Před 4 měsíci +1

    thanks a lot sir it helped me alot

  • @armangmeshaksale7668
    @armangmeshaksale7668 Před rokem

    A very nice and educative video.

  • @learnwithnagma
    @learnwithnagma Před 4 měsíci

    Done sir, thanks a lot 😊.

  • @MuhammadNaveed-tj2hk
    @MuhammadNaveed-tj2hk Před rokem

    Great video. learned alot, amazing video

  • @andi-drr
    @andi-drr Před rokem +1

    Thank you, quick and i learn more about html css js. Thank you

  • @ryuu5109
    @ryuu5109 Před rokem +5

    Thank you so much I'm literally learning from you

  • @mritunjaymajee35
    @mritunjaymajee35 Před rokem

    Thankyou sir♥️

  • @milantravar1523
    @milantravar1523 Před 4 měsíci

    Thank you Amigo!

  • @MamunurRoshid93
    @MamunurRoshid93 Před 9 měsíci

    great tutorial still I have seen ever. this tutorial very easy for beginers. thanks a lot bro

  • @NwangwuFrancis-ym5zw
    @NwangwuFrancis-ym5zw Před rokem

    your video is perfect and very educative

  • @SandySab
    @SandySab Před 10 měsíci

    Amazing video, it was helpful 😊

  • @riyajdanish8431
    @riyajdanish8431 Před 7 měsíci +1

    Great vedio i have learnt a lot from this vedio

  • @Angad197
    @Angad197 Před 2 měsíci

    You really taught well ..

  • @user-ik6ck5ip2x
    @user-ik6ck5ip2x Před 2 měsíci

    Thanks, your teaching is awesome

  • @supratimpaul2598
    @supratimpaul2598 Před rokem

    Thanks brother❤

  • @brianbluue
    @brianbluue Před 11 měsíci

    Amazing tutorial. You're Awesome man.