JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="test">0</div>
<div id="clc">
    <div id="output">0</div>
    <ul id="numpad">
        <div id="num1">
            <li class="__a clear">C</li>
            <li class="__a changeSign" >±</li>
            <li class="__a percent">%</li>
            <li class="__a devide">÷</li>
            <li class="__n">7</li>
            <li class="__n">8</li>
            <li class="__n">9</li>
            <li class="__a mult">x</li>
            <li class="__n">4</li>
            <li class="__n">5</li>
            <li class="__n">6</li>
            <li class="__a minus">—</li>
            <li class="__n">1</li>
            <li class="__n">2</li>
            <li class="__n">3</li>
            <li class="__a plus">+</li>
            <li class="__n">0</li>
            <li class="coma">,</li>
            <li class="__a result">=</li>
        </div>
        <div id="num2">
            <li class="__a clear">C</li>
            <li class="__a changeSign" >±</li>
            <li class="__a percent">%</li>
            <li class="__a devide">÷</li>
            <li class="__fn">
                <div class="__dd" style="width: 278px;">
                    <span class="__fn" id="doubleFactorial">n!!</span>
 <span class="__fn" id="primorial">n#</span>
 <span class="__fn" id="superFactorial">sf(n)</span>
                <span class="__after">n!</span>
                </div>
                    
                <span id="factorial">n!</span>

            </li>
            <li class="__fn" id="exp">
                 <div class="__dd" style="width: 185px;">
                     <span class="__fn" id="exp3">n<sup>3</sup></span>
                     <span class="__fn" id="expX">n<sup>x</sup></span>
                     <span class="__after">n<sup>2</sup></span>
                </div>
                <span id="exp2">n<sup>2</sup></span>
            </li>
            <li class="__fn" id="">n</li>
            <li class="__a mult">x</li>
            <li class="__fn" id="">n</li>
            <li...

CSS

@font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
* {
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
}
sup {
    font-size: 9pt;
}
#test {
    position: absolute;
    top:0;
    left:0;
}
#clc {
    position: relative;
    width: 370px;
    height: 566px;
    background: #1f2435;
    margin: 10px auto;
    overflow: hidden;
}
#output {
    height: 90px;
    padding: 10px 5px;
    font-family:'Roboto';
    color: #fff;
    font-size: 65px;
    font-weight: 100;
    text-align: right;
}
#numpad {
    margin:0;
    padding:0;
    height: 300px;
}
#numpad li, .__fn {
    display: inline-block;
    width: 92.5px;
    height: 92.5px;
    padding: 14px 0;
    text-align: center;
    background: #dcdce0;
    float: left;
    border-right: solid 1px #1f2435;
    border-bottom: solid 1px #1f2435;
    -webkit-box-sizing: border-box;
    font-family: Roboto;
    font-size: 45px;
    font-weight: 100;
}
#numpad li:nth-of-type(4n), #num1 li:nth-of-type(19) {
    border-right: none;
}
#numpad li:active {
    background: silver;
}
#num1 li:nth-of-type(17) {
    width: 185px;
}
#numpad li.__a {
    background: #3c4e7c;
    color: #dcdce0;
}
#numpad li.__fn, .__fn {
    background: rgb(245, 153, 54);
    color: rgb(255, 255, 255);
    font-size: 35px;
    padding: 19px 0;
    position: relative;
}
#numpad li.__fn:active {
    background: rgb(230, 141, 45);
}
#numpad li.__a:hover {
    sbackground: rgb(73, 94, 146);
}
#numpad li.__a:active {
    background: rgb(52, 67, 105);
}
.num_one #num1, .num_two #num2 {
    display: block !important;
}
.num_two #num1, .num_one #num2...

JavaScript

var $ = function (id) {
    return document.getElementById(id)
};

var Cl = function (cl, event, fn) {
    var elems = document.getElementsByClassName(cl);

    for (var i = 0; i < elems.length; i++) {
        if(typeof(event) === 'string'){
            elems[i].addEventListener(event, function () {
                fn(this);
            });
        } else {
            fn = event;
            fn(elems[i]);
        }
    }
};

/*math*/

var M = (function () {

    function exponent(x, n) {
        var result = x,
            nomb = n;

        do {
            nomb -= 1;
            result *= x;
        } while ((nomb - 1) > 0);

        return result;
    };

    function isOdd(x) {
        return (x % 2 === 0) && true || false;
    };

    function findOdd(array) {
        return array.filter(function (number) {
            return isFinite(number) && isOdd(number);
        });
    };

    function findEven(array) {
        return array.filter(function (number) {
            return isFinite(number) && !isOdd(number);
        });
    };

    function factorial(n) {

        if (n >= 0) {
            var result = n,
                nomb = n;

            do {
                nomb -= 1;
                result *= nomb;
            } while ((nomb - 1) > 0);

            return result > 1 ? result : 1;
        }

        throw 'factorial(): Введите целое число';
    };

    function doubleFactorial(n) {

        if (n >= 0) {
            var result = n,
                nomb = n;
            if (isOdd(n)) {
                do {
                    nomb -= 1;
                    if (isOdd(nomb)) {
                        result *= nomb;
                    }
                } while ((nomb - 1) > 0);
            } else {
                do {
                    nomb -= 1;
                    if (!isOdd(nomb)) {
                        result *= nomb;
                    }
                } while ((nomb - 1) > 0);
            }

            return result > 1 ? result : 1;
...