Calc

by Anton Kolesnikov

HTML

<div class="output">
    <input type="text" id="input" />
</div>
<div class="main">
<div id="opers" class="opers">
    <div class="oper">*</div>
    <div class="oper">/</div>
</div>
<div id ="calc" class="calc">
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
    <div class="calc-item">1</div>
</div>
</div>

CSS

.main {
    display: flex;
    flex-direction: row;
}
.opers {
    display: flex;
    flex-direction: column;
}
.oper {
    margin: 5px;
    width: 50px;
    height: 50px;
    background: red;
    text-align: center;
    font-size: 44px;
}
.calc {
    width: 190px;
    height: 240px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    background: green;
}
.calc-item {
    width: 50px;
    height: 50px;
    background: #ccc;
    margin: 5px;
    text-align: center;
    font-size: 44px;
}

JavaScript

function calcSet() {
    var calc = document.getElementById('calc');
    var temp = '';
    for( var i = 1; i < 10; i++) {
        temp += '<div class="calc-item">' + i + '</div>';
    };
    temp += '<div class="calc-item">0</div>';
    calc.innerHTML = temp;
};
function operSet() {
    var arr = ['+', '-', '*', '/'],
        oper = document.getElementById('opers'),
        temp = '';
    for( var i = 0; i < arr.length; i++){
        temp += '<div class="oper">' + arr[i] + '</div>';
    };
    oper.innerHTML = temp;
};
calcSet();
operSet();