Get the Code : http://bit.ly/JSTut2
Best JavaScript Book : https://amzn.to/2GcKzQk
Subscribe to Me : http://bit.ly/2FWQZTx
In this video I continue teaching JavaScript and related JavaScript libraries and frameworks while making a JavaScript Calculator in 1 video.
I design everything using BootStrap. We’ll cover the logic of the calculator using a simple diagram. Then we’ll make a working calculator using our acquired knowledge on functions, if statements and the catching of events which was covered last time. It is amazing how much we can do with so little.
This 45 minute tutorial only has one 5 second skippable ad. Please consider not Ad Blocking it so that I can continue making free tutorials.
RELATED TUTORIALS
►► JavaScript in 1 Video : https://youtu.be/fju9ii8YsGs
►► Bootstrap Tut : https://youtu.be/gqOEoUR5RHg
►► MongoDB Tut : https://youtu.be/-0X8mr6Q8Ew
►► JQuery Tut : https://youtu.be/BWXggB-T1jQ
►► Express / Node Tut : https://youtu.be/xDCKcNBFsuI
Like the channel? Consider becoming a Patreon! Check it out here:
►► https://www.patreon.com/derekbanas
THANK YOU TO MY PATREON SUPPORTERS LIKE :
ckcoder.com
vsolutions.be
Original source
27 responses to “JavaScript Tutorial 2 : JS Calculator”
Learn in One Videos for Every Programming Language
Subscribe to Bookmark them: http://bit.ly/2FWQZTx
C++ : https://youtu.be/Rub-JsjMhWY
Python : https://youtu.be/N4mEzFDjqtA
Java : https://youtu.be/n-xAqcBCws4
PHP : https://youtu.be/7TF00hJI78Y
MySQL : https://youtu.be/yPu6qV5byu4
JavaScript : https://youtu.be/fju9ii8YsGs
C# : https://youtu.be/lisiwUZJXqQ
HTML5 : https://youtu.be/kDyJN7qQETA
CSS3 : https://youtu.be/CUxH_rWSI1k
JQuery : https://youtu.be/BWXggB-T1jQ
TypeScript : https://youtu.be/-PR_XqW9JJU
ECMAScript : https://youtu.be/Jakoi0G8lBg
Swift : https://youtu.be/dKaojOZ-az8
R : https://youtu.be/s3FozVfd7q4
Haskell : https://youtu.be/02_H3LjqMr8
Handlebars : https://youtu.be/4HuAnM6b2d8
Bootstrap : https://youtu.be/gqOEoUR5RHg
Rust : https://youtu.be/U1EFgCNLDB8
Matlab : https://youtu.be/NSSTkkKRabI
Arduino : https://youtu.be/QO_Jlz1qpDw
Crystal : https://youtu.be/DxFP-Wjqtsc
Emacs : https://youtu.be/Iagbv974GlQ
Clojure : https://youtu.be/ciGyHkDuPAE
Shell : https://youtu.be/hwrnmQumtPw
Perl : https://youtu.be/WEghIXs8F6c
Perl6 : https://youtu.be/l0zPwhgWTgM
Elixir : https://youtu.be/pBNOavRoNL0
D : https://youtu.be/rwZFTnf9bDU
Fortran : https://youtu.be/__2UgFNYgf8
LaTeX : https://youtu.be/VhmkLrOjLsw
F# : https://youtu.be/c7eNDJN758U
Kotlin : https://youtu.be/H_oGi8uuDpA
Erlang : https://youtu.be/IEhwc2q1zG4
Groovy : https://youtu.be/B98jc8hdu9g
Scala : https://youtu.be/DzFt0YkZo8M
Lua : https://youtu.be/iMacxZQMPXs
Ruby : https://youtu.be/Dji9ALCgfpM
Go : https://youtu.be/CF9S4QZuV30
Objective C : https://youtu.be/5esQqZIJ83g
Prolog : https://youtu.be/SykxWpFwMGs
LISP : https://youtu.be/ymSq4wHrqyU
Express : https://youtu.be/xDCKcNBFsuI
Jade : https://youtu.be/l5AXcXAP4r8
Sass : https://youtu.be/wz3kElLbEHE
03:16 meanwhile I am watching at x2 😀
hey! thank you for the great tutorial!
I'm thinking of adding something to it
Right now I cannot do consecutive calculations like 1+2+3 without hitting the equal button twice.
Is there a way I can do that by modifying your code or it's another logic?
dam for 26 mins that is a lot of Buts
thank you so much…..
This was a really nice video. You are writing beautiful, clean code and explaining things really well. All the best boss.
1:43 Why take out new value? Why not mark it as stale? (so you can keep pressing = to get more of the same operations?)
Thanks alot for sharing your precious knowledge with the globe. You are blessed!
Hey, Thanks for the Great Tutorial! Minor Note, you can slightly break your code by doing a calculation then hitting the decimal point twice.
there is an error that i am facing, when i put 2 or 3 digit numbers for operations then it shows Nan
You Explained very nicely as well very clearly. I really thank you for this type of video tutorial for us. Can you create Form Validation as well error display in HTML itself? We want to know how to populate error message in dynamically when user clicks SUBMIT Button.
Thanks Advance
Well explained, how to bind keyboard to press in Calculator itself, manually you typed.
A dangling else in the numButPress gave me a headache…
Hello Derek and thank you for the JS series. I am trying to add a DELETE button to my calculator. This is my thinking:
Declare an empty array, resultArr = [];
Inside the numButPress function, i named mine numClick, I have resultArr.push(num). I can get the numbers that are clicked by the user to push to resultArr just fine but my deleteNum isn't working and I'm not sure how to finish it. Here is my function:
const deleteNum = (num) => {
document.getElementById("display").value;
resultArr.pop(num);
}
Can you, or anyone offer any advice? Here is the link the the repl:
https://repl.it/@adt71/Javascript-Calculator
Great tutorial! I used this to create a calculator in C# with winforms. Thanks
Hey Derek ! could you have an update tutorial for wordpress development tutorials ? Thanks
Great project on JS tut, Derek.
Next: Functional calculator with pure CSS
I hope, there'll be Spring tutorial soon 🙂
I get numBut{} if I sit in one place for too long.
What? onclick? I was thought its bad practise. addEventListener>onclick
How do i place the entire calculator at the center of the webpage
Will you do more JS apps?
I liked the calculator logic explanation part a lot……Thanks.
Cocoa C# tutorial please
Great video, as usual. Quick question though, why do you use the same id in multiple elements? Isn't that a bad practice?
Why don't you use Brackets? It has really nice live preview feature.
BTW really nice tutorial !