Create a Scientific Calculator With JavaScript, HTML and CSS | JavaScript Project For Beginners
HTML-код
- Опубликовано: 11 сен 2024
- @Code Explained Says Hi!
Today we're going to create a fully working Scientific Calculator App with Vanilla JavaScript and HTML.
This a beginners tutorial, And I'm going to discuss the logic behind every line of code first, then once you're ready and fully understand what we're going to do, then we can open our text editors,
What you're going to learn in this tutorial:
* How to select an HTML element in JavaScript using querySelector method.
* How a forEach method works.
* Modulo operator %
* Click event, and the target property to target a click element.
* Select The last element using querySelector method.
* JavaScript replace method.
* JavaScript unshift method.
* Create the factorial function in JavaScript.
* Gamma function in JavaScript.
* Handle angle units (radian and degrees) in JavaScript.
* Trigonometric and Inverse trigonometric functions in JavaScript.
* The Array pop and push methods.
* JavaScript Errors - Throw and Try to Catch
-----------------------------------------------------------------------------------------------------
| LINKS |
-----------------------------------------------------------------------------------------------------
DOWNLOAD SOURCE CODE + STARTER TEMPLATE:
github.com/Cod...
🌍 Social Media Links.
◾ Facebook : / code.explained.official
◾ Twitter : / code_explained
◾ Instagram : / code.explained.official
◾ GitHub : github.com/Cod...
💲 Suppport the Channel
Paypal : paypal.me/Code...
Buy Me a Coffee: www.buymeacoff...
🚨 Big Announcement! 🚨
Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better.
If you find my content valuable and want to support my work, there are several ways you can help:
Like & Share: Simply liking the video and sharing it with friends helps a lot!
Subscribe & Hit the Bell: Stay updated and never miss a new video.
RUclips Thanks: Use the "Thanks" button below to send a one-time donation.
Join the Channel Community: Get exclusive perks and behind-the-scenes content.
Buy Me a Coffee: buymeacoffee.com/CodeExplained
PayPal Donation: www.paypal.com/paypalme/CodeExplained
Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support!
Let’s keep growing and learning together! 🌟
Bro your efforts and way of teaching are commendable. Keep doing what you are doing and keep teaching us like this.
I'm so glad to hear this from you, thanks a lot 💖
You have the best videos in the internet. Your way of teaching are amazing. Im from Brazil and I prefer to learn with u then with my teachers. Keep going! U rock!
Happy to hear that, thanks 💖
Wow so nice sir you are King of the lectures sir you are my last favo teacher
I love you
Amazing tut man, keep it up! Everything it's so well explained, LOVE IT!
Thanks, happy to help.
I have become a huge fan of yours now. Damn the Explanation was sooo good it was so easy to understand the concepts..... I'm gonna always follow your work for some great inspiration and boost my motto. Thanks alot for making such a detailed Video on such projects
Thanks a lot, and happy to help.
What a pleasure. Thank you for such informative, educational content!
I tried with some repeat watch on this scientific calculator video.. it worked well for me.. really appreciate the efforts.. keep up your contribution..
Great job! glad it was helpful, and you're welcome!
Again thanks for your support!
If i could give infinite number of likes to this video I would keep on tapping the like button ..... thanks a lot man!!!!
🙏🙏
Thank you so much 😀
Very informative and well explained. I will be waiting for your next video
I'm so glad to hear this from you, thanks a lot 💖
Grate video! For a future video could you teach us how to make a clock? You're my favorite JS instructor on youtube.
I'm so glad to hear this from you, thanks a lot 💖
I will try to
Really awesome, please make an advance Login page using Nodejs , express and mysql.
Happy to hear that, thanks 💖 I will
Please enter the complete code, I have a problem and I can't solve it. I'm Brazilian and I don't understand English well
I have completed the tutorial and finished the code....if u want me to share it then i can😊😊
@@kushagra4586 would be great. My discord Valmir#7065, in case you want to add me and send there
@@kushagra4586 please! I started this project but its hard to follow along because he does not explain in code hes talking and completely ignoring things some beginners are unfamiliar with
strikclybisnez@gmail.com
Check the repo on github, link is in the description?
Shalom howdy morning how. You did an amazing job with this.
I would like to extend this to have a matrix (linear) algebra and calculus mode, a graphing window to graph equations, a conversion mode (volume, length, weight/mass, temperature and currency), similar to the magnificent windows calculator. By the way, they have allowed this to be open source and published the code upon Github to the best of my knowledge. I have not be able to build it out in Visual Studio yet. In any case, you did an amazing job with this, your teaching style is great, and you have a very calming demeanor. Thank you for sharing!
Awesome 👌
thanks
this channel is amazing
Happy to hear that, thanks 💖
i am trying for the whole day, still scientific calculator is very very tough for me as a javascript beginner (first 5 days). Specially the first bracket is tough. I have first found out the index of all the operators but facing problem due to the bracket thing.
Nice, codeExplained.
If you can, make project videos on React in this way. It's really effective. :)
Thanks. I will try to
Thank you so much for this video.
Any ways we can donate for you to make such video going
I'm so glad to hear this from you, thanks a lot 💖
Any support will be appreciated.
Yes, for deg, cos(180) is -1 but if you put cos(90) it returns 6.123233995736766e-17 instead of 0.
I checked it and it works just fine.
Amazing
can you send the full code, i tried setting it up the exact same way and my buttons are not working
hello , I was trying to get it by but still I get an error so can you please share final version of the code
Here is the entire code of the project,with few modifications ↓
repo link ===> github.com/mv1249/ScientificCalculator
thank you bro :)
Hi i just started this and isnt POWER easily solved in ES6 by just using ** ?
Thank you so much
You're most welcome
Can u please teach us how to make Chess using JS .It will be really helpful.thanks.
I will try to
@@CodeExplained thanks a lot
Hi, thank you. Have you saved or uploaded these codes?
شكرا جزيلا
Please give me complete code. Because I am facing some difficulty on your GitHub code. Please give me complete code.
fork from my repo,i made the same calculator with additional changes too!!
my repo === > github.com/mv1249/ScientificCalculator
Did you get the source code yet or not?
@@CodeExplained yes, I got it
@@CodeExplained pls no
i cant get this part to work and cant figure out why
const row = document.querySelector(".row:last-child");
row.innerHTML +='
${buttons.symbol}
';
added_buttons++;
it keeps on showing this error msg : Unterminated string literal.
hi, i used a foraward slash - \ - at the end of the line before indenting so it could stop showing the error. Hope that helps.
' \
${button.symbol} \
';
Actually there's a mistake with the factorial. when it's {number}!!! it's a Triple factorial not three factorials after one another. It would be a simple fix but this might make a HUGE mistakes in answers.
Triple factorial:
With factorial you go down by 1 each time, with triple factorial you go down by 3 instead. there is also double factorial, quadruple factorial, exc.
Definition:
n!!! = n * (n-3)!!!
( single factorial: n! = n * (n-1)! )
Examples:
5!!! = 5 * (5-3) = 10
7!!! = 7 * (7-3) * (7-3-3) = 28
10!!! = 10 * (10-3) * (10-3-3) * (10-3-3-3) = 280
you're absolutely right!
What if I want to make this mobile responsive
Sir I not know completely English I have this larg problem anyway I love you I know Urdu Hindi languages
can you please help me how to responsive this
Can you do an algebra calculator?
Good tutorial but sir i dont understand English well so can you give me full source code am having issues
The code is incomplete in github sir..thanks
please how can i get the source code ?
check the repo on github, link in the description.
Please , We need you to come back 😢🙏🏻
Thanks
Thank you
You're welcome
Hey! Could you please let me know if I can reuse this code?
Yeah you're free to use the code, and it would be great if you can mention the channel if that's possible!
variy naise lerning system
thanks
github code is error
why adding rows in the function that creates buttons is not working for me? ```butoane_calc.forEach( button => {
if (added_btns%8 == 0) {
input_element.innerHTML += ``;
}```
Don't you have a typo here: butoane???
@@CodeExplained ^-^ it's buttons in romanian, i changed the name of the array of buttons
oh okay.
can you show me the error from your console
@@CodeExplained i work in Notepad++, the buttons do not appear, but the condition added_btns%8 == 0 is available, i'll try to figure it out
@@CodeExplained JavaScript error: Uncaught TypeError: Cannot read property 'innerHTML' of null on line 221, line 221: input_element.innerHTML += ``; , also const input_element = document.querySelector('.input');
Please make tutorial, how to make “ karate game “ in JavaScript.
I will try to
@@CodeExplained 👍🌹
Thanks for the video. it is really amazing. Why did you use "eval()"? On developer.mozilla.org I saw a warning that it is an enormous security risk : "Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval()"
Yeah that's true, there is a work around to fix the issue. but I didn't want to talk about it. because at the end, it's just a Calculator project.
@@CodeExplained thanks, your video lesson is very helpful. great work
@@gordonfreeman_wf Yeah hacker can hack you website using sql injection if you use eval()... for morw details you can study a hacking lab call eval() sql inj.. ... www.portswigger.com
Html code where is???
in the video
Can't you see it?
Can anyone tell me, how did he add symbols like under root and delete symbol in a string variable? I am new to JavaScript :(
i think he does not explain thoroughly
I googled them, then copy paste.
√ x² ⌫
Hey can you drop the final code for reference
See description!
You can hepl me fix
Cos(90)=0 and sin(180)=0
What's wong with it?
Really bad overcomplicated solution.
Sorry, sir. But when you do a calculator using "eval" it's always fail, cause most of the Tech Courses or Training Programs require to make a calculator without eval 🥲