JSFiddle - React, Tailwind, and code Playground

by Alex83

HTML

<div id="calc">
        <div id="screen">
            <input type="text" value="0" />
        </div>
        <ul id="number">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">0</a></li>
            <li><a href="#">,</a></li>
        </ul>

        <ul id="operators">
            <li><a href="#">c</a></li>
            <li><a href="#">/</a></li>
            <li><a href="#">*</a></li>
            <li><a href="#">-</a></li>
            <li><a href="#">+</a></li>
        </ul>

        <a id="result"> = </a>
    </div>

CSS

body, html { width: 100%; height: 100%; background: #000; }

/*wrapper*/
#calc {
    width: 270px;
    height: 295px;
    padding: 15px 10px;
    background: #000;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -163px;
    margin-left: -158px;
    border: 1px solid silver;
    border-radius: 10px;
    box-shadow: 0 0 300px aqua;
}

#screen {
    width: 250px;
    height: 40px;
    background: #fff;
    border-radius: 5px;
}

#screen input {
    width: 246px;
    height: 36px;
    padding: 0 10px;
    font: bold 18px Arial;
    text-align: right;
    color: gray;
    border: 2px solid gray;
    border-radius: 5px;
    background: #000 -moz-linear-gradient(180deg, #fff, aqua);
    background: #000 -webkit-linear-gradient(180deg, #fff, aqua);
    background: #000 -o-linear-gradient(180deg, #fff, aqua);
    background: #000 -ms-linear-gradient(180deg, #fff, aqua);
    background: #000 linear-gradient(180deg, #fff, aqua);240deg
}

ul#number {
    width: 185px;
    padding: 10px 0;
    float: left;
}

ul#number li {
    float: left;
    margin: 3px 3px 3px 0;
}

ul#number li a {
    display: block;
    width: 55px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    background: #000 -moz-linear-gradient(top, #000, #505050);
    background: #000 -webkit-linear-gradient(top, #000, #505050);
    background: #000 -o-linear-gradient(top, #000, #505050);
    background: #000 -ms-linear-gradient(top, #000, #505050);
    background: #000 linear-gradient(top, #000, #505050);
    border: 1px solid silver;
    border-radius: 5px;
    font: bold 18px Arial;
    color: #fff;
}

ul#number li:nth-child(10) a { width: 115px; }

ul#number li a:hover {
    background: #000 -moz-linear-gradient(bottom, #000, #505050);
    background: #000 -webkit-linear-gradient(bottom, #000, #505050);
    background: #000 -o-linear-gradient(bottom, #000, #505050);
    background: #000 -ms-linear-gradient(bottom, #000, #505050);
   ...

JavaScript

$(function() {

    $('#number li a').slice(0, 10).click(function() {
        var calcScreen = $('#screen input');
        var num = this.text * 1;
        calcScreen.val(num);
    });



});