Build A Simple Calculator With JavaScript | Mini Project For Beginners
Vložit
- čas přidán 16. 07. 2024
- 👉 Check out Kite - A Free AI-powered Coding Assistant (download link):
www.kite.com/get-kite/?...
This is the day-28 of #30days30submits. Today we are going to create a simple calculator with vanilla JavaScript. That's a mini JS project for JS beginners & hope you will like it.
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/XWdVgXr
👉 #30days30submits : github.com/ShaifArfan/30days3...
Timestamps -
00:00 - Intro
00:11 - APP Preview
03:31 - HTML
11:01 - CSS
21:02 - JavaScript
1:11:50 - Outro
▶ Also Watch :
Make a full website with HTML & CSS: • One Page Full Website ...
HTML & CSS Landing Page : • HTML & CSS Website Lan...
Mini Project for HTML & CSS : • Responsive Website Wit...
How To Make A WordPress website: • How To Make A Professi...
▶ Some useful Playlist :
HTML & CSS: • HTML & CSS
Vanilla JavaScript : • Vanilla JavaScript
Frontend Mentor Challenges: • Frontend Mentor Challe...
🌐 Join The Community :
Our website : webcifar.com/
Facebook Page : / webcifar
Facebook group : bit.ly/fb-group-webcifar
Instagram : / web_cifar
twitter : / webcifar
Github: github.com/WebCifar
#30days30submits #webCifar #javascript - Věda a technologie
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/XWdVgXr
👉 #30days30submits : github.com/ShaifArfan/30days30submits
The BEST JS calculator tutorial on the web. hands down.
this was an amazing tutorial. the design and code itself are great. this is exactly what i needed to troubleshoot my own calculator app. you definitely earned a thumbs up and a sub. thank you so much
got this project done without any suffering....Jazakallah khair
Awesome Tutorial, keep them coming, awesome how you walked through the reasoning for everything!!
Helped me Alot
Thank you
Thank you for the class! I learned a lot!
Hands down the best calculator on vanilla JavaScript period.
Every one uses eval function and you hard coded the logic, and you added so much functionality and all this is 1 hour,
Please make such good projects more that help us in learning how to form logic.
This video is under-rated
The best calculator built with vanilla JS...keep it up
Awesome tutorial brother best js calc tutorial ive seen. keep up the great work
Thanks
Thank you kindly sir, you are explaining it very well and it was fun to follow along and make this calculator with you
Great! Thank you very much! 🙏🙏🙏
Great Job man!!
tank you for this awesome guide. its so beginner friendly
If not for anything, you winned me over as a subscriber coz of this video... Thank you for the great work🔥!
Thanks. A little confused with numbs and elements but helpful tutorial!
Good video, thanks. Good to learn from different sources. many thanks
This was so helpful. thanks
thank you so much for this video. you explained sooo well the logic that i was able to make some changes for my own calculator project. like subscribe and share for this gentleman
You are AWSOME🔥
Thanks Brother ♥
Great job 👌
Thank you
Good tutorial!
Thanks!
great history feature still watching ,,,,,,,, unique really :D validation as well
Thank You ✌
Thanks for this video
Most welcome
This is the best calculator titurial
Excellent work. One question, What would need to be done to change the color of a key or row of keys like at the top to be a different color than the number set below...?
awesome
dope...going to start on an earlier video
Go for it!
please make video over operator change logic....which we see in the real calculator
(for example -> we press (*) by mistake, then we change the operator after clicking on the another one)
thank you
You're welcome
How can I do continue calculation with = operator
At line 24 you called mathOperation function()...but you not defined it...how it worked...because when i'm calling that function...it shows error...kindly clear my doubt
forEach loop is giving me an error, why
Day 29 portfolio something like this. www.templateshub.net/demo/?theme=robert-personal-onepage-html-template
I like this code. It is verry clean and verry clear, but the calculator is not doing the calculations in the correct order. This is happening because of the temporary result. One example is: 2+3*2 . The result should be 8, but the calculator give the result 10 witch is not correct. How can we fix this?
There is a small bug . if second operand is empty and has "." value and when you press equal button the result says NaN. Nevertheless great tutorial
Thanks for mentioning it.
This code doesnt follow MDAS
Can you make a sciencetific calculator?
I can try
This is so nice, made something similar to this ya'll can check it out
31:33
Uncaught typeError : numbersE1.forEach is not a function at......... Sir sir why it is happening and what do it for this error. Please tell me
same here, do u find the solution ?
check if you have const numbersEl = document.querySelectorAll(''number'). At first I also had this error but I noticed that I have const set with just .querySelector (without 'All' at the end)
What u say and write i understand clearly but when i start to code by myself i stuck ((( Could u say why ? how u became to this level ?
It happens with everybody. You need to keep trying.
@@webcifar Thanks for feedback i will do my best!
You need to work more on logic brother , keep it up
Thank you
Dude, I was follow every step on this video tutorial but my calculator doesn't want to click (unclickable) - What the heck is going on? how I can connect with you? How do I know if you or someone replying this my message in youtube?
Its only the UI that's work, in my code.. pls some help?
Check the click eventlistener. If you are still facing the problem just join the facebook group and there you will find me.
@@webcifar Thanks a lot for replying my message dude I really appreciate it, for now I don't have FB account I'll make it & finding you (on it) later..
@@ce7083 same problem for me (unclickable.).if you find a solution for that .help me
@@ce7083 hi, did you get the buttons to become clickable?? I don't have Facebook to connect with you
Ьл
Too much code
this tutorial is great but the tutor doesn't explain well. he gets confused many times and can't explain in words cleary what he is doing and why.
Thanks for your feedback.
Kindly clear how can we connect the haveDot to e.target.innertext in this condition -- if (e.target.innertext==='.' &&!have dot)
havaDot=true;
if we are clicking do (e.target.innertext) and we don't have a dot yet in out number then add the dot also make have Dot true.
Hello sir,
I convinced with your point thx a lot but my query is how this condition will understand by calculator if( e.target.innertext == '.'(convinced) &&!haveDot (this condition not convinced mean how calculator will know that we dont have dot previously in a number by this condition because we dont mention anywhere haveDot is equal to '.' And We simply considered haveDot is boolean as false ) )
Kindly explain please!!!
@@bineethl2666 Initially the haveDot value is false but when we are clicking the dot if you can see we are changing the value of haveDot to true. Now it means we have the dot inside the number. After that you can't add another dot in the same number because the haveDot is now true. and when we are adding a new number, if you notice we are again changing the havDat value to false so that user can add dot to the new number.
@@webcifar thnks a lot 👍
Why we have given haveDot value is false ; we can give it true also and apply condition vice versa;