Lesson 48  Project – Calculator

Let’s do one more project before we start javascript. In fact, let’s start a project that we can use for javascript. Make the image of a calculator.

Picture it. A box with a screen at the top. Then it has rows of numbers. Buttons for the operations. A button for equals and for clear. I’ve never coded a calculator before, so we’ll try it together.

I suggest starting by sketching out what you want it to look like. You may want to use flex to grow and shrink your calculator according to the size of the screen, or maybe you want to use display: in-line block to place your buttons.

We’ll need to assign a width to each button so that they line up.

Today, write your html.

Here’s my code.

project2-1project2-2

You can see this lesson on YouTube.