Calculator

HTML

            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <main>
        <section>
            <div class="statement">1+1</div>
            <div class="bigLine">2</div>
        </section>
        <section>
            <!-- <div class="mod">?</div> -->
            <div class="mod">?</div>
            <div class="mod">C</div>
            <div class="mod">←</div>
            <div class="op">×</div>
            <div class="op">÷</div>
            <div class="op">+</div>
            <div class="op">−</div>
            <div class="num">7</div>
            <div class="num">8</div>
            <div class="num">9</div>
            <div class="num">4</div>
            <div class="num">5</div>
            <div class="num">6</div>
            <div class="num">1</div>
            <div class="num">2</div>
            <div class="num">3</div>
            <div class="sp">±</div>
            <div class="num">0</div>
            <div class="sp">.</div>
            <div class="eq">=</div>
        </section>
    </main>
</body>
</html>

CSS

            
body{
    margin: 0;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    background: #123;
    color: #a73;
    font-size: 2rem;
    font-family: sans-serif;
}

section:nth-of-type(2){
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    align-items: space-between;
    grid-auto-flow: dense;
    padding: 20px 4px;
    gap: 4px;
}
section:nth-of-type(2) div{
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: linear-gradient(#fff3, transparent), linear-gradient(180deg, #0003,transparent);
    box-shadow: 4px 4px 4px #0008, 5px 5px 10px #fff3 inset, -5px -5px 10px #0003 inset;
}
section:nth-of-type(2) div:hover{
    color: #fa5;
    text-shadow: 0 0 8px #fa5;
}
main{
    width: 300px;
    justify-self: center;
    align-self: center;
    box-shadow: 10px 10px 10px #0008, 5px 5px 10px #fff3 inset, -5px -5px 10px #0003 inset;
    border-radius: 10px;
}

/* .eq{
    grid-row: 3/7;
    grid-column: 4/5;
} */

.op,.eq{
    grid-column: 4/5;
}

section:first-of-type{
    background: #bbb;
    min-height: 50px;
    border-radius: 10px 10px 0 0;
    color: #333;
    padding: 10px;
    text-align: right;
    box-shadow: 5px 5px 10px #fff8 inset, -5px -5px 10px #0002 inset;
}
.bigLine{
    font-size: 3.5rem;
}
.statement{
    font-size: 1rem;
}

.popup{
    font-size: 1rem;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 250px;
    height: 150px;
    background: #abc;
    color: black;
    padding: 10px;
}
.popup h1{
    font-size: 1.4rem;
}

JS

            
let bigLine = document.querySelector(".bigLine")
let statement = document.querySelector(".statement")
let eq = document.querySelector(".eq")
let ops = document.querySelectorAll(".op")
let nums = document.querySelectorAll(".num")
let mods = document.querySelectorAll(".mod")
let sps = document.querySelectorAll(".sp")

let mem1 = 0
let op = null
let neg = false


let current = ""


function displayCurrent(){
    let temp = ""
    temp = current
    if(neg) temp += "-"
    if (current.length==0){
        temp += "0"
    }
    if (current.length==1 && current[0]=="."){
        temp += "0."
    }
    // else if (!current.includes(".")){
    //     let startSpot = 0
    //     while(current[startSpot] == 0){
    //         startSpot ++
    //     }
    // }
    
    bigLine.innerHTML = temp
}

function back(){
    if(current.length > 1){
        current.pop()
    }
}

function store(){
    let temp = parseFloat(neg? "-" : "" + current)
    mem1 = temp
}

function setOp(operator){
    op = operator
}

function clearMem(){
    mem1 = 0
    setOp(null)
}

let clearButton = mods[1]
let backButton = mods[2]
let pm = sps[0]
let dec = sps[1]

pm.onclick = (e) => {
    neg = !neg
}

dec.onclick = (e) => {
    if(!current.includes(".")) current += "."
}

clearButton.onclick = (e) => {
    if(op){
        if(current.length>0){
            current = ""
        }
        else {
            clearMem()
        }
    }
}

ops.forEach((opButton,index)=>{
    opButton.onclick = (e) => {
        if(!op) {
            mem1 = current
            current = ""
        }
        op=opButton.innerHTML
        statement.innerHTML = mem1 + " " + op + " "
    }
})

nums.forEach((numButton,index)=>{
    numButton.onclick = (e)=> {
        current += numButton.innerHTML
        displayCurrent()
        console.log(current)
    }
})

eq.onclick = (e) => {
    if(op){
        let stat = mem1 +" "+op +" "+ current + " ="
        
        
        
        
        console.log(stat)
        statement.innerHTML = stat
        let out = ""
        if(op == "×") out = parseFloat(mem1) * parseFloat(current)
        if(op == "÷") out = parseFloat(mem1) / parseFloat(current)
        if(op == "+") out = parseFloat(mem1) + parseFloat(current)
        if(op == "−") out = parseFloat(mem1) - parseFloat(current)
        bigLine.innerHTML = out
        current = out   
    }
    op = null
}


clearButton.onclick = (e) => {
    if(op){
        if(current.length != 0){
            current = ""
        }
        else{
            statement.innerHTML = " "
            current = ""
            op = null
        }
        displayCurrent()
    }
    else{
        statement.innerHTML = ""
        current = ""
        displayCurrent()
    }
}


displayCurrent()