https://github.com/omid-bakeri/basic-_calculator

This web app is a basic calculator create with html , css and javascript
https://github.com/omid-bakeri/basic-_calculator

css css3 html html5 javascript js

Last synced: 15 days ago
JSON representation

This web app is a basic calculator create with html , css and javascript

• Host: GitHub
• URL: https://github.com/omid-bakeri/basic-_calculator
• Owner: omid-bakeri
• Created: 2022-07-29T10:20:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-29T10:26:07.000Z (over 2 years ago)
• Last Synced: 2023-05-11T11:28:36.080Z (over 1 year ago)
• Topics: css, css3, html, html5, javascript, js
• Homepage:
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# basic-_calculator

# This web app is a basic calculator create with html , css and javascript

    

        

        

        

        Calculator

        

    

    

        


            


                
 0.0 

                    
C

                    
CE

                    
<<

                    
/

                    
7

                    
8

                    
9

                    
*

                    
4

                    
5

                    
6

                    
-

                    
1

                    
2

                    
3

                    
+

                    
+-

                    
0

                    
.

                    
=

            

        

        

    


# css

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    background-color: #022934;

}

.main{

    margin: 0 auto;

    width: 960px;

}

.calc{

    width: 35%;

    height: 65%;

    border: 2px solid black;

    margin: 0 auto;

    background-color: antiquewhite;

    transform: translate(0,30%);

    padding: 10px;

    overflow: hidden;

    border-radius: 5px;

}

#display{

    border: 1px solid black;

    font-size: 1.3em;

    background-color: #dad9d9;

    padding: 10px 5px;

    border-radius: 5px;

    margin-bottom: 20px;

}

.button{

    color: #fff;

    background-color: #232323;

    text-align: center;

    border: 1px solid #a4a4a4;

    border-radius: 15px;

    float: left;

    width: 23.5%;

    margin: 2px;

    height: 50px;

    padding: 14px 5px;

    box-shadow: 1px 1px 2px #000;

    font-size: 1.3em;

    user-select: none;

}

.button:hover{

    cursor: pointer;

    background-color: #6c6c6c;

}

.button:active{

    box-shadow: 1px 1px 5px black inset;

    padding: 12px 5px;

}

#equal{

    background-color: green;

}

# javascript 

let btnDisplay = document.querySelector('#display')

let btnClear = document.querySelector('#clear')

let btnDivision = document.querySelector('#division')

let btnNumbers = document.querySelectorAll('.btn-number')

let btnBackSpace = document.querySelector('#back-space')

let btnMultiple = document.querySelector('#multiple')

let btnMinus = document.querySelector('#minus')

let btnPlus = document.querySelector('#plus')

let btnPN = document.querySelector('#btn-p-n')

let btnPoint = document.querySelector('#point')

let btnEqual = document.querySelector('#equal')

btnClear.addEventListener('click',(e)=>{

    display.textContent="0.0";

    setPoint=false;

});

let setRes = false;

let setPoint = false;

btnNumbers.forEach((item)=>{

    item.addEventListener('click',(e)=>{

        if(display.textContent == "0.0"){

            display.textContent=e.target.textContent;

        }

        else{

            display.textContent += e.target.textContent;

        }

    })

});

btnBackSpace.addEventListener('click',(e)=>{

    let len = display.textContent.length;

    if(len>1){

        display.textContent = display.textContent.substr(0,len-1);

        setPoint=false;

    }

    else{

        display.textContent = "0.0";

        setPoint=false;

    }

});

btnPN.addEventListener('click',(e)=>{

    display.textContent = display.textContent*-1;

});

btnPoint.addEventListener('click',(e)=>{

    if(setPoint == false){

        display.textContent+=".";

        setPoint=true;

    }

});

let number1;

let number2;

let operation = "";

// +

btnPlus.addEventListener('click',(e)=>{

    number1 = Number(display.textContent);

    display.textContent = "0.0";

    operation = "+";

    setPoint = false;

});

// -

btnMinus.addEventListener('click',(e)=>{

    number1 = Number(display.textContent);

    display.textContent="0.0";

    operation = "-";

    setPoint = false;

});

// *

btnMultiple.addEventListener('click',(e)=>{

    number1= Number(display.textContent);

    display.textContent = "0.0";

    operation = "*";

    setPoint = false;

});

// /

btnDivision.addEventListener('click',(e)=>{

    number1 = Number(display.textContent);

    display.textContent = "0.0";

    operation = "/";

    setPoint = false;

});

btnEqual.addEventListener('click',(e)=>{

    // if(setRes==false){

    //     number2 = Number(display.textContent);

    // }

    // else{

    //     number1 = Number(display.textContent);

    // }

    number2 = Number(display.textContent);

    switch(operation){

        case "+":

            let pls = number1 + number2;

            display.textContent = Number(pls);

            break;

        case "-":

            let mus = number1 - number2;

            display.textContent = Number(mus);

            break;

        case '*':

            let mul = number1 * number2;

            display.textContent = Number(mul);

            break;

        case "/":

            let dvi = number1 / number2;

            display.textContent = parseFloat(dvi);

            break;

    }

});