Simply Calc 2.0

Vypracovanie optimalizovanej verzie Simple Calc.

by wewo

HTML

<form id="frm" name="frm">
    <div class="left-side">
        <div class="buttons-row">
            <input name="dot" type="button" value="." class="btn" />
            <input name="result" type="text" />
        </div>	
        <div class="buttons-row">
            <input type="button" value="7" class="btn btn-blue" />
            <input type="button" value="8" class="btn btn-blue" />
            <input type="button" value="9" class="btn btn-blue" />
        </div>
        <div class="buttons-row">
            <input type="button" value="4" class="btn btn-blue" />
            <input type="button" value="5" class="btn btn-blue" />
            <input type="button" value="6" class="btn btn-blue" />
        </div>
        <div class="buttons-row">
            <input type="button" value="1" class="btn btn-blue" />
            <input type="button" value="2" class="btn btn-blue" />
            <input type="button" value="3" class="btn btn-blue" />
        </div>
        <div class="buttons-row">
            <input type="button" value="0" class="btn btn-blue" />
            <input type="button" value="=" class="btn btn-red" />
            <input type="button" value="C" class="btn btn-red" />
        </div>
    </div>
    <div class="right-side">
        <div id="operations">
            <input type="button" class="btn" value="+" />
            <input type="button" class="btn" value="-" />
            <input type="button" class="btn" value="*" />
            <input type="button" class="btn" value="/" />
        </div>
    </div>
</form>

CSS

form {
    margin: 0 auto;
    width: 575px;
}

.left-side {
    float: left;
}

.right-side {
    float: right;
}

.buttons-row {
    margin-bottom: 3px;
}

.btn-blue,
.btn-red {
  width: 150px;
  height: 100px;
  border: 0px;
  font-family: 'Calibri', sans-serif;
  font-size: 3em;
  text-align: center;
  transition: background-color 1s;
  -webkit-transition: background-color 1s;
  -o-transition: background-color 1s;
  -moz-transition: background-color 1s;
}

.btn-blue {
  background-color: #00E5FF;
}
.btn-blue:hover {
  background-color: #00B8D4;
}

.btn-red {
  background-color: #FF5722;
}
.btn-red:hover {
  background-color: #BF360C;
}

input[name="dot"] {
  float: left;
  margin-right: 4px;
  width: 150px;
  height: 56px;
  font-family: Calibri, sans-serif;
  font-size: 3em;
  text-align: center;
  background: #FAFAFA;
  border: 1px solid #757575;
  transition: background-color 1s;
  -webkit-transition: background-color 1s;
  -o-transition: background-color 1s;
  -moz-transition: background-color 1s;
}
input[name="dot"]:hover {
  background-color: #757575;
}

input[name="result"] {
    font-family: 'Calibri', sans-serif;
    font-size: 28px;
    width: 300px;
    height: 50px;
}

#operations {
  width: 100px;
}

#operations > input {
  width: 100px;
  height: 100px;
  border: 0px;
  font-family: Calibri, sans-serif;
  font-size: 4em;
  text-align: center;
  border-radius: 100%;
  margin: 10px auto;
  background-color: #C6FF00;
  transition: background-color 1s;
  -webkit-transition: background-color 1s;
  -o-transition: background-color 1s;
  -moz-transition: background-color 1s;
}

#operations > input:hover {
      background-color: #C0CA33;
}

JavaScript

/**
 * Toto ziska vsetky elementy s classou ".btn" a nastavi
 * funkciu "addToInput" ako onclick event.
 */
var buttons = document.querySelectorAll('.btn');
for(var key in buttons) { 
   if (buttons.hasOwnProperty(key)) {
       buttons[key].onclick = addToInput;
   }
}

/**
 * Toto funkcia sa spusti vzdy ked sa klikne na element ktory ju ma
 * priradenu pre onclick event.
 *
 * V premennej "this" je vzdy ulozeny element na ktory bolo kliknute.
 * Ma property "value" v ktorej je hodnota "value atributu". Vdaka tomu
 * lahko vieme indentifikovat na ktory button sme klikli.
 * Pre znaky "=" a "C" urobi to co ma, ostatne jednoducho prida do inputu.
 *
 * Je dolezite robit funkcie taketo univerzalne a aplikacie modularne.
 * Takymto sposobom vieme napr zmenit v HTML pri inpute 9 value na 99
 * a funkcia bude reagovat tak ako ma, netreba kvoli tomu menit/pridavat
 * funkciu "run99()" ako v povodnej verzii.
 */
function addToInput() {
    
    if ( this.value == '=' ) {
	    document.frm.result.value = eval(document.frm.result.value);
    }
    else if ( this.value == 'C' ) {
        document.frm.result.value = '';
    }
    else {
        document.frm.result.value += this.value;
    }   
    
}