Inicio Calculadora con Js, css y Html

diciembre 18, 2024

Calculadora con Js, css y Html

HTML JS Y CSS

</tr>
            </table>
        </div>
    </div>

</div>

const display = document.querySelector("#display");
const buttons = document.querySelectorAll("button");

buttons.forEach((item)=>{
    item.onclick=()=>{
        if(item.id=="clear"){
            display.innerText ="";

}else if(item.id=="backspace"){
            let string = display.innerText.toString();
             display.innerText= string.substr(0,string.length-1);

}else if(display.innerText !="" && item.id=="equal"){
        display.innerText= eval(display.innerText);

}else if(display.innerText === "" && item.id=="equal"){
            display.innerText ="NUll";
            setTimeout(() => { display.innerText = ""; }, 2000);
        }else{
            display.innerText += item.id;
        }
    }
});

</script>
<style>

padding:0;
}

body{
    background:linear-gradient(45deg,#f06291,#fffde7);

}
.container{
    height:100vh;
    width:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.calculator{
    position: relative;
    height:auto;
    width: auto;
    padding:20px;
    box-shadow:0 0 30px rgb(187,130,130);
}

#display{

color:#0a1e23;
margin:0 10px;
height:90px;
width: auto;
display:flex;
align-items:flex-end;
justify-content:flex-end;
font-size:30px;
margin-bottom:20px;
font-weight:800;
}
.calculator #display{
color:#0a1e23;

}

#clear{
    background-color:#ffd5d8;
}

.btn-number{
    background-color:#c3eaff;
    color:#000;
}
.btn-operator{
    background-color:#ffd0fb;
    color:#f967f3;
}

.btn-operator{
    background-color:#adf9e7;
    color:#000;
}

.theme-toggler{
    position:absolute;
    top:30px;
    right:30;
    cursor:pointer;
    color:#fff;
    z-index: 1;

}

.theme-toggler::before{
    content:"";
    height:30px;
    position: absolute;
    width: 30px;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    z-index: -1;
    border-color:#333;
    background-color:#333;
}

.theme-toggler .active{
    color:#fff;
}
.theme-toggler .active::before {
background:#fff;

}
button{
    height:70px;
    width: 70px;
    border:0;
    border-radius:30px;
    font-size:20px;
    cursor:pointer;
    transition:all 1s ease;
    margin:6px;
}

button:hover{
    transform:scale(1.1);
}

#equal{
    height:140px;
    border:;
    background:aqua;
}

.calculator .dark{
    background-color:#1b1b1b;
 
}

.calculator .dark{
    color:#f8fafb;
}

</style>

RESULTADO

José Alberto Mx

Updated on mayo 02, 2025

javascript

What are You Looking for?

Calculadora con Js, css y Html

HTML JS Y CSS

RESULTADO

Read Next

Efecto Hover en Botón

Animated Loader

Animated Glowing Progress Bar

Eventos de Mouse – Javascript