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/
Original source
26 responses to “Coding A Calculator In Pure HTML CSS and JavaScript – Tutorial/SpeedCoding”
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.
Thanks for videos. Please keep posting more videos.
Thanks!!! Please continue your great work)
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.
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?
i got it to work.
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.
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.
Greatly explained and done!!! Noticed that you didn’t use “float”.
you're dressed like the calculator, love it.
Great, tutorial 🙂
It's awesome, but it's very complicated for newcomer 🙁
You should set format on paste : true in your user settings, and VS Code will stop doing that crazy stuff 😀
Is there anyone who can give me entire code?
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
subbed 7 notified more exercises please. sub192
is it the same result when you display the functions as let value = function(){}; to let value =() => {}; or is it not?
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.
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
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
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!
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
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 😀
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.
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!
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.
Good stuff man, particularly enjoyed the way you break down what some of the functions and css properties do in context! keep it up!