Beautiful UI-Calculator

arsalan khan

1417

Hey Folk! ????️How to create a dark calculator with pure Javascript code ? ???? I hope you guys like it!

<div class="main">
    <div>
       <input id="result" type="text">
       <button class="btn" onclick="getNumber('1')">1</button>
       <button class="btn" onclick="getNumber('2')">2</button>
       <button class="btn" onclick="getNumber('3')">3</button>
       <button class="btn" onclick="getNumber('4')">4</button>
       <button class="btn" onclick="getNumber('5')">5</button>
       <button class="btn" onclick="getNumber('6')">6</button>
       <button class="btn" onclick="getNumber('7')">7</button>
       <button class="btn" onclick="getNumber('8')">8</button>
       <button class="btn" onclick="getNumber('9')">9</button>
       <button class="btn" onclick="getNumber('.')">.</button>
       <button class="btn" onclick="getNumber('0')">0</button>
       <button class="btn" onclick="getResult()">=</button>
    </div>
    <div>
        <button class="clear" onclick="clearResult()">C</button>
        <button class="btn" onclick="getNumber('+')">+</button>
        <button class="btn" onclick="getNumber('-')">-</button>
        <button class="btn" onclick="getNumber('*')">x</button>
        <button class="btn" onclick="getNumber('/')">/</button>
    </div>
</div>

<h2 style=" font-family: Arial, Helvetica, sans-serif; text-decoration: underline; position: absolute; top: 20px;">  Created By:Arsalan Khan </h2> 
<!---note maximize the screen because i do not make it responsive :-)----!>

Try it Yourself >>

 *{
    margin: 0; padding: 0;
    border: 0; outline: 0;
     box-sizing: border-box ;
     font-family: sans-serif;

}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
   background: rgb(223, 221, 224);
   

}
.main{
    display: flex;
    position: relative;
    width: 300px; height: 330px;
    padding: 30px;
    background: #232424f6;
    border-radius:6px;
    box-shadow: 2px 9px 43px rgba(2, 0, 0, .8);


}
.main input{
    margin: 6px 8px;
    width: 165px; height: 42px;
    line-height: 40px;
    padding-left:12px;
    font-size: 18px;
    color: white;
    letter-spacing: 1px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid white;

}

.main button{
    cursor: pointer;
    margin: 7px 7px;
    width: 42px ; height: 42px;
    font-size: 18px;
    background: transparent;
    color: white;
    border-radius: 5px;
    border:1px solid white;
    transition: all .3s;

}
 .main button:hover{
     color: #1d1c1c;
     background: white;
 }

Try it Yourself >>

function getNumber(num){ //declaration of a function where as getNumber is our function name and within the round braces we passed argument//
  
    var result=document.getElementById("result");
    
    result.value +=num; //This is used for get number, and we used plus sign for concatination
    
    }
    function clearResult(){
        var result = document.getElementById("result"); //This is used for get element via 'id'
        result.value = "" //This empty string which is used to clear input field//
    }
    
    function getResult(){
        var result = document.getElementById("result"); 
        result.value=eval(result.value)
    }

Try it Yourself >>