COMO CRIAR TABUADA DE MULTIPLICAÇÃO COM HTML CSS E JAVASCRIPT COM OPÇÃO DE ALTERAÇÃO DO TEMA DE FUNDO

José satchova António janeiro 05, 2023

 



COMO CRIAR TABUADA DE MULTIPLICAÇÃO COM HTML, CSS E JAVASCRIPT

CÓDIGO FONT:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabua de multiplicacao</title>

<style>



div#tab{
    width: 99%;
    margin: 1% 0.5%;


 
}




div#tabb{
    width: 90%;
    margin: 1% 5%;
    display: flex;
    flex-direction: column;
align-items: center;
border-radius: 5%;
padding: 10px 0;
}

input{
    width: 50%;
    height: 35px;
    border-radius: 8px;
    text-align: center;
    outline: none;
    box-shadow: 2px 2px 2px #7a6767;
}
p{
    margin-top: 5%;
    font: bold 14pt helvetica;
}



button#exect{
    margin-top: 5%;
    padding: 5px 8px;
    border-radius: 5px;
    font: bold 14pt helvetica;
}
button#exect:hover{
    transform: rotateZ(10deg);
}

select{
    padding: 0;
    text-align: center;
    height: auto;
    border-radius: 5px;
}
div#sel{
    width: auto;
    display: flex;
    height: 30px;
}


option.a{
    background-color: #000000;
}


option.b{
    background-color: #0000ff;
}


option.c{
    background-color: green;
}


option.d{
    background-color: red;
}

p.cp{
    color: white;
    font: normal 12pt helvetica;
    text-align: center;
}

</style>

</head>
<body onload="cores()">
   





<div id="tab">
 <div id="sel">


    <select name="" id="sltcores" onclick="cores()">
        <option value="preto" class="a">PRETO</option>
        <option value="azul" class="b">AZUL</option>
        <option value="verde" class="c">VERDE</option>
        <option value="vermelho" class="d">VERMELHO</option>
    </select>
   

 </div>

<div id="tabb">


    <h2 id="title">Tabuada de multiplicação</h2>
    <p id="valorpa">Número da tabuada</p>
    <input type="number" id="ipta" placeholder="insira numero da tabuada">
    <p id="valorpb">Até?</p>
    <input type="number" id="iptb" placeholder=" Vai até quanto?">
    <button id="exect" onclick="accao()">Executar</button>
   
</div>

<p class="cp">&copy;JOSÉ SATCHOVA ANTÓNIO</p>
</div>







<!------------------------- RESULTADO -------------------------->

<div id="resultado">
   
   
 

</div>
<!------------------------- RESULTADO -------------------------->








<script>



var div=document.getElementById('tabb')
 var slt=document.getElementById('sltcores')
var pp=document.getElementById('valorpa')
var ppp=document.getElementById('valorpb')
var htitle=document.getElementById('title')
var btn=document.getElementById('exect')





    function cores(){



if(slt.value=="preto"){
document.body.style.background='grey'
div.style.background='black'
slt.style.background='black'
slt.style.color='white'
pp.style.color='green'
ppp.style.color='green'
htitle.style.color='red'
btn.style.background='white'
btn.style.color='black'
}
       
else{
    if(slt.value=="azul"){
document.body.style.background='#00a2ff'
div.style.background='blue'
slt.style.background='white'
slt.style.color='blue'
pp.style.color='red'
ppp.style.color='red'
htitle.style.color='white'
btn.style.background='white'
btn.style.color='black'
    }

    if(slt.value=="verde"){
        document.body.style.background='#4ea14e'
div.style.background='green'
slt.style.background='white'
slt.style.color='green'
pp.style.color='black'
ppp.style.color='black'
htitle.style.color='yellow'
btn.style.background='white'
btn.style.color='black'
    }


    if(slt.value=="vermelho"){
        document.body.style.background='#f17373'
div.style.background='red'
slt.style.background='white'
slt.style.color='red'
pp.style.color='blue'
ppp.style.color='blue'
htitle.style.color='black'
btn.style.background='white'
btn.style.color='black'
    }




}

    }
   
   
   




function accao(){
    var btn=document.getElementById('exect')
var valor1=document.getElementById('ipta').value
var valor2=document.getElementById('iptb').value
var resp=document.getElementById('resultado')

if(valor1.length==""||valor2.length==""){
    alert("NENHUM DOS CAMPOS PODE ESTAR VAZIO, TENTE NOVAMENTE")
}
else{

    var contagem=1
valor1=Number(valor1)
valor2=Number(valor2)




do{
    var mult=valor1*contagem
    resp.innerHTML+=(` <br>${valor1}x${contagem}=${mult}`)
contagem+=1

}while(contagem<=valor2)







if(contagem==contagem){
resp.style.width='98%'
resp.style.marginTop='5%'
    resp.style.display='flex'
    resp.style.justifyContent='space-arrond'
resp.style.flexDirection='row'
resp.style.flexWrap='wrap'

    resp.innerHTML+=(`<div style="width:auto;margin-left:5%;"> </div>`)

}

   

   
}





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



José satchova António

Postado por José satchova António

Postar um comentário

1 Comentários

Ad Code