How to make a Calculator using HTML CSS JavaScript

Подписаться 46 тыс.

Просмотров 721 тыс.

50% 1

Make a Calculator using HTML CSS and JavaScript | JavaScript Project for beginners | JavaScript Calculator Tutorial
In this JavaScript Calculator Project, we will first create the UI design of Calculator using HTML CSS and then using JavaScript we will add the functionality to the calculator. This is the best JavaScript Project for beginners.
Must Watch Video :
✔ Calculator without using JavaScript In-built function :
👉 • How to make a Calculat...
If you like this video, please Subscribe to this channel👇.
bit.ly/3E8I2oV
Source Code : github.com/CodeTraversal/Java...
Video Contents :
00:00 - Preview
00:08 - HTML Coding
02:44 - CSS Styles Coding
03:08 - Add Google Fonts
14:09 - JavaScript Coding
21:04 - Final Result
✨Tags✨
make calculator using HTML CSS JavaScript
JavaScript Calculator Tutorial
Make Calculator in HTML CSS
HTML calculator with JavaScript
calculator using JavaScript

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 719

@codetraversal Год назад

If you like this video, please don't forget to like and subscribe to this channel🙂.

@safwankhattak9769 Год назад

mam mera ek error a raha hai jab me calculator me koi bhi button press karta hun to wo bohttt likh deta hai jese 9 press kiy to ye a jata hai 99999999999999999999 same esi tara har word ye kya problem hai ? mene full copy kiya hai still ye a raha hai

@codetraversal Год назад

Aapne kahi addEventListener all buttons pe to nhi laga diya. Check I have applied the listener on button variable that is used inside forEach loop not on the buttons variable. And use consoe.log() to check how many times your event is running on click of a button. button and buttons are two different variables. You can use different names of variables to avoid confusion.

@sushilkanhar7250 Год назад

Mam equal button work nehi kar Raha hei jitna research karneke bad v Problem - equal symbol show ho Raha hei Agar 1+2= press karuta 1+2= Output heraha hei please solution bata do🙏🙏

@codetraversal Год назад

First evaluate the output string using eval() function and then pass that string to the input or your display.

@rahuladkar6649 Год назад

@@safwankhattak9769 use this Code : - let input = document.getElementById('inputBox'); let buttons = document.querySelectorAll('button'); let string = ""; let arr = Array.from(buttons); arr.forEach(button => { button.addEventListener('click', (e) => { try { if (e.target.innerHTML == '=') { string = eval(string); input.value = string; } else if (e.target.innerHTML == 'AC') { string = ""; input.value = string; } else if (e.target.innerHTML == 'DEL') { string = string.substring(0, string.length - 1); input.value = string; } else { string += e.target.innerHTML; input.value = string; } } catch (err) { console.log('Error:', err.message); input.value = 'Error'; string = ''; } }) });

@RonakSinha45 11 дней назад

Finally someone using HTML CSS and JS very perfectly

@adeebkhan8531 Год назад

I recently discovered this channel and found it extremely useful in terms of learning. Plus I really liked your way of teaching (simple and easy). Thanks :)

@ManishKumar-cn2ou 8 месяцев назад

Ar ye hai kon ladka ya ladki

@AmarSham1901 2 месяца назад

@ManishKumar-cn2ou wow ap ko ye tak nahen pata chala, wah wah!!! ye lakri heain 😀😀

@IslamicTips-786 11 месяцев назад

One of the most very very helpful video with simply explanation.... Keep it up we are always with you ... Take Love 💕

@user-vb2iy7gb6b 5 месяцев назад

you are such a good teacher i saw on RU-vid and your voice is so cute, sweet and listenable

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

Very nice and simple explanation. Please keep making more such JavaScript videos for beginners. Sabki iss se JS ki practice hoti rahegi. Its important for learning consistency. Thanks :)

@learnerboy-kc9fd 10 месяцев назад

Wow, what an amazing teaching method! The way you delivered it is outstanding.

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

Thanks

@CodeLearn2715 Год назад

Thanks a lot 😊😊❤❤, this video is very helpful to me because currently I'm learning front-end development.

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

बिल्कुल तसल्ली से और सबसे आसान तरीके से .. HTML, CSS और JAVASCRIPT की सहायता से आपने CALCULATOR बनाना बताया ! शुक्रिया ...

@codingwallah-ou1hm 3 месяца назад

Subscribe for learn coding : ru-vid.comUgkx1oxDYQjpogD0gq03eQ74_2kEls9KvIY2

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

This video is really helpful and really easy to understand. Thank you so much. I am starting my 9 months full stack web dev course here in France from october and I believe your channel is going to help me a lot.

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

Really glad to know that.

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

Bro do you know hindi??

@HIMANSHUSINGH-kf6nv 2 месяца назад

@@shauryaxd1218 GOOD QUESTION

@oscarpug5253 Год назад

One of the best video in which i have ever seen ( Thanks a lot ) None is hidden

@user-hm4xq3po9b 10 месяцев назад

your javascript concepts and the way you deleiver to us is so amazing kindly make a full tutorial of javascript course

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

Your method of explanation is very good....I was very impressed.☺ And have you upload a full course on JavaScript...🙄

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

Extremely Beautiful Work & its awesome & very helpful ❤

@cloudcodesolutions 16 дней назад

Great tutorial! This step-by-step guide to building a calculator using HTML, CSS, and JavaScript is perfect for beginners and advanced developers alike. The explanations are clear and easy to follow, making it simple to understand the logic behind each part of the code. Thanks for sharing such an informative video! Can't wait to see more content like this. 👍

@itssuhanisinha1986 3 месяца назад

This is such a perfect video for beginners, good explaining, because in many videos they don't explain why we are using and what are we using in our project. Please also make videos on React js projects for beginners just like this :)

@adityashrivas4671 Год назад

Nice Explaination...... Easy to understand it helps alot...many more to come.........

@deeprelaxing7071 Год назад

Good explanation. Very helpful for beginners like me. Lots of Thanks ❤❤ I have been subscribed your channel. Keep uploading new topics

@codetraversal Год назад

Thanks

@vedantpurohit5032 Год назад

What a tutorial simple and beautiful 🎉 keep going 🙌

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

Bahot achha video hai, explanation bahot achha hai aur saath me jo aap visual studio ke shortcuts bata rahi hai wo bahot bada plus hai. Thank you Mam.

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

best. i love their teaching method. explained every single detail. tysm.

@mr.avneeshwd209 Год назад

Great,easy to understand.. Appreciating ✌

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

once the video is posted by "code traversal" you know that you are going to understand everything quickly... thanks for everything that you teach us... i hope you will never stop teaching cause you are a very good teacher.... much love.....

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

Thanks a lot.

@xyeem1566 Год назад

You keep explaining everything . Writes code and tell.that function . Awesome

@codetraversal Год назад

Glad you like it.

@FarooqiAseels 4 месяца назад

Masha Allah So Simple Beautiful And Awesome Calculator!

@mukeshkumargeu Год назад

Explanation Level To Outstanding Hai Aapki, Mujhe Coding Samjh Nahi Aaa Rahi Thi Lekin Aapki Video Dekh Ke Laga Ki Aap Jaise Seekhane Wali Ho To Kuchh Bhi Seekh Sakte Hai, Please Aap HTML & CSS, Java, Python, C/C++ And More Programming Language Sabhi Ka Video Upload Kijiye

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

Nice video mera dimaag kharab ho Gaya tha k kesay code likho per abhi thor'a relax feel Kiya JazakAllah

@SCOB39MachpalleBalaji-hd9xn Год назад

Your teaching is very good,I mean it is very easy to understand all those things (html&css).keep going and create a content as like that

@codetraversal Год назад

Thanks

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

Madam man Gaya super simple and understanding not comicated like others video ty it has help me loot 🎉🎉🎉

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

Your explanation is the best ❤. Whole video goes like as smooth as butter. Great explanation 👍.

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

Thanks

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

Great Vedios and too much informatics Love it I just request you make vedios on Css playlist to with examples it will very helpful

@rnhminitv 3 месяца назад

Ma'am this and your all tutorials are amezing and Your way of explaining is also very good, this tutorial is very very helpful for me, thanks a lot ma'am ❤❤❤❤❤

@rupdeepthey Год назад

Very nice explanation. Keep up the good work!!

@nrsmartlife6470 Год назад

Nice tut very easy to understand looking forward for more tuts

@codetraversal Год назад

Thanks

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

Apki Awaj Bohot Hi Pyari Hai...❤ Thanks For The Beautiful Explanation I have understood it all properly

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

You're absolutely such a great teacher 🤩❤ this is amazing 😍

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

Wow! what a Superb explanation sister,keep going ❤❤

@chandrakantagrawal674 Год назад

thankyou, this calculator design is useful. I have watched many calculator videos before but your design is so beautiful like the elevator keypad. your code explanation is easy to understand. 😊

@codetraversal Год назад

Glad you like it.

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

outstanding way of teaching , really understandable ma'am keep it up

@shashankkhare-zw1ie 2 месяца назад

really liked this , you explained it effortlessly , thankyou Mam!!!

@yogeshchaudhary1201 Год назад

Super❤️ Keep growing 💫 Make more projects for us 😊 it's halp us ✨

@codetraversal Год назад

Definitely.

@atifbashir1214 24 дня назад

wow! its just amazing your teaching method is so beautiful like your voice thanku so much 😊😊

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

Yaar Calculator to bohat Awesome Bnaya hy Mgrr Apki Voice Bohat Pyaari hyy💓💓

@IslamicScienceTechnology 15 дней назад

Fantastic video,i have learnt so many things from this video.thank for helping.

@pratibhanevhare2757 Год назад

You clear my doubt thank you so much.good work

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

Very nice demonstration and very clearly explained, thank you very much for teaching 😊 god bless

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

Thanks a lot.

@priyanshudongre143 Год назад

Nice to see your video, I hope you keep making more videos like this😇

@codetraversal Год назад

Thankyou

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

Your styling imagination is very good!

@alonehacker108 Год назад

Wow didi aapne bahut zada accha or attractive Calculator banaya😱😱🥶😱 😊😊😊😊

@mohshinkhan4415 Год назад

Great Explanation.Waiting for some more projects

@codetraversal Год назад

Definitely

@WaleedPathan-sd8vt 2 месяца назад

Mashallah bht acha kya ha apny or mujy kafi had tak samjh aye ha❤❤

@tech-mindresearch9299 Год назад

That is a very good explanation. Though I didn't understand Hindi, but I could understand bit what she was doing. Thanks.

@MR.X_ROW 4 месяца назад

Video to bahut hi badhiya hai lekin usse kahi jyada sweet apki voice hai, I love your voice ❤❤

@vandanaingole4057 13 дней назад

bhut accha method hai mam. explanation way is awasome. getting 100% ❤❤❤. keep it up

@rmworld420 Месяц назад

Very nice video , Video dekhne ke bad easy ho gaya. I appreciate you 😍 .

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

wow mam the way of your teaching is awesome.... i found a diamond on youtube i like to wach your all videos i love you mam love you 3000>> this will help me alot to start my js journey thanks a lot of you 😃🥰😀

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

Thanks a lot

@monikadesai8251 Год назад

That's so helpful... Thank you so much... 😇🌹

@laxmansingh1488 Месяц назад

great mam i just complete js and directly watched this video and I made it thanx mam

@rajaga.raheem6103 5 месяцев назад

Keep it up I'll definitely start with this calculator insha'Allah 😊😊😊😊

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

Very explicit and wonderful demonstration.

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

Thanks

@FaizanSarwar-zs8eu 16 дней назад

Tremendous work.! Kindly provide me with some tactics on how to improve my front end development because I am a newbie to these things. Ps ( I am very confused by divs and their relations). Waiting for your reply.....

@sounakjyotim-0532 11 месяцев назад

This was really easy to understand.

@user-xp7tx4fb9d 7 месяцев назад

bohut asa madam . sekhate reheye.....new new project banete raheya .........

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

Thanks a lot ❤ This is really helpful for the beginners

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

Glad to know that.

@snigdharoy1938 Год назад

Make More This Kind Of Video,, Thank You ❤

@biswajitmaity8169 Год назад

Mam maine bohot calculator making video dekha but.. Aap ek ek point bolte ho... It's very helpful... Aur bhi aise project banao mam.. Portfolio website, toc toe game etc

@codetraversal Год назад

Thankyou.....We will make everything one by one.

@studypoint3188 Год назад

This video is so helpful for me and Thanku so much mam this is my first progect in js thaku from the core of heart 💫❤❤❤❤❤

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

Same

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

bohat badiya aap ka calsy ka design lajavab hai is me koi shak nhi bohat badiya ye design ka jo shadow ha ye mere samjme nhi aya

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

Very useful video for beginners.

@sudhanshubharti5914 Год назад

The way you explain the things it's very nice 👌, and you have a sweet voice ❤️ also , keep growing.

@sudhanshubharti5914 Год назад

Aur ha i subscribed the chanel also.

@codetraversal Год назад

Thanks

@m.dansari7161 Год назад

Aapka ye project 100% samjh mei aya mujhe thanks .mai web dev .corce kar rha hun fihaal

@codetraversal Год назад

Glad to know this.

@beMdgamer Год назад

Didi ap Script part ko thoda aur explain kar dete to achha hota. Kiuki jisko bhi Js nehi ata he bobhi samjh jata. This is my point of view.

@codetraversal Год назад

Thanks for the feedback. I'll try from next time.

@premrathod11 Год назад

Script is JavaScript used and writing program

@romeeovlogs4148 Год назад

Isme string property can not create bata raha hai

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

VERY EASY TO UNDERSTAND! THANKS A LOT 😍

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

royy mt miss ne reply to nahi kra hmm kr rhe hai bacha

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

i saw your first video in this , let me check your all videos.

@ece-27-rupsasaha85 7 месяцев назад

Thanks for this video,it helped us a lot❤

@shabeerhossain212 Год назад

Really appreciate your efforts. Thank you

@codetraversal Год назад

Thanks

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

un calculadora sencilla pero hermosa, y su JS es fácil de comprender para alguien que esta recién empezando

@Rapunzel-mo9ur Год назад

There is a bug in your js code. (For example for the input 9%*3 = nothing happened. So, the user will get confused.) Use try-catch to throw a "syntax error ". Btw Thank you for ur amazing afford ma'am.

@nikethdonthula2123 Год назад

Yes that is a bug and here is the code to get rid of it : This is the code for only the If part if(e.target.innerHTML == '=') { try { string = eval(string); if(isNaN(string)) { throw new Error('') } input.value = string; } catch (error) { input.value = "Syntax Error"; setTimeout(()=>{ input.value = ""; },2000) } }

@Rapunzel-mo9ur Год назад

@@nikethdonthula2123 why don't use chatgpt instead😉