Adding specific styles to every element on the page can be dangerous, especially in a bigger codebase with other people on your team. If you want to avoid repeating CSS rules you can rely on inheritance: setting a rule on a parent will allow its children to inherit it.

For example all your elements are children of .grid-wrap, so you could set the font-size, weight and family there. The only caveat is certain elements (including buttons) don't inherit most styles by default, so you'll have to tell them to:

button {
  font: inherit;
  color: inherit;
}

HTML contains a lot of elements which can be used to give more meaning to our code - using sections, articles, headers etc. will make your code clearer and increase accessibility.

Wherever you can, avoid using <div>'s in favour of <sections> or <articles>.

Have a look at this if you'd like to read more 📖

Seems like you have a good understanding of the difference between using === compared to == ⚖️

Glad to see you've deployed your code and added the link to the description. This makes it so easy to see the live version and it's great practice to deploy early. 🚀

I like the design choices you've made. A good contrast of colours with the calculator and it's really easy to use 💅

eval makes the calculation code a lot simpler! In this specific case it's definitely ok.

However, be aware that eval is quite dangerous to use in general code though, especially with user input. Since it executes whatever it is given with full access (just like your own code) a malicious user could potentially do some damage in a "real" app.

Your grid layout is nice and elegant. You haven't had to specify every single button into place, you've let the browser do most of the work 🎉