How To Make A Calculator Using HTML CSS And JavaScript

Поделиться
HTML-код
  • Опубликовано: 21 дек 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
    ❤️ 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 ...
    -------------------------------------
    Affordable web hosting (coupon- EASYTUTORIALS)
    👉 easytutorialspro.com/hosting/
    My recommended tools and tutorials
    👉 easytutorialspro.com/
    -------------------------------------
    ◼️ 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:
    ◼️ RUclips: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

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

  • @naavidmorshed5516
    @naavidmorshed5516 7 месяцев назад +36

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

  • @nitinsaxena3082
    @nitinsaxena3082 9 месяцев назад +10

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

  • @Sir21Goals
    @Sir21Goals День назад

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

  • @mohammedzaheer4215
    @mohammedzaheer4215 5 месяцев назад +1

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

  • @zolaniroqwane8491
    @zolaniroqwane8491 10 месяцев назад +6

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

  • @emmanuelchuks4405
    @emmanuelchuks4405 Год назад +41

    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 Год назад +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 6 месяцев назад +1

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

    • @__ikiran
      @__ikiran 2 месяца назад

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

  • @rubinatabassum2562
    @rubinatabassum2562 Год назад +8

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

  • @emmanuelchuks4405
    @emmanuelchuks4405 Год назад +88

    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  Год назад +46

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

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

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

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

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

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

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

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

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

  • @asfandiyar5829
    @asfandiyar5829 Год назад +7

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

  • @Think____different
    @Think____different Год назад +10

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

  • @Justicejr0010
    @Justicejr0010 Год назад +5

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

  • @LinesofLove
    @LinesofLove 2 месяца назад +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

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

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

  • @namupark6854
    @namupark6854 7 месяцев назад +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!

  • @riacharda
    @riacharda 2 месяца назад +2

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

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

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

  • @user-ir1sj5mc8p
    @user-ir1sj5mc8p 7 месяцев назад +1

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

  • @jamesmutungaaa
    @jamesmutungaaa Год назад +14

    Great tutorial! Simple and straightforward. Subscribed 👍

  • @alexanalo5510
    @alexanalo5510 Год назад +5

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

  • @asadorakzaipti
    @asadorakzaipti Год назад +121

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

    • @thecodexweb7766
      @thecodexweb7766 11 месяцев назад +6

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

    • @MbbScy
      @MbbScy 8 месяцев назад +1

      ​@@thecodexweb7766using documents to get ID righht?

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

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

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

      Hello

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

      Hi

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

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

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

    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....

  • @thedinkydreads9351
    @thedinkydreads9351 Месяц назад +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!

  • @funskate8850
    @funskate8850 Год назад +6

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

  • @examtoppers7541
    @examtoppers7541 Год назад +6

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

  • @garudateleshop
    @garudateleshop Год назад +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.

  • @charlesotieno8778
    @charlesotieno8778 10 месяцев назад +6

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

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

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

  • @fabfitforever4934
    @fabfitforever4934 7 месяцев назад +1

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

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

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

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

      Why ...any Specific reason?

  • @user-sp7fx1ij5j
    @user-sp7fx1ij5j 9 месяцев назад

    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.

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

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

  • @singletrackstatus1505
    @singletrackstatus1505 8 месяцев назад +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.

  • @user-fp2sy5rl9p
    @user-fp2sy5rl9p 10 месяцев назад +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?

  • @user-qb9xr7bl4s
    @user-qb9xr7bl4s 3 месяца назад

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

  • @aashirhameed2526
    @aashirhameed2526 Год назад +3

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

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

      But bro where is the Javascript

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

    Thank you so much for this amazing tutorial video!

  • @sahabStores
    @sahabStores Год назад +3

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

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

      Thanks Musa, Hope you will like this too: ruclips.net/video/cO-qjCC_UYQ/видео.html
      And More JavaScript projects here: ruclips.net/video/9LZGB3OLXNQ/видео.html

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

    Thank you for a very simple explanation.

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

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

  • @eekka117
    @eekka117 7 месяцев назад +1

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

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

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

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

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

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

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

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

      Glad you like this tutorial to make Calculator using JavaScript

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

    Amazing video,thank you so much 👍👑

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

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

  • @draftdrvmz
    @draftdrvmz 5 месяцев назад +12

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

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

    Thank you for the lesson I learned a lot.

  • @moeentrimzi.8532
    @moeentrimzi.8532 Год назад

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

  • @nishababu9093
    @nishababu9093 Месяц назад

    Thankyou sir.Its working perfectly.

  • @EclipsePlayzYT666
    @EclipsePlayzYT666 10 дней назад +1

    I cant tell you how amazing/helpful this video was. Thanks so much. You earn yourself a sub

    • @GreatStackDev
      @GreatStackDev  7 дней назад

      Glad you liked it. Thanks a lot for your comment. 😊

  • @AdityaSharma-er3gs
    @AdityaSharma-er3gs 2 месяца назад

    at 15:00 , there is no need to use "toString()" because default value of input is "string". Nice video by the way.

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

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

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

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

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

    Very helpful. Thank you, sir!

  • @andi-drr
    @andi-drr Год назад +1

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

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

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

  • @user-bf1sn9ne8x
    @user-bf1sn9ne8x 4 месяца назад

    Thank you so much for this video.

  • @Ugbechievictoria-vi3lt
    @Ugbechievictoria-vi3lt 5 месяцев назад

    So sample and easy , Good job sir 👏👍

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

    Thanks for making this amazing tutorial video.

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

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

    • @rajeshwaris1091
      @rajeshwaris1091 Месяц назад

      Hello I had a doubt

    • @rajeshwaris1091
      @rajeshwaris1091 Месяц назад

      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 Месяц назад

      @@rajeshwaris1091 Brother , I stoped coding I dont remember

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

    Working just fine ...nice tutorial 😀

  • @user-fm4fj5np7g
    @user-fm4fj5np7g 9 месяцев назад

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

  • @iamuzzalhossen
    @iamuzzalhossen Месяц назад

    Super Simple! Thanks

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

    Very good! Thank you very much!

  • @PhatandChunky
    @PhatandChunky Год назад +6

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

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

      glad you liked my tutorial. you will love this JS project too: ruclips.net/video/cO-qjCC_UYQ/видео.html

  • @MuudoNuux
    @MuudoNuux 7 месяцев назад +1

    Thank you so much for helping my Home work ❤

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

    Thank you very much. Good sir!

  • @KingKabari
    @KingKabari 16 дней назад

    really loved this video , very concise and easy to understand , I followed all the procedures but my DE button is not functioning , i even tried another method using innerHTML. I'm a beginner in programming and still learning, would appreciate helpful tips.

  • @iMonu
    @iMonu Год назад +3

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

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

      hope you will like this stopwatch tutorial too: ruclips.net/video/cO-qjCC_UYQ/видео.html

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

      ​@@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 😇

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

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

  • @Ghulammustafa-wg6cy
    @Ghulammustafa-wg6cy Год назад +132

    Sir, we need more JavaScript projects

  • @unionwithgod673
    @unionwithgod673 8 месяцев назад

    Great job... Sir please we need lots of JavaScript videos

  • @Sudicomputer
    @Sudicomputer 2 месяца назад

    Thank you my brother good job i am from in ethiopia 🇪🇹

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

    Amazing, thank you so much!

  • @user-ik6ck5ip2x
    @user-ik6ck5ip2x Месяц назад

    Thanks, your teaching is awesome

  • @manhhoangtien540
    @manhhoangtien540 Год назад +3

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

  • @-sheny215
    @-sheny215 8 месяцев назад

    although it didnt even need JS, cool vid :) nice basis to work on!

  • @vigneshrajasekar-bc4jm
    @vigneshrajasekar-bc4jm Год назад

    You teaching me today task Thk u

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

    Very helpful video I make thise calculator

  • @MuhammadJafar-ls9yf
    @MuhammadJafar-ls9yf Год назад +1

    It was amazing!
    It's so interesting for computer students.

  • @ShylineZvarai-ln8bw
    @ShylineZvarai-ln8bw Год назад

    What does tag used for Sir

  • @MICHALIS_02
    @MICHALIS_02 5 месяцев назад +1

    Thank you so much. In about 19mins you summarized everything well. 🔥🎉
    Though i realized something. It doesn't work if it has 00 before the decimal point it doesn't calculate
    Anyway we could fix that?

  • @Angad197
    @Angad197 Месяц назад

    You really taught well ..

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

    Amazing, this channel is the best

  • @ryuu5109
    @ryuu5109 Год назад +5

    Thank you so much I'm literally learning from you

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

    Really an excellent tutorial video thanks a lot brother I have learned how to use HTML, CSS, and Js in realtime scenarios, Please do a lot of videos.

  • @saimiqbal1758
    @saimiqbal1758 28 дней назад +1

    Really appreciated... awesome way to teach... Great Superb🥰🥰🥰

    • @GreatStackDev
      @GreatStackDev  26 дней назад

      You're welcome. Thank you so much. 😊

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

    Love from america! this is awesome man

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

    Thank you, so much!!!

  • @NwangwuFrancis-ym5zw
    @NwangwuFrancis-ym5zw Год назад

    your video is perfect and very educative

  • @urs-reymarkperez3528
    @urs-reymarkperez3528 11 месяцев назад +1

    Hello sir, can you make a tutorial video on how to make multiply and divide functional using JavaScript? Thank you sir, I have already subscribed! 😊

  • @dag1990
    @dag1990 2 месяца назад

    Excellent tutorial, very valuable lesson.

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

    Amazing tutorial. You're Awesome man.

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

    A melhor calculadora!!!

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

    What an excellent tutorial!

  • @tavishtayal1340
    @tavishtayal1340 3 месяца назад +1

    thanks a lot sir it helped me alot

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

    Amazing lesson 👏🏻

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

    thank you for your tutorial. what a wonderful tutorial, i love the way you teach 🙏🙏

    • @GreatStackDev
      @GreatStackDev  4 месяца назад +1

      Thanks Southisack, I am sure you will love this 30 Days - 30 JavaScript project playlist: ruclips.net/p/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9

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

    Amazing video, it was helpful 😊