Create a Calculator with HTML, CSS, and Vanilla JavaScript | The JS

A special live stream where JavaScript master Zell Liew will be joining me. Together we'll be creating a calculator with HTML, CSS and vanilla JS.

In this stream, we'll be focusing on the HTML and CSS, and then we'll be back later this week to tackle the JavaScript.

/// Github repo ///

---

Come and join us over in the community by clicking the above link! It's a Discord server where you can hang out with and talk to other people who're interested in learning front-end stuff, including me :)

--

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[eddykaggia]

I just started learning how to code, and I honestly thought that there would be way more Javascript code but I am amazed at how little code Zell used. This is helping me view Javascript differently. Thank you.

[dunas]

I hope you keep doing these livestreams, it encourages me a lot lot more on diving deeper into web development and stuff. It really keeps me motivated!

[dogustemizsoy]

These live streams are incredible thank you so much Kevin for providing this content. It really is helping me throughout my journey. Would love to see more live streams.

[CedLePingouin]

Thank you Kevin and Zell. I enjoyed the two-part stream. Good idea to team up and have Kevin do the design, and Zell the programming.

While I think the use of data attributes is ok to pass data from HTML elements to the JS code (we got to find a way, and this is it), I'm less thrilled about keeping the state itself in dataset attributes. I prefer to have my JS state where the code is : in JS. Either as variables or JS object properties. But hey, as Zell said, there are often many ways to achieve things, and sometimes it's just a matter of personal preference (the same for "if vs switch", or the semicolons :-) ).

[soniablanche]

What I would have done to prevent the event to fire when clicking on the grid gap is this:

if(event.currentTarget === event.target) return;

event.currentTarget is the element we are listening to. event.target is the element we have clicked. If they are equal then it means we clicked on the grid gap.

[theunderdogunion]

I really enjoyed both of these sessions. Thank you both for collaborating and creating this for us.

[Fachuro]

You can return early with a switch also, you dont have to use a break - the advantage with a switch is in performance, because you only evaluate one expression vs. evaluating 4 expressions with the if statements. It doesnt matter much when you do few evalutions anyways such as here, but at scale it really starts to become noticeable.

[Astras-Stargate]

Great livestream, Kevin! Thank you and Zell for creating an interesting app!

[ahmadshah]

20:37 my calculator is not showing number it is showing undefined

[nuncapierdaslaclase]

Great video! Thank you for the great content. I did not understand why state was being stored in the DOM using dataset instead of using a hash. Zell mentioned that it made things "simpler" but there was not much substance on why it was more simpler. Can you please elaborate why dataset is better than using a hash variable for storing state?

[mickwhyte]

Great work guys thank you. You make a daunting subject for beginners accessible.

[ayushbhagwat]

This is was great!!! I really enjoyed this

[VikingOwl]

I think noone noticed (or I didn't get it), but Zell forgot to add the 'clear' function :D and the display shows nothing when you hit '=' at the start :)

here's my version: (I changed the data-type of clear from 'number' to 'clear' and I added it to the css number property as well)
if (type === 'clear') {
const operatorKeys =
operatorKeys.forEach(el => el.dataset.state = '')
key.dataset.state = ''

= '0'
display.textContent = 0
}

and here is the fix to the display bug:
if (operator) display.textContent = calculate(firstNumber, operator, secondNumber)

[kushagra]

Why aren't u replying Kevin please... It’s a humble request Kevin and Zell please make a video on how to make a chess game using Js
It will be really helpful...
Thanks
Btw love your videos and livestreams
Edit:Please reply Kevin

[채채-lc]

Thanks for your video. While I was watching this lecture, I came across a question. What do you call the 'display' thingy when you use 'display.textContent'?

[nishan]

I'm not trying it yet. But I hope it will will be a great one.

[pureretro]

Nice tutorial Kevin & Zell. It's a pity I missed the live stream as I would have liked to have asked why Zell didn't just store the whole of the calculation (10 + 2 - 3 / 2 for example) and then calculate the result with an eval(). It would mean that you wouldn't need to store the individual values and operators and could 'chain' calculations one after another without swapping the first and second numbers internally. It was interesting to see his technique.

[abdulmalikyarima]

this javaScript doesn't work on my system, what could be wrong?

[janbartosiewicz]

Can You please post Your code? It will be very helpful for people :)

[manuelatuchukwu]

My equals button isn't working, I've checked everything and it's still not working, help anybody?