📅 Atualizado em 06/08/2026

Calcular metros quadrados é uma das primeiras atividades que muitos estudantes encontram quando começam a aprender lógica de programação. Em vez de resolver apenas uma conta matemática, podemos transformar esse problema em um projeto completo utilizando HTML, CSS e JavaScript.

Neste artigo você aprenderá como desenvolver uma Calculadora de Metros Quadrados em JavaScript, criando uma aplicação capaz de calcular automaticamente a medida de cada lado de um terreno quadrado a partir da área informada pelo usuário.

Além disso, você conhecerá algumas das principais funções intrínsecas do JavaScript utilizadas em projetos reais, como Math.sqrt(), Math.round(), Math.random() e isNaN().

---

Resultado do projeto

Ao final desta aula você terá desenvolvido uma aplicação semelhante a esta:

• Campo para informar a área do terreno;
• Botão para calcular automaticamente a medida dos lados;
• Geração de áreas aleatórias utilizando JavaScript;
• Exibição da medida exata;
• Exibição da medida arredondada;
• Interface moderna construída com HTML e CSS.

Esse tipo de projeto ajuda a entender como matemática e programação trabalham juntas para resolver problemas do dia a dia.

---

O que você aprenderá

Durante o desenvolvimento do projeto serão abordados diversos conceitos importantes do JavaScript.

✅ Manipulação do DOM

✅ querySelector()

✅ addEventListener()

✅ preventDefault()

✅ Conversão de String para Number

✅ Validação de formulários

✅ isNaN()

✅ Math.sqrt()

✅ Math.round()

✅ Math.random()

✅ innerText

✅ Organização de código JavaScript

---

Como calcular metros quadrados de um terreno

Imagine um terreno quadrado com área igual a 625 m².

Sabemos que:

Área = lado × lado

Para descobrir a medida de cada lado basta calcular a raiz quadrada da área.

Lado = √625

Lado = 25 metros

Em JavaScript essa operação fica extremamente simples.

const lado = Math.sqrt(625);

console.log(lado);

Saída:

25

É exatamente essa lógica que utilizaremos durante todo o projeto.

---

Utilizando Math.sqrt()

A função Math.sqrt() calcula automaticamente a raiz quadrada de um número.

Exemplo:

const area = 400;

const lado = Math.sqrt(area);

console.log(lado);

Resultado:

20

Sempre que você precisar descobrir a medida de um lado de um quadrado conhecendo apenas sua área, essa função será a escolha ideal.

---

Arredondando valores com Math.round()

Nem sempre a raiz quadrada resulta em um número inteiro.

Por exemplo:

Área = 65

A medida exata será:

8.062257...

Como normalmente desejamos apresentar uma medida mais amigável para o usuário, utilizamos Math.round().

const medidaExata = Math.sqrt(65);

const medidaArredondada = Math.round(medidaExata);

console.log(medidaArredondada);

Resultado:

8

Durante o projeto exibimos tanto a medida exata quanto a medida arredondada.

---

Gerando áreas aleatórias com Math.random()

Para facilitar os testes do sistema também criamos um botão responsável por gerar automaticamente uma área aleatória.

O JavaScript possui uma função pronta para isso.

const areaAleatoria = Math.random() * 900 + 100;

Em seguida utilizamos:

Math.round(areaAleatoria);

Assim conseguimos gerar valores inteiros automaticamente para testar nossa aplicação sem precisar digitar uma nova área toda vez.

---

Validando dados com isNaN()

Um dos erros mais comuns de quem está começando é tentar realizar operações matemáticas utilizando texto.

Imagine que o usuário digite:

abc

Nesse caso não existe como calcular a raiz quadrada.

Para evitar esse problema utilizamos:

if (isNaN(area)) {

    console.log("Digite apenas números.");

}

Dessa forma o sistema valida a entrada antes de realizar qualquer cálculo.

---

Capturando elementos com querySelector()

Todo o projeto utiliza querySelector() para capturar os elementos da página.

Exemplo:

const inputArea = document.querySelector("#areaTerreno");

Depois basta acessar o valor informado.

const area = inputArea.value;

Essa é uma das funções mais utilizadas em aplicações JavaScript.

---

Trabalhando com eventos

Sempre que o usuário clicar no botão Calcular Terreno, um evento será executado.

formTerreno.addEventListener("submit", (evento) => {

    evento.preventDefault();

});

O método preventDefault() impede que o formulário recarregue a página, permitindo que todo o processamento aconteça diretamente no navegador.

---

Atualizando a interface

Depois de realizar os cálculos, atualizamos os elementos HTML utilizando innerText.

ladoSuperior.innerText = medidaArredondada;

ladoLateral.innerText = medidaArredondada;

Assim o usuário visualiza imediatamente o resultado do cálculo.

---

Organização do projeto

Mesmo sendo um projeto para iniciantes, ele foi organizado em pequenas etapas.

• Captura dos elementos HTML;
• Validação dos dados;
• Conversão para número;
• Cálculo do terreno;
• Atualização da interface;
• Geração de áreas aleatórias.

Essa organização torna o código muito mais fácil de entender e manter.

---

Assista à aula completa

Nesta aula você acompanha o desenvolvimento completo do projeto, entendendo cada linha de código e o motivo da utilização de cada função do JavaScript.

▶️ Vídeo:

---

Conclusão

Aprender JavaScript não significa decorar funções. O mais importante é entender quando e por que utilizar cada recurso.

Neste projeto resolvemos um problema real: calcular automaticamente a medida de cada lado de um terreno quadrado a partir da área informada pelo usuário. Durante esse processo aprendemos, na prática, como utilizar Math.sqrt(), Math.round(), Math.random(), isNaN(), querySelector(), addEventListener() e innerText em uma aplicação completa.

Esse é exatamente o tipo de projeto que ajuda quem está começando a desenvolver raciocínio lógico e ganhar confiança para criar aplicações cada vez mais elaboradas.

Se você gostou deste conteúdo, continue acompanhando o Desvendando o Código, onde cada projeto ensina programação resolvendo problemas reais de forma simples e passo a passo.