ckportfolio.com - Basic Calculator: HTML and CSS

Basic Calculator: HTML and CSS

HTML and CSS

Based on our examination, we can see that there will be a total of 17 HTML objects, contained in a single <div>:

  • <button class="num">: Ten number keys
  • <button class="op">: Four operator keys
  • <button id="delete">: One delete key
  • <button id="process">: One process key
  • <input type="text" id="display">: Display pane

With the exception of display pane as a text field, the rest of objects are simple buttons.

Also, note that all objects are equipped with class or ID attributes, so that they can be referred to at jQuery or CSS level. While delete button, process button, and display element are given single unique IDs, number and operator keys are grouped in two separate "classes" -- because we can expect all the elements in each class to look and behave in the same (or, at least, similar) fashion.

Based on this insight, we can proceed with populating the HTML section of jsFiddle with the following text:

<div id="calculator">

    <input type="text" id="display"> 

    <button class="num">1</button>
    <button class="num">2</button>
    <button class="num">3</button>
    <button class="num">4</button>
    <button class="num">5</button>
    <button class="num">6</button>
    <button class="num">7</button>
    <button class="num">8</button>
    <button class="num">9</button>
    <button class="num">0</button>

    <button class="op">+</button>
    <button class="op">-</button>
    <button class="op">*</button>
    <button class="op">/</button>

    <button id="delete">Delete</button>
    <button id="process">=</button>

</div>

...Which will produce a crude scaffolding for the calculator:

Via CSS panel, we can proceed with styling our calculator. Feel free to apply CSS Reset to nullify default browser stylesheet.

body {
    font-family: Helvetica;
}

#calculator {
    width:300px;
    background-color: #eee;
    border: 2px solid #333;
    border-radius: 10px;
    padding:10px;
    text-align:center;
}

#display {
    background-color:#000;
    color:#fff;
    font-size:25px;
    display:block;
    width:250px;
    margin-left:auto;
    margin-right:auto;
}

button {
    width:80px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#process {
    width: 240px;
    background-color:orange;
    color:#fff;
}

Screencast Recording

https://www.dropbox.com/scl/fi/5bm5talvwkarj6a1t3ki5/Page-2.mov?rlkey=8h56nxkdx979caf6vhuwuzpz3&dl=0

Fin