Firstly, we want to write the HTML and CSS code to create the web page of our applet. We will set up by writing an HTML skeleton:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Calculator</title> <link href="style.css" rel="stylesheet"> <script src="script.js" defer></script> </head> <body> </body> </html>
Recall from the Web Development course that the link tag (line 8), links our html document to our css file, and the script tag links our document to our Javascript code. We’ll write our Javascript and CSS code later.
You might wonder about the “defer” attribute in the script tag. This attribute makes the our Javascript file downloaded while our HTML file gets parsed, but it delays executing our Javascript file until parsing is complete. If the defer attribute is omitted, then our Javascript file will execute before our HTML file gets parsed, potentially causing delays when rendering our webpage.
Calculator Buttons
Now lets add the output grid to our calculator:
<div class="calculator-grid"> <div class="output"> <div data-previous-operand class="previous-operand"></div> <div data-current-operand class="current-operand"></div> </div> </div>
We will create a div with class “calculator-grid,” which will hold everything in the calculator. Then, we will create a div inside with class “output” (line 2), which will contain our output grid. Within our output grid, we have a div that displays our previous operand (line 3), and another div that displays our next operand (line 4). Notice the attributes “data-previous-operand” (line 3) and “data-next-operand” (line 4). These are data attributes. They serve a similar function as class attributes. However, we’ll be selecting our HTML tags with class attributes in our CSS file, and with data attributes in our Javascript file. We don’t want to mix Javascript classes with CSS classes.
Now, we can add the buttons:
<div class="calculator-grid"> <div class="output"> <div data-previous-operand class="previous-operand"></div> <div data-current-operand class="current-operand"></div> </div> <button data-all-clear class="span-two">AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>*</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button data-equals class="span-two">=</button> </div>
After adding the buttons, your HTML page would look like this:
A row of buttons crammed in the top left corner of your screen. But we’ll soon change that with CSS.
Link to full code: