COMO CRIAR CALCULADORA UMA SIMPLES FEITA COM HTML, CSS E JAVASCRIPT

José satchova António janeiro 03, 2023






COMO CRIAR CALCULADORA SIMPLES FEITA COM , CSS E JAVASCRIPT


CÓDIGO FONTE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculadora</title>
    <style>

*{
    padding: 0;
    margin: 0;
}

#pri{
    width: 98vw;
    height: auto;
    margin: 1%;
    background-image: linear-gradient(150deg, black,blue);
}

#sub{
    width: 60vw;
    height: auto;
    background-color: #02035a;
    padding: 30px 0;
    position: relative;
}

button{
width: 5vw;
height: 7vh;
font: bold 13pt arial;
background-color: #ffffff;
margin-top: 0.5vh;
border-radius: 5px;
}


button#btn:hover{
    background-color: #00a2ff;
    cursor: pointer;
}

input{
    width: 20vw;
    height: 5vh;
    outline: none;
    text-align: right;
    font: bold 13pt arial;
    background-color: #ffffff;
    color: #02035a;
    margin-top: 20vh;

}


input#resultado::placeholder{
text-align: center;
font-size: 8pt;
}

img{
    width:8vw;
    height: 15vh;
    border-radius:100vh;
position: absolute;
margin: -4vh 0 0 30vw;  

   
}

    </style>


</head>
<body>
   
<center>

<div id="pri">
<div id="sub">

   

<input type="text" name="" id="resultado" placeholder="Calcular" disabled>


<table>


    <tr>
       
        <td>  <button id="btn" onclick="limpar()"style=" background-color: red;">C </button></td>
        <td>  <button id="btn" onclick="backspace()"style=" background-color: red;"><</button></td>
        <td>  <button id="btn" onclick="inserir('*')"style="background-color: #ffc400;">* </button></td>
        <td>  <button id="btna"onclick="inserir('/')"style=" background-color: #ffc400;">/ </button></td>
         
    </tr>



    <tr>
        <td>  <button id="btn" onclick="inserir('9')">9 </button></td>
        <td>  <button id="btn"onclick="inserir('8')">8 </button></td>
        <td>  <button id="btn" onclick="inserir('7')">7 </button></td>
        <td>  
            <button id="btn"onclick="inserir('+')"
            style="height: 8vh; background-color: #ffc400; position: absolute; margin-top: -4vh;" >
                +
            </button></td>
         
    </tr>
   


    <tr>
        <td>  <button id="btn" onclick="inserir('6')">6 </button></td>
        <td>  <button id="btn"onclick="inserir('5')">5 </button></td>
        <td>  <button id="btn" onclick="inserir('4')">4 </button></td>
        <td>  <button id="btn"onclick="inserir('-')"style=" background-color: #ffc400;">- </button></td>
         
    </tr>
   
       

    <tr>
        <td>  <button id="btn" onclick="inserir('3')">3 </button></td>
        <td>  <button id="btn"onclick="inserir('2')">2 </button></td>
        <td>  <button id="btn" onclick="inserir('1')">1 </button></td>
        <td>  <button id="btn"onclick="inserir('%')"style=" background-color: #ffc400;">% </button></td>
         
    </tr>
   
       
    <tr>
        <td>  <button id="btn" onclick="inserir('0')">0 </button></td>
        <td>  <button id="btnb"onclick="inserir('.')" style="background-color: #2dfa03;"
            >. </button></td>
        <td rowspan="2">
             <button id="btn"
             style="width: 10.2vw; background-color: #2dfa03; position: absolute; margin-top: -3.3vh; "
             onclick="calcular()" class="igual">=
        </button></td>

         
    </tr>
   








</table>
<em style="color: #ffffff;">
    <br>
    &copy;José Satchova António
</em>

<div id="ms">
   
</div>

</div>
       
</center>
</div>




<script>
  let ipt=  document.querySelector('#resultado')
ipt.value=''
function inserir(valor){
ipt.value+=valor
}


function limpar(){
  ipt.value=''

}


function backspace(){
    let ipt=  document.querySelector('#resultado').value
    document.querySelector('#resultado').value=ipt.substring(0,ipt.length-1)

}

function calcular(){



    if(ipt.value){

        ipt.value=eval(ipt.value)
}
else{
    ipt.value='inválido'
}


}



</script>
</body>
</html>


José satchova António

Postado por José satchova António

Postar um comentário

7 Comentários

Ad Code