How To Make A Calculator Using HTML CSS And JavaScript

No video

How To Make A Calculator Using HTML CSS And JavaScript

Рет қаралды 841,775

Күн бұрын

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...
👉Telegram: t.me/GreatStac...
👉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
👉 easytutorialsp...
-------------------------------------
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:
◼️ KZfaq: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Пікірлер: 650

@naavidmorshed5516 9 ай бұрын

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

@emmanuelchuks4405 Жыл бұрын

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 Жыл бұрын

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

@rananaidu9988 Жыл бұрын

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

@hammadraza7064 Жыл бұрын

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

@lokeshp1929 Жыл бұрын

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

@niharikapatel5114 Жыл бұрын

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

@Sir21Goals 2 ай бұрын

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

@emmanuelchuks4405 Жыл бұрын

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 Жыл бұрын

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 8 ай бұрын

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

@__ikiran 4 ай бұрын

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

@Macesanu18 Ай бұрын

wasdwasdwasdwawd

@asadorakzaipti Жыл бұрын

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

@thecodexweb7766 Жыл бұрын

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

@schnegger 10 ай бұрын

@@thecodexweb7766using documents to get ID righht?

@rdx4761 9 ай бұрын

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

@shaharyarranjha3397 9 ай бұрын

Hello

@shaharyarranjha3397 9 ай бұрын

@olgalisenco 9 ай бұрын

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

@Harshk0 6 ай бұрын

Why ...any Specific reason?

@nitinsaxena3082 11 ай бұрын

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

@Ghulammustafa-wg6cy Жыл бұрын

Sir, we need more JavaScript projects

@GreatStackDev Жыл бұрын

sure I will be making more tutorials on JavaScript

@Ghulammustafa-wg6cy Жыл бұрын

@@GreatStackDev Thankyou Love from Pakistan

@rubinatabassum2562 Жыл бұрын

@@Ghulammustafa-wg6cy I got one issue in this I didn't get the exact design of calci If you can help me with this

@zindagidopalke------4777 Жыл бұрын

Brother upload source code

@mjustintime7930 Жыл бұрын

Thanks sir 🙏🙏🙏❤️❤️

@draftdrvmz 7 ай бұрын

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

@ShinRyujinAkingIniirog 5 ай бұрын

same bro

@Think____different Жыл бұрын

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

@JACKYBOO2 14 күн бұрын

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! 🔥🔥

@GreatStackDev 13 күн бұрын

You're very welcome!, Glad it helped you.

@riacharda 4 ай бұрын

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

@__Attitude__ 3 ай бұрын

Haha same

@namupark6854 9 ай бұрын

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!

@daydreamer_9911 Ай бұрын

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

@GreatStackDev Ай бұрын

Glad it helped! Thank you. 😊

@rubinatabassum2562 Жыл бұрын

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

@vitalisya9 3 ай бұрын

who else is here for assignment

@TheAmaanAcademy Ай бұрын

Me😂😂

@Former_Zeals 29 күн бұрын

@anikchand4005 28 күн бұрын

@HemaNandyyyyyyyyyy 23 күн бұрын

Guys i have an doubt

@user-nq1gq8vw3q 13 күн бұрын

@jamesmutungaaa Жыл бұрын

Great tutorial! Simple and straightforward. Subscribed 👍

@madhanraju9422 2 ай бұрын

Sss 😅

@LinesofLove 4 ай бұрын

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

@shawsays3258 Ай бұрын

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

@mohammedzaheer4215 7 ай бұрын

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

@Justicejr0010 Жыл бұрын

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

@funskate8850 Жыл бұрын

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

@asfandiyar5829 Жыл бұрын

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

@examtoppers7541 Жыл бұрын

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

@originalni_popisovac Жыл бұрын

use normal emojis

@user-zm7db5fg5t 11 ай бұрын

Thanks 🙏

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

@thedinkydreads9351 4 ай бұрын

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!

@zolaniroqwane8491 Жыл бұрын

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

@Codenow10222 5 ай бұрын

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

@PhatandChunky Жыл бұрын

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

@GreatStackDev Жыл бұрын

glad you liked my tutorial. you will love this JS project too: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.html

@alexanalo5510 Жыл бұрын

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

@dancingrose744 Жыл бұрын

DE not working

@KardanKaaal 13 күн бұрын

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

@GreatStackDev 12 күн бұрын

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

@Sithkar03 Жыл бұрын

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

@hareshvishal7816 14 күн бұрын

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

@GreatStackDev 14 күн бұрын

Thank you. That's really awesome.

@charlesotieno8778 Жыл бұрын

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

@ryuu5109 Жыл бұрын

Thank you so much I'm literally learning from you

@GreatStackDev Жыл бұрын

Happy to help

@basharatkhan4499 Жыл бұрын

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 9 ай бұрын

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

@AdityaSharma-er3gs 4 ай бұрын

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

@EclipsePlayzYT666 2 ай бұрын

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

@GreatStackDev 2 ай бұрын

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

@HooriaFatima-co7xr 10 күн бұрын

Best explanation Sir ❤

@GreatStackDev 10 күн бұрын

Glad you liked it. Thank You. 😊

@tanishkagupta6864 9 ай бұрын

This was the easiest one. Thank you so much 🙏

@shaharyarranjha3397 9 ай бұрын

Hello

@shaharyarranjha3397 9 ай бұрын

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

@sahabStores Жыл бұрын

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

@GreatStackDev Жыл бұрын

Thanks Musa, Hope you will like this too: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.html And More JavaScript projects here: kzfaq.info/get/bejne/b7KKeqVktLK8foU.html

@user-ir1sj5mc8p 9 ай бұрын

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

@aashirhameed2526 Жыл бұрын

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

@SakshamBali06 6 ай бұрын

But bro where is the Javascript

@saltech2024 10 күн бұрын

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

@mubeenuddin8746 Жыл бұрын

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

@rajeshwaris1091 3 ай бұрын

Hello I had a doubt

@rajeshwaris1091 3 ай бұрын

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 3 ай бұрын

@@rajeshwaris1091 Brother , I stoped coding I dont remember

@yashshiva7923 Жыл бұрын

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

@Natilol-2020 3 ай бұрын

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

@iMonu Жыл бұрын

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

@GreatStackDev Жыл бұрын

hope you will like this stopwatch tutorial too: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.html

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

@margretmauno1285 11 ай бұрын

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

@riyajdanish8431 8 ай бұрын

Great vedio i have learnt a lot from this vedio

@user-fp2sy5rl9p Жыл бұрын

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

@nyokkongor3517 Жыл бұрын

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

@muzammilansari4443 Жыл бұрын

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

@garudateleshop Жыл бұрын

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.

@eekka117 9 ай бұрын

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

@MICHALIS_02 7 ай бұрын

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?

@genzee4567 11 ай бұрын

@GreatStackDev The worst part of these kinds of projects is none of the KZfaqr is "explaining the logic step by step", "why they use that specific thing?", "what that specific thing do?", "how they can use JavaScript functions and methods in HTML itself and not write them in separate JS file and finish it off that easy??" !!!! For a super beginner like me who is unable to generate logic and needs help, is unable to understand anything!! Please explain me by creating new video and explaining the logic @GreatStackDev And others KZfaqrs also do the same!!!

@shubh1230 9 ай бұрын

You need to learn javascript at first then come here start watching these videos🌚...... Whatever u don't understand google it and find out by yourself...... That's what a developer does..... Just google google and google.

@Joy-sd5xv 9 ай бұрын

True for a beginner is quite hard to understand

@rich_dev_greg 8 ай бұрын

😅 come let me teach you.

@assassin2640 8 ай бұрын

I'm facing the same problem brother... How did u practice then... Help me a little too

@genzee4567 8 ай бұрын

@@assassin2640 give me ur email. I will email you a Google meet link & help you

@saimiqbal1758 3 ай бұрын

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

@GreatStackDev 2 ай бұрын

You're welcome. Thank you so much. 😊

@Deepika2002 Жыл бұрын

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

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

@fabfitforever4934 9 ай бұрын

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

@isamsvideoediting4572 Жыл бұрын

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

@GreatStackDev Жыл бұрын

Glad you like this tutorial to make Calculator using JavaScript

@CF-vb5gf 3 ай бұрын

Is this will work in Notepad++?

@matrixnft Жыл бұрын

Alhamdullulah 1st Project Completed

@GreatStackDev Жыл бұрын

that's great

@phetnikonephandolack3481 Ай бұрын

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

@danialali7967 Жыл бұрын

Excellent Tutorial😍😍

@GreatStackDev Жыл бұрын

Thanks Danial, Glad you like this JavaScript calculator design tutorial

@BohemianOnTheRoad 8 ай бұрын

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

@dfordj3785 12 күн бұрын

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

@MuudoNuux 9 ай бұрын

Thank you so much for helping my Home work ❤

@TembanBrisia Ай бұрын

Amazing 🎉 video

@lory19995 9 күн бұрын

thank u now i know how to add css on html

@GreatStackDev 9 күн бұрын

Glad I could help. Thank You.

@rahulsakaria2061 Жыл бұрын

Nice Explaination Really Helpful 😁

@GreatStackDev Жыл бұрын

Glad it helped, Thanks for comment

@MuhammadJafar-ls9yf Жыл бұрын

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

@GreatStackDev Жыл бұрын

Glad you think so

@CodingWorld369 Жыл бұрын

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

@GreatStackDev Жыл бұрын

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

@mr.luhar143 Жыл бұрын

@@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 Жыл бұрын

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

@user-qb9xr7bl4s 5 ай бұрын

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

@user-cm7dk8hg9f 9 ай бұрын

nice video sir, its very eassy to understand javascript .

@Parveenpandit Жыл бұрын

Excellent understanding

@GreatStackDev Жыл бұрын

Glad to hear that

@TheRaghumurthy Жыл бұрын

Very useful ❤❤

@GreatStackDev Жыл бұрын

Thanks Raghu! Glad you like this tutorial to make calculator using JavaScript

@TheRaghumurthy Жыл бұрын

@@GreatStackDev sure, thanks for reply. 🙏🙏🙏

@andi-drr Жыл бұрын

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

@GreatStackDev Жыл бұрын

Glad it was helpful!

@nidheeshdesaistudios8439 Жыл бұрын

Amazing lesson 👏🏻

@user-ke4ld2oy4y 8 ай бұрын

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

@Ugbechievictoria-vi3lt 7 ай бұрын

So sample and easy , Good job sir 👏👍

@generalkuze6893 5 ай бұрын

Amazing, this channel is the best

@KALLOLMALLICK 8 ай бұрын

Appreciating your nice support.

@PREMIER785 2 ай бұрын

Good❤

@GreatStackDev 2 ай бұрын

Glad you liked it. Thanks for your comment. 😊

@gbamohsin Жыл бұрын

nice

@Laci_1_ Жыл бұрын

Thank you so much for this amazing tutorial video!

@velmurugan_786 Жыл бұрын

I'm trying your source code but "DE" button dose not working & display very small on the right corner. Please tell me the solution?

@KamalTiwari82 9 ай бұрын

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

@abigiyatadesse2672 Жыл бұрын

Thank you for the lesson I learned a lot.

@thaynaramaciel3850 Жыл бұрын

Very helpful. Thank you, sir!

@user-sp7fx1ij5j 11 ай бұрын

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.