• Tuesday , 31 March 2020

JavaScript Tutorial 2 : JS Calculator

Code Canyon



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

3d Ocean

Related Posts

27 Comments

  1. Derek Banas
    February 20, 2020 at 17:55

    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

  2. Mindaugas Maslauskas
    February 20, 2020 at 17:55

    03:16 meanwhile I am watching at x2 😀

  3. Afrah Hassan
    February 20, 2020 at 17:55

    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?

  4. Alex Bogorad
    February 20, 2020 at 17:55

    dam for 26 mins that is a lot of Buts

  5. Md Anarul Islam
    February 20, 2020 at 17:55

    thank you so much…..

  6. Krešimir Ćosić
    February 20, 2020 at 17:55

    This was a really nice video. You are writing beautiful, clean code and explaining things really well. All the best boss.

  7. bagok701
    February 20, 2020 at 17:55

    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?)

  8. Jean Saint-Hilaire
    February 20, 2020 at 17:55

    Thanks alot for sharing your precious knowledge with the globe. You are blessed!

  9. Trevor Prescott
    February 20, 2020 at 17:55

    Hey, Thanks for the Great Tutorial! Minor Note, you can slightly break your code by doing a calculation then hitting the decimal point twice.

  10. Sahej Bhatia
    February 20, 2020 at 17:55

    there is an error that i am facing, when i put 2 or 3 digit numbers for operations then it shows Nan

  11. Antony Allocious
    February 20, 2020 at 17:55

    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

  12. Antony Allocious
    February 20, 2020 at 17:55

    Well explained, how to bind keyboard to press in Calculator itself, manually you typed.

  13. Abdul Alhazred
    February 20, 2020 at 17:55

    A dangling else in the numButPress gave me a headache…

  14. Elregar71
    February 20, 2020 at 17:55

    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

  15. Rasmus Agergaard
    February 20, 2020 at 17:55

    Great tutorial! I used this to create a calculator in C# with winforms. Thanks

  16. Rax
    February 20, 2020 at 17:55

    Hey Derek ! could you have an update tutorial for wordpress development tutorials ? Thanks

  17. The Starter
    February 20, 2020 at 17:55

    Great project on JS tut, Derek.

  18. Madars Bišs
    February 20, 2020 at 17:55

    Next: Functional calculator with pure CSS

  19. Hubert Gabryszewski
    February 20, 2020 at 17:55

    I hope, there'll be Spring tutorial soon 🙂

  20. DrFiero
    February 20, 2020 at 17:55

    I get numBut{} if I sit in one place for too long.

  21. Sebeklis
    February 20, 2020 at 17:55

    What? onclick? I was thought its bad practise. addEventListener>onclick

  22. Akash Raj
    February 20, 2020 at 17:55

    How do i place the entire calculator at the center of the webpage

  23. Mai Mariarti
    February 20, 2020 at 17:55

    Will you do more JS apps?

  24. Murugapriya Kumar
    February 20, 2020 at 17:55

    I liked the calculator logic explanation part a lot……Thanks.

  25. Murugapriya Kumar
    February 20, 2020 at 17:55

    Cocoa C# tutorial please

  26. Vasilis Lolis
    February 20, 2020 at 17:55

    Great video, as usual. Quick question though, why do you use the same id in multiple elements? Isn't that a bad practice?

  27. lukasz50000
    February 20, 2020 at 17:55

    Why don't you use Brackets? It has really nice live preview feature.
    BTW really nice tutorial !

Leave A Comment

You must be logged in to post a comment.