Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2020

Modo escuro

Tabuada em JavaScript

Tabuada em JavaScript

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/css?family=Lato:400,400i,700");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Lato, sans-serif;
  font-size: 20px;
}

.main {
  background-color: #F8F88D;
}

.tabuada {
  min-height: 100vh;
}

.tabuada, .form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form label,
.form input,
.form button {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.form input,
.form button {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5em;
}

.form button {
  background-color: #FBEFFF;
  cursor: pointer;
  border-radius: 0.3em;
  width: 50%;
}

.form button:hover {
  filter: opacity(0.8);
}

Código JS:

// 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';
  }
}
×

Inscreva-se para novas atualizações