Labels

Web Calculator

************************************
HTML Code
************************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
   
</head>
<body>
    <h1>Calculator</h1>
    <div class="screen" id="output">
        <p class="text">0</p>
        <p id="ans">A</p>
        <button class="back" onclick="printValue('del')"><-</button>
    </div>
    <div class="container">
        <button class="btn"  onclick="printValue(1)">1</button>
        <button class="btn" onclick="printValue(2)">2</button>
        <button class="btn" onclick="printValue(3)">3</button>
        <button class="btn" onclick="printValue('+')">+</button>
        <br>
        <button class="btn" onclick="printValue(4)">4</button>
        <button class="btn" onclick="printValue(5)">5</button>
        <button class="btn" onclick="printValue(6)">6</button>
        <button class="btn" onclick="printValue('-')">-</button>
        <br>
        <button class="btn" onclick="printValue(7)">7</button>
        <button class="btn" onclick="printValue(8)">8</button>
        <button class="btn" onclick="printValue(9)">9</button>
        <button class="btn" onclick="printValue('/')">/</button>
        <br>
        <button class="btn" onclick="printValue('.')">.</button>
        <button class="btn" onclick="printValue(0)">0</button>
        <button class="btn" onclick="printValue('=')">=</button>
        <button class="btn" onclick="printValue('*')">*</button>
        <br>
        <button class="btn" onclick="printValue('clear')">C</button>
       
    </div>
    <script src="index.js"></script>
</body>
</html>

************************************
CSS Code
************************************

*{
  padding: 0px;
  margin: 0px;
  background: antiquewhite;
  font-family: 'Roboto Slab', serif;
}

.container{
    margin: 0 auto;
    padding: 2px;
    text-align: center;
    /* border: 3px solid; */
    height: 60%;
}

.btn{
    font-family: 'Libre Baskerville', serif;
    padding: 10px;
    height: 55px;
    width: 74px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    margin: 3px 2px;
    font-size: 25px;
    background-color: greenyellow;
}

.screen{
    text-align: right;
    font-size: 30px;
    border: 3px solid;
    margin: 10px auto;
    padding: 6px;
    width: 304px;
    border-radius: 30px 15px 15px 30px;
    position: sticky;
    background-color: white;
}

.text{
    margin: 0;
    opacity: 50%;
    text-align: right;
    width: 90%;  
    background-color: white;
}

#ans{
    margin: 0px;
    text-align: left;
    position: absolute;
    bottom: 11px;
    left: 9px;
    font-size: 20px;
    padding: 1px;
    background-color: white;
}

.back{
    position: absolute;
    top: 13px;
    right: 9px;
    background-color: palegreen;
    padding: 4px;
    margin: -6px;
    border-radius: 32px;
    cursor: pointer;
    font-size: 22px;
}

h1{
    text-align: center;
    font-size: 58px;
    margin: 19px;
    padding: 2px;
}

************************************
JS Code
************************************

// this is the javascript code for calculator
function printValue(value){
    // console.log(value);
    updateScreen(value);
}

let a = "";
let sum1 = 0;
// let flag = false

function updateScreen(display){
    if(display =='+' || display =='-' ||display =='/' ||display =='*'){
        document.getElementById('ans').innerHTML = display;
        // flag = true
        sum1 = a;
        a = "";
    }
    else if(display == '='){
        operator = document.getElementById('ans').innerText;
        if(operator == '+'){
            a = parseFloat(a) + parseFloat(sum1);
        }
        if(operator == '-'){
            a = parseFloat(sum1) - parseFloat(a);

        }
        if(operator == '/'){
            a = parseFloat(sum1) / parseFloat(a);

        }
        if(operator == '*'){
            a = parseFloat(sum1) * parseFloat(a);

        }
        document.getElementsByClassName('text')[0].innerHTML = a;
        document.getElementById('ans').innerHTML = 'A';
        console.log(a)
        a = a.toString();
    }
    else if(display == 'del'){
        a = a.substring(0, a.length-1);
        if(a=="")
        document.getElementsByClassName('text')[0].innerHTML = 0;
        else
        document.getElementsByClassName('text')[0].innerHTML = a;
    }
    else if(display == 'clear'){
        a = "0";
        sum1 = 0;
        document.getElementsByClassName('text')[0].innerHTML = a;
        document.getElementById('ans').innerHTML = 'A';
    }
    else{
        let update = document.getElementsByClassName('text')[0];
        a = a + display;
        // console.log(a);
        update.innerHTML = a;
    }
}
Labels:

Comments

Post a Comment