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.

<!--calculator-->  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> <link href="./resources/css/reset.css/reset.css" type="text/css" rel="stylesheet" /> <link href="" rel="stylesheet" /> <!-- <link href="./resouces/css/style.css" type="text/css" rel="stylesheet"/>  <!-- <link href="./" type="text/css" rel="stylesheet" />--> <link rel="icon" href="resources/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="color"> <header> <div class=logo> <img src="./resources/ep.jpg"/>  </div> </header> <h1>Calculate!</h1> <div id="calculator"> <div id="screen"></div> <div id="controls"> <div class="other"></div> <div class="other"></div> </div><div id="numbers"> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> <div class="number">0</div> </div> <div id="operators"> <div class="operator">+</div> <div class="operator">-</div> <div class="operator">x</div> <div class="operator">/</div> <div class="operator">=</div> </div>

You can see this lesson on YouTube.