How To Make A Calculator Using HTML CSS And JavaScript

  Рет қаралды 771,994

GreatStack

GreatStack

Жыл бұрын

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:
◼️ KZfaq: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Пікірлер: 596
@naavidmorshed5516
@naavidmorshed5516 7 ай бұрын
Can't stress enough how helpful this video is. Learned so much from a short 19 mins video.
@nitinsaxena3082
@nitinsaxena3082 9 ай бұрын
I'm searching for mini project using HTMl css js for my assignment I got this one thanks alot sir
@rubinatabassum2562
@rubinatabassum2562 Жыл бұрын
Thank you sir. Always Beneficial,Awesome work you share👍 Waiting for more such tutorials...
@mohammedzaheer4215
@mohammedzaheer4215 5 ай бұрын
The way of your coding is massive i found such a easy way of creating projects using JavaScript
@emmanuelchuks4405
@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
@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
@blessing-vl9qk 6 ай бұрын
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
@Justicejr0010
@Justicejr0010 Жыл бұрын
🎉🎉🎉 I love the way you explain the work.. Easy to understand and follow up... ❤❤❤
@Think____different
@Think____different Жыл бұрын
Its cool and even child can understand your presentation...kudos to you for making this.. Subscribed👌
@Sir21Goals
@Sir21Goals Сағат бұрын
You're genius brother. Compared to other KZfaq content creators with same calculator project. Thank you.
@zolaniroqwane8491
@zolaniroqwane8491 9 ай бұрын
Thanks, you've realy put things into perspective. Such a good teacher.
@asfandiyar5829
@asfandiyar5829 Жыл бұрын
Thanks for the great tutorial. Can't believe how easy it was.
@emmanuelchuks4405
@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
@GreatStackDev Жыл бұрын
Thanks Emmanuel, this comment will help all viewers, they can simply add
@rananaidu9988
@rananaidu9988 Жыл бұрын
@@GreatStackDev hi bro ..its not working for me
@hammadraza7064
@hammadraza7064 Жыл бұрын
@@GreatStackDev sir why did u change tostring() in delete button?
@lokeshp1929
@lokeshp1929 Жыл бұрын
@@hammadraza7064 that method will collect the value from del button and perform slice operation from string method
@niharikapatel5114
@niharikapatel5114 Жыл бұрын
@@GreatStackDev after adding readonly I still can add anything to display input. Pls help
@jamesmutungaaa
@jamesmutungaaa Жыл бұрын
Great tutorial! Simple and straightforward. Subscribed 👍
@madhanraju9422
@madhanraju9422 17 күн бұрын
Sss 😅
@alexanalo5510
@alexanalo5510 Жыл бұрын
Nice work... I'm a beginner but it was really easy following you.
@charlesotieno8778
@charlesotieno8778 10 ай бұрын
Really inspiring, insightful and educating tutorial. Keep it up🥇🏅
@Sithkar03
@Sithkar03 10 ай бұрын
Hats off to you bro i see many video to how to make calculator but this video is just mind blowing.
@asadorakzaipti
@asadorakzaipti Жыл бұрын
Very nice video, I learned a lot. If JavaScript was written in separate file we would understand it better.
@thecodexweb7766
@thecodexweb7766 11 ай бұрын
You can write the same JS code in separate file and link with the HTML file.
@MbbScy
@MbbScy 8 ай бұрын
​@@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
@funskate8850
@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
@nyokkongor3517
@nyokkongor3517 Жыл бұрын
I like how you approach at a concept with ease, great video content bro, be sure to receive a subscriber
@examtoppers7541
@examtoppers7541 Жыл бұрын
It was amazing experience by watching your videos. How softly and essily you are teaching us. Thanks alot❤
@originalni_popisovac
@originalni_popisovac Жыл бұрын
use normal emojis
@user-zm7db5fg5t
@user-zm7db5fg5t 9 ай бұрын
Thanks 🙏
@riacharda
@riacharda 2 ай бұрын
The eval function was totally new to me. I thought there'd be a complex split and reduce algorithm, Great video!
@__Attitude__
@__Attitude__ Ай бұрын
Haha same
@user-ir1sj5mc8p
@user-ir1sj5mc8p 7 ай бұрын
Thanks 1year searching video calculator best video thanks❤❤❤🎉
@Laci_1_
@Laci_1_ Жыл бұрын
Thank you so much for this amazing tutorial video!
@apassionateteacher5651
@apassionateteacher5651 Жыл бұрын
it's really helpful. Thanks for the great content!
@draftdrvmz
@draftdrvmz 5 ай бұрын
I did it! My first coding project! Thank you for the tutorial!
@ShinRyujinAkingIniirog
@ShinRyujinAkingIniirog 3 ай бұрын
same bro
@namupark6854
@namupark6854 7 ай бұрын
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!
@TheDanielnani09
@TheDanielnani09 Жыл бұрын
Amazing video,thank you so much 👍👑
@garudateleshop
@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.
@sahabStores
@sahabStores Жыл бұрын
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: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.html And More JavaScript projects here: kzfaq.info/get/bejne/b7KKeqVktLK8foU.html
@thedinkydreads9351
@thedinkydreads9351 Ай бұрын
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!
@aashirhameed2526
@aashirhameed2526 Жыл бұрын
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
@Ghulammustafa-wg6cy
@Ghulammustafa-wg6cy Жыл бұрын
Sir, we need more JavaScript projects
@GreatStackDev
@GreatStackDev Жыл бұрын
sure I will be making more tutorials on JavaScript
@Ghulammustafa-wg6cy
@Ghulammustafa-wg6cy Жыл бұрын
@@GreatStackDev Thankyou Love from Pakistan
@rubinatabassum2562
@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
@zindagidopalke------4777 Жыл бұрын
Brother upload source code
@mjustintime7930
@mjustintime7930 Жыл бұрын
Thanks sir 🙏🙏🙏❤️❤️
@iMonu
@iMonu Жыл бұрын
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: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.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 😇
@greentube2024
@greentube2024 Жыл бұрын
bro u r awesome. Your content is mindblowing level. Thanks for this project.
@thaynaramaciel3850
@thaynaramaciel3850 11 ай бұрын
Very helpful. Thank you, sir!
@singletrackstatus1505
@singletrackstatus1505 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.
@olgalisenco
@olgalisenco 7 ай бұрын
Thank you for simple and good explanation. My suggestion for AC Button is :
@Harshk0
@Harshk0 3 ай бұрын
Why ...any Specific reason?
@Cakir00
@Cakir00 Жыл бұрын
Thank you for a very simple explanation.
@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....
@margretmauno1285
@margretmauno1285 9 ай бұрын
Now this is a PRO- grammer... Thanks!
@LinesofLove
@LinesofLove 2 ай бұрын
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
@muzammilansari4443
@muzammilansari4443 Жыл бұрын
very simple and easy to learn thankyou so much please make many small project like this that enhance our java css html skills
@eekka117
@eekka117 7 ай бұрын
Woah this one was so much easier than what i made. Thank you!!!!!!!
@arreybesong6175
@arreybesong6175 10 ай бұрын
Wow you made it look so easy sir! Thanks alot🙏
@Zepha21
@Zepha21 Жыл бұрын
Very good! Thank you very much!
@abigiyatadesse2672
@abigiyatadesse2672 Жыл бұрын
Thank you for the lesson I learned a lot.
@fabfitforever4934
@fabfitforever4934 7 ай бұрын
thank you for this, opened up my knowledge more about css!
@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.
@isamsvideoediting4572
@isamsvideoediting4572 Жыл бұрын
Thank you so much Avinash for this tutorial, This tutorial helped me understand JS very easily.
@GreatStackDev
@GreatStackDev Жыл бұрын
Glad you like this tutorial to make Calculator using JavaScript
@Deepika2002
@Deepika2002 Жыл бұрын
Thank you so much sir aaj mne pehla project bnaya h sirf aapki video ki help se😊😊😊😊
@user-fm4fj5np7g
@user-fm4fj5np7g 9 ай бұрын
Superb. Dude- your effort is awesome. I learnt a lot.
@Codewithganesh124
@Codewithganesh124 3 ай бұрын
Thankyou so much sir for about the project in the calculator by using html and css
@BohemianOnTheRoad
@BohemianOnTheRoad 6 ай бұрын
thank you. i'm apply your js idea on front end mentor design , it's working nicely
@user-qb9xr7bl4s
@user-qb9xr7bl4s 3 ай бұрын
Wow this video is amazing very simple to understand great content thank you sir
@Ugbechievictoria-vi3lt
@Ugbechievictoria-vi3lt 5 ай бұрын
So sample and easy , Good job sir 👏👍
@ryuu5109
@ryuu5109 Жыл бұрын
Thank you so much I'm literally learning from you
@GreatStackDev
@GreatStackDev Жыл бұрын
Happy to help
@moeentrimzi.8532
@moeentrimzi.8532 Жыл бұрын
Nice And Easy Way i built it as yours Thanks for the video
@sounalexander875
@sounalexander875 Жыл бұрын
Thanks for making this amazing tutorial video.
@nishababu9093
@nishababu9093 Ай бұрын
Thankyou sir.Its working perfectly.
@swarupavathipothala6849
@swarupavathipothala6849 4 ай бұрын
Really very nice explanation and i feel ooo how much simple is this ☺thank you soo much broo 🎉🎉🎉
@PhatandChunky
@PhatandChunky Жыл бұрын
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: kzfaq.info/get/bejne/mbVdpM10qMW5iYU.html
@pranjalshrivastava7947
@pranjalshrivastava7947 11 ай бұрын
Working just fine ...nice tutorial 😀
@mubeenuddin8746
@mubeenuddin8746 Жыл бұрын
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
@MuhammadJafar-ls9yf
@MuhammadJafar-ls9yf Жыл бұрын
It was amazing! It's so interesting for computer students.
@GreatStackDev
@GreatStackDev Жыл бұрын
Glad you think so
@Natilol-2020
@Natilol-2020 Ай бұрын
there's a big problem around the 'text display' you can still write, but still great
@user-fp2sy5rl9p
@user-fp2sy5rl9p 10 ай бұрын
Great video! Thank you for sharing. I was just wondering how would I got about separating all the JavaScript into a separate js file?
@unionwithgod673
@unionwithgod673 8 ай бұрын
Great job... Sir please we need lots of JavaScript videos
@EclipsePlayzYT666
@EclipsePlayzYT666 9 күн бұрын
I cant tell you how amazing/helpful this video was. Thanks so much. You earn yourself a sub
@GreatStackDev
@GreatStackDev 6 күн бұрын
Glad you liked it. Thanks a lot for your comment. 😊
@juanramirez4157
@juanramirez4157 10 ай бұрын
Amazing, thank you so much!
@user-bf1sn9ne8x
@user-bf1sn9ne8x 4 ай бұрын
Thank you so much for this video.
@andi-drr
@andi-drr Жыл бұрын
Thank you, quick and i learn more about html css js. Thank you
@GreatStackDev
@GreatStackDev Жыл бұрын
Glad it was helpful!
@saimiqbal1758
@saimiqbal1758 27 күн бұрын
Really appreciated... awesome way to teach... Great Superb🥰🥰🥰
@GreatStackDev
@GreatStackDev 25 күн бұрын
You're welcome. Thank you so much. 😊
@shwartz166
@shwartz166 Жыл бұрын
Thank you very much. Good sir!
@SandySab
@SandySab 9 ай бұрын
Amazing video, it was helpful 😊
@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.
@Angry_Farmerz
@Angry_Farmerz 9 ай бұрын
Love from america! this is awesome man
@MuudoNuux
@MuudoNuux 7 ай бұрын
Thank you so much for helping my Home work ❤
@MamunurRoshid93
@MamunurRoshid93 8 ай бұрын
great tutorial still I have seen ever. this tutorial very easy for beginers. thanks a lot bro
@iamuzzalhossen
@iamuzzalhossen Ай бұрын
Super Simple! Thanks
@brianbluue
@brianbluue 10 ай бұрын
Amazing tutorial. You're Awesome man.
@alberparavel9350
@alberparavel9350 Жыл бұрын
A melhor calculadora!!!
@user-ik6ck5ip2x
@user-ik6ck5ip2x Ай бұрын
Thanks, your teaching is awesome
@aaronmanaloto709
@aaronmanaloto709 Жыл бұрын
Thank you for this tutorial❤️
@GreatStackDev
@GreatStackDev Жыл бұрын
You’re welcome 😊
@-sheny215
@-sheny215 8 ай бұрын
although it didnt even need JS, cool vid :) nice basis to work on!
@PoojaSharma-hp7zd
@PoojaSharma-hp7zd Жыл бұрын
Very nice video & it's so much helpful for me😊.
@generalkuze6893
@generalkuze6893 3 ай бұрын
Amazing, this channel is the best
@OusmaneLy99
@OusmaneLy99 Жыл бұрын
Great video thanks for your help
@manhhoangtien540
@manhhoangtien540 Жыл бұрын
the video is very useful. Could you tell me the VScode theme used in the video? it looks so nice
@nidheeshdesaistudios8439
@nidheeshdesaistudios8439 11 ай бұрын
Amazing lesson 👏🏻
@Sudicomputer
@Sudicomputer 2 ай бұрын
Thank you my brother good job i am from in ethiopia 🇪🇹
@ARSHAQOFFICIAL
@ARSHAQOFFICIAL 11 ай бұрын
Nice video.. I really loved it.. ThankYou..💌
@Brandgamer84
@Brandgamer84 Жыл бұрын
Very helpful video I make thise calculator
@NwangwuFrancis-ym5zw
@NwangwuFrancis-ym5zw Жыл бұрын
your video is perfect and very educative
@chibuzoronochie604
@chibuzoronochie604 11 ай бұрын
Fantastic Video. WELL DONE!
@GreatStackDev
@GreatStackDev 11 ай бұрын
Thank you very much!
@hasnainraza9963
@hasnainraza9963 Ай бұрын
i thought the hardest part would be the actual calculation but i was just eval function thanks
@dag1990
@dag1990 2 ай бұрын
Excellent tutorial, very valuable lesson.
@armangmeshaksale7668
@armangmeshaksale7668 Жыл бұрын
A very nice and educative video.
@vigneshrajasekar-bc4jm
@vigneshrajasekar-bc4jm Жыл бұрын
You teaching me today task Thk u
@MuhammadNaveed-tj2hk
@MuhammadNaveed-tj2hk Жыл бұрын
Great video. learned alot, amazing video
@almitajiri5951
@almitajiri5951 Жыл бұрын
Thank you sir it's very helpfull🙏
@GreatStackDev
@GreatStackDev Жыл бұрын
Most welcome
@tanishkagupta6864
@tanishkagupta6864 7 ай бұрын
This was the easiest one. Thank you so much 🙏
@shaharyarranjha3397
@shaharyarranjha3397 7 ай бұрын
Hello
@shaharyarranjha3397
@shaharyarranjha3397 7 ай бұрын
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
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 378 М.
How to make a Calculator using HTML CSS JavaScript
21:51
Code Traversal
Рет қаралды 724 М.
ROCK PAPER SCISSOR! (55 MLN SUBS!) feat @PANDAGIRLOFFICIAL #shorts
00:31
Is it Cake or Fake ? 🍰
00:53
A4
Рет қаралды 18 МЛН
WHO DO I LOVE MOST?
00:22
dednahype
Рет қаралды 54 МЛН
ASMR Programming - Calculator App Coding - No Talking
34:06
AsmrProg
Рет қаралды 4,5 МЛН
Creating a Calculator using HTML, CSS & JavaScript
34:04
CodeWithHarry
Рет қаралды 897 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 906 М.
ASMR Programming - Coding IOS (IPhone) Calculator - No Talking
16:45
Build A Calculator With JavaScript Tutorial
38:50
Web Dev Simplified
Рет қаралды 1,5 МЛН
ROCK PAPER SCISSOR! (55 MLN SUBS!) feat @PANDAGIRLOFFICIAL #shorts
00:31