Olá pessoal, hoje estou trazendo um programa feito em JavaScript para verificar se o número é um quadrado perfeito. Uma das formas para descobrirmos se um número é quadrado perfeito é verificando se o número possui raiz quadrada exata.
Visualize o Pen Número quadrado perfeito 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>
<section class="calc">
<form class="form" id="form">
<h1>Número quadrado perfeito</h1>
<label for="num">Digite o número</label>
<input id="num" type="number" />
<button id="button">Verificar</button>
</form>
</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;
}
.calc {
min-height: 100vh;
max-width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffebee;
box-shadow: 0px 0px 30px gray;
}
.calc h1 {
padding-top: 0.4em;
text-align: center;
}
.form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 1em;
}
.form label,
.form button {
margin-top: 1em;
padding: 1em;
}
.form input,
.form button {
font-size: inherit;
font-family: inherit;
width: 100%;
padding: 0.5em;
}
.form button {
background-color: #fbefff;
cursor: pointer;
border-radius: 0.3em;
width: 50%;
}
.form button:hover {
filter: opacity(0.8);
}
.form button:active {
background-color: #fcf;
color: #000;
filter: opacity(0.8);
}
Código JS:
// JS
function calcularQuadradoPerfeito(num) {
//retira a raiz quadrada, valor inteiro
const raizQ = parseInt(Math.sqrt(num));
//verifica se a raiz quadrada elevado ao quadrado é um valor exato
return raizQ * raizQ == num;
}
function validaEntrada(num) {
if (num == '' || num <= 0) {
return false;
}
return true;
}
const botao = document.getElementById('button');
const form = document.getElementById('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const value = document.getElementById('num').value;
if (!validaEntrada(value)) {
alert('Insirar algum número maior que zero');
} else if (calcularQuadradoPerfeito(value)) {
alert('É Quadrado perfeito');
} else {
alert('Não é quadrado perfeito');
}
});
Referências
OLIVEIRA, Naysa Crystine Nogueira. “Número quadrado perfeito”; Brasil Escola. Disponível em https://brasilescola.uol.com.br/matematica/numero-quadrado-perfeito.htm. Acesso em 2 de fevereiro de 2018.
