Coding A Calculator In Pure HTML CSS and JavaScript – Tutorial/SpeedCoding

In this video I code a calculator from scratch using only pure JavaScript, HTML, and CSS. No jQuery, no external libraries, no frameworks. Just plain Vanilla JS.

I do this sort of thing pretty often, and this channel revolves around tech, so if you like that kind of thing, subscribe! YouTube is hard nowadays, so I can use as many subs as possible.

Website: http://www.portexe.com/

Comments

Richard Chalmers says:

Just letting you know your twitch link on your website goes to https://www.portexe.com/www.twitch.tv/portexe instead of http://www.twitch.tv/portexe. Great videos and look forward to seeing more of them.

K4LI_L1NUX _PR0 says:

i got it to work.

K4LI_L1NUX _PR0 says:

god damn shits so fucking small on the screen i cant even fucking tell if its a “=” or a “-” get the fuck out of here.

Facu says:

Hey, just finished your tutorial, you’re an awesome teacher, pleaseee keep videos like this, i’ll be looking forward to watch’em
Cheers from Argetina
BTW i’m subscriber #57 😀

JD Audio Mastering says:

I had to change a few things but I got it working just right 🙂 thanks

Seisuke Moriyama says:

Thank you very much! I could understand comprehensively!! I’m looking forward to other videos!!

Sergiy Rudenko says:

Thanks!!! Please continue your great work)

PortEXE says:

Hey guys! If you liked this tutorial, give me a like and a subscribe! I am trying to grow my channel, and hit my first milestone of 1000 subscribers.

Carlitos Cabrera says:

Don’t know why the division is not working. If someone can check the code would be of great help https://pastecode.xyz/view/b61d84e6

Green Frog says:

I found this super helpful, as someone trying (and struggling) to learn js!
However if I try to pass through many operators (5 + – * 5) it bugs. How would you make it only accept the last entered op?

Christopher E Jonathan says:

Great tutorial mate! Though I’m having some minor issues. The clear button doesn’t seem to be working as intended, the delete button takes a few tries to work and also I can’t do any calculation with two digits such as “20 + 20” or “20*20” etc… When I try to do such calculations upon pressing the equals button an error within the console pops up  “Uncaught SyntaxError: Unexpected number at HTMLDivElement.performOperation”. I’ve done some research and tried including my code inside a window.onload function but it hasn’t made a difference and also you forgot to open & close the if statement brackets within the updateDisplayVal function. Sorry for the long comment, I just wanted to provide you with as much information as possible. Thanks.

NERO says:

senpai there is a bug in the project!!!!!!!!!!!!!!!!!!!! when you enter the number more than the size of the display, the next number you enter will not appear in the display rather it hides in the overflow how to fix the issue? it is like when [000000000000] when it exceeds in the display instead to push the late number to hide the present number is the one who is hiddedn like [00000000000000] 12234 for as a latest number

NERO says:

is it the same result when you display the functions as let value = function(){}; to let value =() => {}; or is it not?

K4LI_L1NUX _PR0 says:

i did exactly what you did on style.css and the whole entire X column does not line up with the rest. everything else is lined up perfectly. not to mention the top half goes to the middle but the bottom half stays to the left.

Shekh Saifuddin says:

It’s awesome, but it’s very complicated for newcomer 🙁

Eashrak Zubair says:

Awesome video! Subscribed! 🙂

Tom Scott says:

Hi! Great video, I really enjoyed watching how you approached this. I’m just learning HTML, CSS and JS and it’s great to see the workflow of someone with experience. Just checking for those coding along: I don’t believe you need to set variable names for each number (1-9) 21:44 as they are all accessed in a for loop later on.

Marko Stojadinov says:

Is there anyone who can give me entire code?

Diego Albarracin says:

Thank you! Great tutorial and we’ll explained and most importantly from scratch! Hope to see more! Maybe a full responsive web page or some beggining angular !

Subscribed!

Tim.canpy says:

I really loved this tutorial! I’m hoping to see more simple tutorials like this with just plain code!~ Although even when I followed the code step by step I still can’t seem to make the Division button work, here’s a link to my GitHub if you could help find out what i did wrong? https://github.com/Timcanpy14/Code-Practice

HowToMakeMobileGames says:

you’re dressed like the calculator, love it.
Great, tutorial 🙂

Nev T says:

For some reason the updateDisplayVal function doesn’t work for me. I tried even replacing ‘=>’ with the good ol function(clickObj){} but nada. Good tut tho

Antony Allocious says:

How to write keyboard event ? i need to use in keyboard to press the numbers. Am new to this platform. Thanks in advance.

Web Dev Simplified says:

This was a great video! I really appreciated your class names since they were very descriptive and reusable. I also feel you explained everything you did in a concise and easy to understand way for people of all skill levels. I am curious why you decided to use table display instead of something like flexbox or grid. Flexbox for example would have made your styling of the 0 and AC button much easier since you could use flex-grow: 2 instead of manually typing in the widths. You earned a sub from me and I can’t wait to see more of your educational content.

Jonas Voigt says:

FYI: At 18:58 where you are wondering about the comma used as an decimal seperator. There are quite a few countries who use it instead of the dot (i.e. many countries in Europe like France or Germany). Maybe you have been looking at a german/french etc. calculator!
Keep up the good work, I really liked your video!

Abdollah Rabieh says:

Great works. I have never used JS or HTML, but I learned a lot. Thanks Abdol

vijay kumar says:

Hi PortEXE.. awesome!! thanks for the great video, you have one sub under you..
do you mind if you can also attach the code

NERO says:

subbed 7 notified more exercises please. sub192

Emil Andreasyan says:

Greatly explained and done!!! Noticed that you didn’t use “float”.

demian says:

You should set format on paste : true in your user settings, and VS Code will stop doing that crazy stuff 😀

Mir says:

Thanks for videos. Please keep posting more videos.

Nick Springham says:

Good stuff man, particularly enjoyed the way you break down what some of the functions and css properties do in context! keep it up!

 Write a comment

*

Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!