Home Html CSS Tutorial How To Build A Simple Calculator Using Html, Css and JS

How To Build A Simple Calculator Using Html, Css and JS

898
5

Step by step How To Build A Simple Calculator Using Html, Css and JS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Simple Calculator</title>
</head>

<body>
    <div class="container">
        <div class="container">
            <input type="text" class="cal-display" placeholder="0" readonly="readonly">
            <div class="cal-keys">
                <div class="cal-row">
                    <button class="num" value="7"> 7</button>
                    <button class="num" value="8"> 8</button>
                    <button class="num" value="9"> 9</button>
                    <button class="op btn-blue" value="+"> +</button>
                </div>
                <div class="cal-row">
                    <button class="num" value="4"> 4</button>
                    <button class="num" value="5"> 5</button>
                    <button class="num" value="6"> 6</button>
                    <button class="op btn-blue" value="-"> -</button>
                </div>
                <div class="cal-row">
                    <button class="num" value="1"> 1</button>
                    <button class="num" value="2"> 2</button>
                    <button class="num" value="3"> 3</button>
                    <button class="btn-blue op " value="*"> *</button>
                </div>
                <div class="cal-row">
                    <button class="num" value="0"> 0</button>
                    <button class="num" value="."> .</button>
                    <button class="op btn-blue" value="/"> /</button>
                    <button class="btn-blue " id="clear" value=" "> C</button>
                </div>
                <div class="cal-row">
                    <button class="btn-equal" value="="> = </button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
</body>

</html>

CSS

/* bg #0086FF;
 border #3498db;
color #ecf0f1
 btn op #9ACDFF; 
  box- shadow for button -webkit-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.75);


 boxshadow for container   -webkit-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
-moz-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);

 
 */

 body{
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .container{
     width: 300px;
     height: auto;
     border: 1px solid #0086FF;
     -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
-moz-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);

 }

 input[type="text"]{
     height: 50px;
     width: 280px;
     padding: 15px 10px;
     color: #ecf0f1;
     font-weight: 800;
     text-align: right;
     border: none;
     background: #0086FF;
     font-size: 40px;
     margin-bottom: 15px;
     
    

 }

 input[type="text"]::placeholder{
     color: #ecf0f1;
     font-weight: 800;
 }

 .cal-keys .cal-row{
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .cal-keys .cal-row button{
    width: 50px;
    height: 50px;
    margin: 5px;
    font-size: 25px;
    font-weight: 400;
    border: none;
    border: 1px solid  #3498db;
    border-radius: 5px;
    background: #ecf0f1;
    cursor: pointer;
    -webkit-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.75);
    
}

.cal-keys .cal-row button:focus{
    outline: none;
}

.cal-keys .cal-row button:active{
    transform: translate(.1rem);
    border: none;
}


.cal-keys .cal-row .btn-equal{
    width: 77%;
    background: #0086FF;
    color: #ecf0f1;
    margin-bottom: 20px;
}

.cal-keys .cal-row .btn-blue{
    background: #9ACDFF;
    color: #ecf0f1;
}




JAVASCRIPT

const result = document.querySelector('.cal-display')
const clear =  document.querySelector('#clear')
const compute =  document.querySelector('.btn-equal')



const buttons = document.querySelectorAll('.num, .op')
// console.log(buttons)
let input = [];

//Array.form() to convert buttons to Array  
//loop throungh the button  to acces each
Array.from(buttons).forEach((button)=>{

//Add event  listener to button
button.addEventListener('click', ()=>{
 const operator = ['+', '-', '/', '*']
 //display result and checking if 
 if (input[input.length-1] == '=' && !operators.includes(button.value)){
     result.value  = button.value;
 }else{
     result.value += button.value;
 }
input.push(button.value)
})

})

// add event listener click to (=)
compute.addEventListener('click', ()=>{
 input.push('=');
 //checking 
 if(result.value.length == 0){
     return false
 }else{
     result.value = eval(result.value)
 }

})

// clear the screen 
clear.addEventListener('click', () =>{
    result.value=''
})
(Visited 569 times, 1 visits today)

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here