Olá pessoal, hoje criei uma tabuada para ser utilizada online por todos :)
Visualize o Pen Tabuada feito por Francisco Chaves (@franciscochaves) em CodePen.
Deixo o código fonte abaixo para quem quiser utilizá-lo, fiquem a vontade para compartilhar.
Código HTML:
<!-- HTML -->
<main class="main">
<section class="tabuada">
<h1>Tabuada online</h1>
<form class="form" id="form">
<label for="valor">Digite o número a ser multiplicado</label>
<input type="number" id="multiplicador" />
<button>calcular</button>
</form>
<table id="resultado-tabuada"></table>
</section>
</main>
Código CSS:
/* CSS */
@import url('https://fonts.googleapis.com/css2?family=Lekton&family=Rancho&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lekton', cursive;
font-size: 20px;
}
h1 {
font-family: 'Rancho', cursive;
font-size: 3.5rem;
font-weight: 400;
}
.main {
min-height: 100vh;
background-color: #eff5fe;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.tabuada,
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form label,
.form input,
.form button {
margin: 0.5em;
}
.form input,
.form button {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
}
.form button {
cursor: pointer;
}
.form button:hover {
filter: opacity(0.8);
}
td {
width: 1.5rem;
}
Código JavaScript:
// JS
const msg = document.querySelector('label');
const botao = document.querySelector('button');
const formTabuada = document.querySelector('#form');
const tabuada = document.querySelector('#resultado-tabuada');
const multiplicador = document.querySelector('#multiplicador');
formTabuada.addEventListener('submit', function (event) {
event.preventDefault();
calcularTabuada(multiplicador.value, tabuada);
});
function calcularTabuada(valor, elementoAlvo) {
const multiplicador = parseInt(valor);
if (!!multiplicador || multiplicador == 0) {
elementoAlvo.innerHTML = '';
msg.innerText = 'Tabuada de ' + multiplicador;
msg.style.color = 'blue';
for (let multiplicando = 1; multiplicando <= 10; multiplicando++) {
elementoAlvo.innerHTML +=
'<tr>' +
'<td>' +
multiplicando +
'</td>' +
'<td>x</td>' +
'<td>' +
multiplicador +
'</td>' +
'<td>= </td>' +
'<td>' +
multiplicando * multiplicador +
'</td>' +
'</tr>';
}
} else {
elementoAlvo.innerHTML = '';
msg.innerText = 'Somente números';
msg.style.color = 'red';
}
}
