How To Make A Calculator Using HTML CSS And JavaScript

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

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

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

    👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)

  • @naavidmorshed5516
    @naavidmorshed5516 Год назад +78

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

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

    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

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

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

      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

  • @nitinsaxena3082
    @nitinsaxena3082 Год назад +17

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

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

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

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

      Why ...any Specific reason?

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

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

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

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

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

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

      wasdwasdwasdwawd

  • @Sir21Goals
    @Sir21Goals 5 месяцев назад +10

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

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

    Calculator completed 🤞🏻🤞🏻🤞🏻
    Back to back practicing JS. The aim is to get a job as early as possible. ❤

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

      Glad to hear that. You are in the top 5% who complete projects. All the best.

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

    Thank you so much, started learning HTML CSS and JavaScript around May, now am catching up. Project completed sucessfully.

  • @christophermawela3318
    @christophermawela3318 Месяц назад +3

    I'm learning all 30 projects, all these tutorials are very helpful after watching your fulll Javascript Cours, Please make a Node JS tutorial...

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

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

  • @riacharda
    @riacharda 8 месяцев назад +3

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

  • @draftdrvmz
    @draftdrvmz 10 месяцев назад +13

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

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

    This is my second time doing one of your tutorials, unlike most, you actually explain what these things do. Now I understand a lot more about web development. Thanks! 🔥🔥

  • @tobio-chan7494
    @tobio-chan7494 2 месяца назад +1

    Thank you so much! I just made my college project following this. Works perfectly!

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

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

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

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

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

      ​@@thecodexweb7766using documents to get ID righht?

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

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

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

      Hello

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

      Hi

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

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

  • @daydreamer_9911
    @daydreamer_9911 4 месяца назад +3

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

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

    Ngl this fast-paced video was way exciting than most movies.

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

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

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

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

    Sir, we need more JavaScript projects

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

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

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

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

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

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

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

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

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

      Hello I had a doubt

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

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

      @@rajeshwaris1091 Brother , I stoped coding I dont remember

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

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

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

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

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

    i was expecting javascript implementation seeing thumbnail
    but it is only html and css

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

    This is my 32nd project
    I have completed it
    If the calculation was done in JavaScript it will be very easy to limit the digits after the decimal

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

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

  • @Codenow10222
    @Codenow10222 8 месяцев назад +3

    Imp note : No javascript is used in this tutorial so if you are watching this to practice js then dont.

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

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

    Today you gave me one thing. The hardest thing is not doing it, but actually is my mind.

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

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

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

    there is no doubt that this is very simple project but here is a bug in this project , we can select multiple operator at the same and it will through an error you should fixed that too in this video where we could select one operator at a time

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

      In case of operators , you have to not use increment operator , use this one

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

    it is really useful tutorial but i have some doubts that is we can write or click the operators more than one times simultaneously and this makes it non functional so you should verify it . but at all it is nice keep it up

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

    This was the easiest one. Thank you so much 🙏

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

      Hello

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

      Hi I have a some problem please can you guide clearly I write display. Value in onclick event but the console error show it's not define and it's property is module can you help me

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

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

    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.

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

    Thank you this project has been created using HTML and CSS, however JavaScript wasn’t included?

  • @gabrielnganty9717
    @gabrielnganty9717 3 дня назад

    thanks your video is very simple 🙂🙂🙂

  • @Natilol-2020
    @Natilol-2020 6 месяцев назад +1

    there's a big problem around the 'text display' you can still write, but still great

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

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

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

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

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

    Great vedio i have learnt a lot from this vedio

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

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

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

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

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

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

      But bro where is the Javascript

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

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

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

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

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

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

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

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

    Thank you so much for helping my Home work ❤

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

    But you used only html and CSS woww 😃 without javascript u made it ..👏🏻🔥

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

      onclick="display.value +=
      that is JS, Can't make it without JS

    • @mr.luhar143
      @mr.luhar143 Год назад +5

      @@GreatStackDev sir I have questions that if you used javascript so why you don't use script tag and we don't have to give function in onclick , you not use query selector
      Second confusion is display.value += 1 it is error because initially value is undefined

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

      @@GreatStackDev ohh great, but can you give answer to the @ff entertainment..?

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

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

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

    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.

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

    margin: 0;
    padding: 0;
    font-family: 'poppins', sams-serif;
    box-sizing: border-box;

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

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

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

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

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

  • @POGPlanet-n5h
    @POGPlanet-n5h Год назад +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?

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

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

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

    i thought the hardest part would be the actual calculation but i was just eval function thanks

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

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

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

      You're welcome. Thank you so much. 😊

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

    This is the most easiest calculator tutorial ive ever seen..... Ive finish building this project in just 30 min lol

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

      Thank you. That's really awesome.

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

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

  • @TemitopeOlakunle-b4u
    @TemitopeOlakunle-b4u 20 дней назад

    So helpful
    Much appreciated🎉🎉

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

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

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

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

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

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

    Alhamdullulah 1st Project Completed

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

    why do you use the tag as a button you could also use the tag directly ???

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

    You teaching me today task Thk u

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

    nice video sir, its very eassy to understand javascript .

  • @Ahmedzayit29
    @Ahmedzayit29 Месяц назад +1

    Thank you bro

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

    I lost it in the display button. Although i already put the css,it remains the same ,small button...however it is functional, so thanks a lot❤

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

    Please try to provide the source code with the video description.
    Video and the code was great.

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

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

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

    So sample and easy , Good job sir 👏👍

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

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

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

    THIS JUST HELPED ME WITH MY WEEKLY PROJECT. Thank you so much🙌🏼 Hope to see more

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

    thanks a lot sir it helped me alot

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

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

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

    Amazing work in HTML and CSS file. But there i sno JavaScripting in this project.

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

    it works , thank you so much

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

    Great tutorial! Simple and straightforward. Subscribed 👍

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

    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.

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

    this really help me with my project thanks you.

  • @AshfaqAhmed-b4r
    @AshfaqAhmed-b4r 9 месяцев назад

    Great. if someone presses an operator multiple times, it should restrict to single one.

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

    Thank you so much I'm literally learning from you

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

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

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

    Very helpful video I make thise calculator

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

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

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

    Normally it was awesome as i;m following each lessons in telegram 😀

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

    Excellent understanding

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

    thank u now i know how to add css on html

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

    Thankyou sir.Its working perfectly.

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

    Man, this video just showed me how much more I need to learn. I was just building a calculator earlier and it was far more complex and bulky than this. 😂