Home > DeveloperSection > Articles > Design a simple, stylish calculator using HTML, CSS and JavaScript

Design a simple, stylish calculator using HTML, CSS and JavaScript


CSS-CSS3 JQuery  JavaScript  HTML5  CSS 
Ratings:
0 Comment(s)
 3582  View(s)
Rate this:

Design a simple, stylish calculator using HTML, CSS and JavaScript

Hi Friends in this article I’m create a simple, stylish calculator using html, css and JavaScript

Description:

In this article, we will create a calculator step-by-step. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript.

HTML

The following creates the div (.box) that represents the structure of the calculator. Inside it are two div tags, one for display (inside this, I added input type="text" to display the result and set this to read only) and one for Keys. There is also an onclick event to be explained later.

<body>

    <div class="box">

        <div class="display">

            <input type="text" readonly size="18" id="d">

        </div>

        <div class="keys">

            <p>

                <input type="button" class="button gray" value="mrc" onclick='c'><input type="button" class="button gray" value="m-" onclick='    c'><input type="button" class="button gray"

                    value="m+" onclick='c'><input type="button" class="button pink" value="/" onclick='    v("/")'>

            </p>

            <p>

                <input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='    v("8")'><input type="button" class="button black" value="9" onclick='    v("9")'><input

                    type="button" class="button pink" value="*" onclick='v("*")'>

            </p>

            <p>

                <input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='    v("5")'><input type="button" class="button black" value="6" onclick='    v("6")'><input

                    type="button" class="button pink" value="-" onclick='v("-")'>

            </p>

            <p>

                <input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='    v("2")'><input type="button" class="button black" value="3" onclick='    v("3")'><input

                    type="button" class="button pink" value="+" onclick='v("+")'>

            </p>

            <p>

                <input type="button" class="button black" value="0" onclick='v("0")'><input type="button" class="button black" value="." onclick='    v(".")'><input type="button" class="button black" value="C" onclick='    c("")'><input

                    type="button" class="button orange" value="=" onclick='e()'>

            </p>

        </div>

    </div>

</body>

 

Preview

CSS

 

The following CSS sets the background color of the body and sets the height, width and border radius of the class box (.box) for styling:

 

body {

        background-color: #222;

    }

 

    .box {

        background-color: #e06f6f;

        height: 300px;

        width: 250px;

        border-radius: 10px;

        position: relative;

        top: 80px;

        left: 40%;

    }

 

Preview

 

 

CSS

The following CSS sets display background-color, width, height and position. Inside it, we have an input box, I also adjust its height, width, color, background-color and position.

.display {

        background-color: #222;

        width: 220px;

        position: relative;

        left: 15px;

        top: 20px;

        height: 40px;

    }

 

    .display input {

        position: relative;

        left: 2px;

        top: 2px;

        height: 35px;

        color: black;

        background-color: #bccd95;

        font-size: 21px;

        text-align: right;

        width:220px;

    }

 

Preview

 

CSS

The following CSS adjusts the position of the div (.keys). I use a Double Class Selector (for example: class=button gray). By the use of this, I set the .button width, height, border-radius, cursor, and so on. This helps me in making all my buttons of the same width, height, and so on. Then I set .button.gray color, background-color, and so on.

After that, I create :active (the :active pseudo selector will match when an element is being pressed down on by the mouse cursor) for buttons. The thing I have done here is to change the top border color to black and bottom color to be the same as the button color. This gives the button the feel of pressing down.

.keys {

        position: relative;

        top: 15px;

    }

 

    .button {

        width: 40px;

        height: 30px;

        border: none;

        border-radius: 8px;

        margin-left: 17px;

        cursor: pointer;

        border-top: 2px solid transparent;

    }

 

        .button.gray {

            color: white;

            background-color: #6f6f6f;

            border-bottom: black 2px solid;

            border-top: 2px #6f6f6f solid;

        }

 

        .button.pink {

            color: black;

            background-color: #ff4561;

            border-bottom: black 2px solid;

        }

 

        .button.black {

            color: white;

            background-color: 303030;

            border-bottom: black 2px solid;

            border-top: 2px 303030 solid;

        }

 

        .button.orange {

            color: black;

            background-color: FF9933;

            border-bottom: black 2px solid;

            border-top: 2px FF9933 solid;

        }

 

    .gray:active {

        border-top: black 2px solid;

        border-bottom: 2px #6f6f6f solid;

    }

 

    .pink:active {

        border-top: black 2px solid;

        border-bottom: #ff4561 2px solid;

    }

 

    .black:active {

        border-top: black 2px solid;

        border-bottom: #303030 2px solid;

    }

 

    .orange:active {

        border-top: black 2px solid;

        border-bottom: FF9933 2px solid;

    }

 

    p {

        line-height: 10px;

    }

 

Preview

 

Create Script

The following is the script (using JavaScript).

Here, I created three functions. Function c(val) clears the data from the display. When we click on the "C" button, then the onclick='c("")' event runs and searches for the c(val) function and displays the value depending on the parameter passed to it (here, we have not passed any parameter so the input screen appears blank or clear).

Function v(val) is used for typing numbers as well as mathematical operators.

Function e() is used for evaluating, in other words when clicking the "=" button, the value inside the Id="d" is solved.

function c(val)

{

 document.getElementById("d").value=val;

}

    function v(val)

{document.getElementById("d").value+=val;

}

function e()

{

    try

    {

        c(eval(document.getElementById("d").value))

    }

    catch(e)

    {

        c('Error') }

}

You can also download the source file for viewing.

 

Complete Calculator Preview


in my next post i'll discuss about How to Use CSS in a HTML Document


Don't want to miss updates? Please click the below button!

Follow MindStick