CodePen Embed - CSS Calculator


<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>CSS Calculator - Bugra Aydingoz</title>
    <!-- Style Sheets -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">
</head>

<body>
    <div class="calculator">
        <div class="screen">
            <div class="screen-text">
                <p id="screen">0</p>
            </div>
            <div class="screenhistory-text">
                <p id="history">0</p>
            </div>
        </div>
        <div class="buttons">
            <!-- First row -->
            <div class="btn btn-op" id="ac">
                <div class=btn-text>AC</div>
            </div>
            <div class="btn btn-op" id="c">
                <div class=btn-text>C</div>
            </div>
            <div class="btn btn-op" id="percent">
                <div class=btn-text>%</div>
            </div>
            <div class="btn btn-op" id="divide">
                <div class=btn-text>/</div>
            </div>

            <!-- Second row -->
            <div class="btn btn-num" id="seven">
                <div class=btn-text>7</div>
            </div>
            <div class="btn btn-num" id="eight">
                <div class=btn-text>8</div>
            </div>
            <div class="btn btn-num" id="nine">
                <div class=btn-text>9</div>
            </div>
            <div class="btn btn-op" id="multiple">
                <div class=btn-text>*</div>
            </div>

            <!-- Third row -->
            <div class="btn btn-num" id="four">
                <div class=btn-text>4</div>
            </div>
            <div class="btn btn-num" id="five">
                <div class=btn-text>5</div>
            </div>
            <div class="btn btn-num" id="six">
                <div class=btn-text>6</div>
            </div>
            <div class="btn btn-op" id="minus">
                <div class=btn-text>-</div>
            </div>

            <!-- Fourth row -->
            <div class="btn btn-num" id="one">
                <div class=btn-text>1</div>
            </div>
            <div class="btn btn-num" id="two">
                <div class=btn-text>2</div>
            </div>
            <div class="btn btn-num" id="three">
                <div class=btn-text>3</div>
            </div>
            <div class="btn btn-op" id="plus">
                <div class=btn-text>+</div>
            </div>


            <!-- Fifth row -->
            <div class="btn btn-zero" id="zero">
                <div class=btn-text>0</div>
            </div>
            <div class="btn btn-num" id="comma">
                <div class=btn-text>,</div>
            </div>
            <div class="btn btn-op" id="eq">
                <div class=btn-text>=</div>
            </div>
        </div>
    </div>

    <footer>
        <p>Made by Bugra Aydingoz with <i class="fa fa-heart" aria-hidden="true"></i></p>
    </footer>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/site.js"></script>
</body>

body {
    margin:0;
    padding:0;
    font-family: "Roboto";
    width: 100%;
    height:100%;
}

.calculator {
    margin: 20px auto;
    width: 330px;
    height: 500px;
    border: 1px solid #454A4C;
    border-radius: 4px;
}

.screen {
    position: relative;
    width:100%;
    height:25%;
    color: #FFF;
    background-color: #454A4C;
}

.buttons {
    position: relative;
    width:100%;
    height: 75%;
    margin: 0;
    background-color: rgb(151, 152, 153);
}

.btn {
    position: relative;
    outline: 1px solid rgb(151, 152, 153);
    width:25%;
    height:20%;
    margin-right:-4px;
    margin-bottom:-4px;
    display: inline-block;
}


.btn-num {
    color: #000;
    background-color: hsl(200, 14%, 91%);
}

.btn-zero {
    width:50%;
    color: #000;
    background-color: hsl(200, 14%, 91%);
}

.btn-zero:hover, .btn-num:hover{
    background-color: hsl(192, 5%, 80%);
}

.btn-op {
    color:#FFF;
    background-color: #FFB61D;
}

.btn-op:hover {
    background-color: #d99b19;
}

.btn-text {
    position: absolute;
    top:30%;
    width:100%;
    text-align: center;
    font-size: 25px;
}

.screen-text {
    position: absolute;
    bottom:75%;
    right:5%;
    width:100%;
    height:100%;
    text-align: right;
    font-size: 85px;
}

.screenhistory-text {
    position: absolute;
    top:60%;
    right: 5%;
    width:100%;
    text-align: right;
    font-size: 14px;
}

footer {
    text-align: center;
    margin:20px auto 20px auto;
    font-size:12px;
}

// background-color: #d99b19; // btn-op clicked 
// background-color: hsl(192, 5%, 80%); // btn-num clicked

// Globals
var screen = "0"
var equation = ""
var op = ""
var result = ""

// Functions
function isOperand(screen) {
    return screen === "%" || screen === "*" || screen === "/" || screen === "-" || screen === "+"
}

// If there are more than 7 digits
$("*").click(function () {
    if (String(screen).length > 7) {
        screen = ""
        $("#screen").html("No digit")
    }
})

$("*").mouseup(function(){
    $(".btn-num, .btn-zero").css("background-color", "hsl(200, 14%, 91%)")
    $(".btn-op").css("background-color", "#FFB61D")
})


// Click events
$("#one").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")

    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }

    if (isOperand(screen)) {
        equation += screen + " "
        screen = "1"
        $("#history").html(equation)
    } else {
        screen += "1"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#two").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")

    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }

    if (isOperand(screen)) {
        equation += screen + " "
        screen = "2"
        $("#history").html(equation)
    } else {
        screen += "2"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#three").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "3"
        $("#history").html(equation)
    } else {
        screen += "3"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#four").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "4"
        $("#history").html(equation)
    } else {
        screen += "4"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#five").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "5"
        $("#history").html(equation)
    } else {
        screen += "5"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#six").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "6"
        $("#history").html(equation)
    } else {
        screen += "6"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#seven").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "7"
        $("#history").html(equation)
    } else {
        screen += "7"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#eight").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "8"
        $("#history").html(equation)
    } else {
        screen += "8"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#nine").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "9"
        $("#history").html(equation)
    } else {
        screen += "9"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#zero").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "0"
        $("#history").html(equation)
    } else {
        screen += "0"
        screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#comma").click(function () {
    $(this).css("background-color", "hsl(192, 5%, 80%)")
    if (result !== "") {
        equation = ""
        result = ""
        screen = ""
    }
    if (isOperand(screen)) {
        equation += screen + " "
        screen = "0."
        $("#history").html(equation)
    } else {
        screen += "."
        // screen = Number(screen)
    }
    $("#screen").html(screen)
})

$("#ac").click(function () {
    $(this).css("background-color", "#d99b19")
    $("#screen").html(0)
    $("#history").html(0)
    screen = "0"
    op = ""
    equation = ""
    result = ""
})

$("#c").click(function () {
    $(this).css("background-color", "#d99b19")
    $("#screen").html(0)
    screen = "0"
})

$("#percent").click(function () {
    $(this).css("background-color", "#d99b19")
    if (result !== "") {
        equation = result
        screen = ""
        result = ""
    }
    if (!isOperand(screen)) {
        op = "%"
        equation += screen + " "
        screen = op
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

$("#divide").click(function () {
    $(this).css("background-color", "#d99b19")
    if (result !== "") {
        equation = result
        screen = ""
        result = ""
    }
    if (!isOperand(screen)) {
        op = "/"
        equation += screen + " "
        screen = op
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

$("#multiple").click(function () {
    $(this).css("background-color", "#d99b19")
    if (result !== "") {
        equation = result
        screen = ""
        result = ""
    }
    if (!isOperand(screen)) {
        op = "*"
        equation += screen + " "
        screen = op
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

$("#minus").click(function () {
    $(this).css("background-color", "#d99b19")
    if (result !== "") {
        equation = result
        screen = ""
        result = ""
    }
    if (!isOperand(screen)) {
        op = "-"
        equation += screen + " "
        screen = op
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

$("#plus").click(function () {
    $(this).css("background-color", "#d99b19")
    if (result !== "") {
        equation = result
        screen = ""
        result = ""
    }
    if (!isOperand(screen)) {
        op = "+"
        equation += screen + " "
        screen = op
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

$("#eq").click(function () {
    $(this).css("background-color", "#d99b19")
    if (!isOperand(screen)) {
        equation += screen + " "
        result = eval(equation)
        op = "="
        screen = result
        equation += op + " " + screen
        $("#screen").html(screen)
        $("#history").html(equation)
    }
})

This Pen is owned by Bugra on CodePen.

See more by @bugraaydingoz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.