markdown Calculater

Posted 2021-05-06

body
{
    margin:0;
    padding:0
}
article
{
    width:400px;
    height:420px;
    margin:0 auto;
    background:#214478;
    margin-top:30px;
    border-radius:30px
}
article header
{
    width:90%;
    height:100px;
    position:relative;
    top:20px;
    margin-left:5%;
    border:2px solid white;
    border-radius:20px;
}
article header input
{
    width:94%;
    margin-left:3%;
    height:78px;
    margin-top:10px;
    border-radius:20px;
    border:0;
    font-size:30px;
    outline:none
}
article section
{
    width:95%;
    height:271px;
    border:2px solid white;
    margin-left:2.1%;
    margin-top:30px;
    border-radius:20px;
}
article section .first
{
    margin-top:10px;
}
article section input
{
    font-size:39px;
    padding-left:15px;
    padding-right:15px;
    border-radius:11px;
    border:0;
    background:white;
    padding-top:5px;
    padding-bottom:5px;
    margin-left:18px; 
    outline:none;
}
article section .slach
{
    padding-left:20px;
    padding-right:20px;
}
article section .slach2
{
    height:54px;
    box-sizing:border-box;
    padding-top:0px;
    padding-bottom:3px;
    position:relative;
    bottom:2px;
    padding-left:18px;
    padding-right:18px;
}
article section .times
{
    padding-left:17.5px;
    padding-right:17.5px
}
article section .zero
{
    padding-right:52px;
    padding-left:53px;
}
article section .point
{
    padding-left:21px;
    padding-right:21px;
}
article section .equal
{
    padding-right:50px;
    padding-left:50px;
}

var myType     = document.getElementById("type"),
    myBtn      = document.getElementsByClassName("give"),
    clear      = document.getElementById("clear"),
    equal      = document.getElementById("eq"),
    i;
     

for (i = 0; i < myBtn.length; i++) {
    
    myBtn[i].onclick = function () {
        
    "use strict";
        
    myType.value += this.value;
        
    }
}


equal.onclick = function () {

    "use strict";
    
    myType.value = eval(myType.value);
    
}
clear.onclick = function del() {

    "use strict";
    
    myType.value = "";
    
}

   <article>
       <form name="calculater">
       <header>
           <input type="text"id="type">
       </header> 
       <section>
           <div class="first">
              <input type="button"value="7"class="give">
              <input type="button"value="8"class="give">
              <input type="button"value="9"class="give">
              <input type="button"value="Clear"class="one"id="clear">
           </div>
           
           <div class="first">
              <input type="button"value="4"class="give">
              <input type="button"value="5"class="give">
              <input type="button"value="6"class="give">
              <input type="button"value="*"class="times give">
              <input type="button"value="/"class="slach give">
           </div>
           
           <div class="first">
              <input type="button"value="1"class="give">
              <input type="button"value="2"class="give">
              <input type="button"value="3"class="give">
              <input type="button"value="+"class="give">
              <input type="button"value="-"class="slach2 give">
           </div>
           
           <div class="first">
              <input type="button"value="0"class="zero give">
              <input type="button"value="."class="point give">
              <input type="button"value="="class="equal"id="eq">
           </div>
       </section>
       </form>
   </article>    

Calculater
----------
Calculater 

A [Pen](https://codepen.io/harunpehlivan/pen/mjBvBJ) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/mjBvBJ/license).