S2JS - Javascript interacting with HTML : Adding the readout

We also need somewhere to display numbers

We add a div, and just put the numbers 1234 inside so we can see it
Create a CSS style called readout
Make it wide, large, with a dark background, right-aligned, and green fixed-pitch font.

That's starting to look better.

Click the buttons — nothing happens because we haven't written that bit yet, but the buttons do appear to go up and down, because of our CSS styling.

<HTML> <title> My Calculator </title> <body> <style> .MyCalculator {width:240px; padding:10px; text-align:center; background-color:tan} button {margin-top:5px; font-size:150%; border-width:3px} button:active {border-style: inset} .NumBtn {width: 20%} .OpBtn {width:30%; color:red} .readout {width: 100%; height:1.3em; background-color:DarkSlateGrey; text-align:right; color:lawngreen; font-size:300%; font-family: monospace; font-weight:bold} </style> <div class="MyCalculator"> <div class="readout">1234</div> <button class="NumBtn">1</button> <button class="NumBtn">2</button> <button class="NumBtn">3</button> <br> <button class="NumBtn">4</button> <button class="NumBtn">5</button> <button class="NumBtn">6</button> <br> <button class="NumBtn">7</button> <button class="NumBtn">8</button> <button class="NumBtn">9</button> <br> <button class="NumBtn">0</button> <button class="NumBtn">.</button> <br> <hr> <button class="OpBtn" >+</button> <button class="OpBtn" >*</button> <button class="OpBtn" >CLR</button> <br> <button class="OpBtn" >-</button> <button class="OpBtn" >/</button> <button class="OpBtn" >=</button> </div> </body> </html>