speed kalkulacka

30 minut

by lithium182

HTML

<div id="main">
    <div id="tlacitka">
        <div id="blank">C</div><div id="deleni">/</div><div id="nasobeni">*</div><div id="minus">-</div>
        <div id="7" class="cisla">7</div><div id="8" class="cisla">8</div><div id="9" class="cisla">9</div><div id="plus">+</div>
        <div id="4" class="cisla">4</div><div id="5" class="cisla">5</div><div id="6" class="cisla">6</div>
        <div id="1" class="cisla">1</div><div id="2" class="cisla">2</div><div id="3" class="cisla">3</div>
        <div id="0" class="cisla">0</div><div id="tecka" class="cisla">.</div><div id="rovnase">=</div>
    </div>
    <div id="zobrazovac">
        
    </div>
</div>

CSS

#main {
    width: 300px;
    height: 500px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    font-size: 25px;
}

#tlacitka {
    flex: 1 1 auto;
}
#tlacitka > div {
    border: 1px solid black;
    width: 35px;
    height: 35px;
    margin: 10px;
    float: left;
    padding-top: 15px;
    padding-left: 15px;
}

#zobrazovac {
    flex: 0 0 auto;
    height: 50px;
    background: blue;
}
#rovnase {
    width: 80% !important;
    padding-left: 0px !important;
    text-align: center;
}

JavaScript

var myDiv = document.getElementById("main"),
    deleni = document.getElementById("deleni"),
    nasobeni = document.getElementById("nasobeni"),
    minus = document.getElementById("minus"),
    plus = document.getElementById("plus"),
    rovnase = document.getElementById("rovnase"),
    zobrazovac = document.getElementById("zobrazovac");
    blank = document.getElementById("blank");

var cisla = document.getElementsByClassName("cisla");
var operandy = [deleni, nasobeni, minus, plus];
var prvni, druhe, aktualniOperand;

init();

function init() {
    addNumberClicks();
    addOperandClicks();
    addEqualClick();
    addClearClick();
}
function addClearClick() {
    blank.addEventListener("click", clearClick, false);
}

function addEqualClick(){
    rovnase.addEventListener("click", equalClick, false);
}

function addNumberClicks() {
    for (var i = 0; i < cisla.length; i++) {
        addClick(cisla.item(i)); 
    }
}

function addOperandClicks() {
    for (var i = 0; i < operandy.length; i++) {
        addOpClick(operandy[i]);
    }
}

function clearClick(evn) {
    prvni = null;
    zobrazovac.textContent = "";
}

function addOpClick(obj) {
    obj.addEventListener("click", addOperandAction, false);
}

function addClick(obj) {
    obj.addEventListener("click", addZobrText, false);
}

function equalClick(evn) {
    druhy = zobrazovac.textContent;
    countIt();
    zobrazovac.textContent = prvni;
}

function addOperandAction(evn) {
    if (!prvni) {
        aktualniOperand = evn.target.textContent;
        prvni = zobrazovac.textContent;
        zobrazovac.textContent = "";
    }
    else {
        aktualniOperand = evn.target.textContent;
        druhy = zobrazovac.textContent;
        countIt();
        zobrazovac.textContent = "";
    }
}

function addZobrText(evn) {
   var clickedText = evn.target.textContent; 
   var actualText = zobrazovac.textContent;
   zobrazovac.textContent = actualText + clickedText;
}

function countIt() {
    if (aktualniOperand ==...