Aprender JavaScript apenas através de exercícios isolados pode dificultar a compreensão de como os conceitos são utilizados em aplicações reais.

Por isso, neste projeto vamos desenvolver um Simulador de Terreno Quadrado utilizando HTML, CSS e JavaScript, criando uma aplicação capaz de calcular automaticamente a medida dos lados de um terreno a partir da área informada pelo usuário.

Durante o desenvolvimento você aprenderá, na prática, como utilizar algumas das funções matemáticas mais importantes do JavaScript, além de trabalhar com formulários, validação de dados, manipulação do DOM e organização de código.

Se preferir acompanhar todo o desenvolvimento passo a passo, assista à aula completa no YouTube:

---

O projeto

O sistema desenvolvido possui duas formas de funcionamento.

A primeira permite que o usuário informe manualmente a área do terreno.

A segunda gera automaticamente uma área aleatória para facilitar os testes da aplicação.

Após realizar o cálculo, o sistema apresenta:

• Área informada
• Medida exata de cada lado
• Medida arredondada
• Representação visual do terreno
• Mensagens de sucesso e erro
• Atualização dinâmica da interface

Esse tipo de projeto é excelente para quem está iniciando na programação, pois reúne diversos conceitos fundamentais em uma única aplicação prática.

GitHub do Projeto:

https://github.com/marcoscaldas/projetoCalcularAreaTerreno.git

---

O que você aprenderá

Durante o desenvolvimento deste projeto você praticará:

• HTML
• CSS
• JavaScript
• Manipulação do DOM
• querySelector()
• addEventListener()
• preventDefault()
• Number()
• isNaN()
• Math.random()
• Math.sqrt()
• Math.round()
• innerText
• classList
• Validação de formulários
• Organização de código em funções

---

Estruturando o HTML

O primeiro passo consiste em montar toda a estrutura da página utilizando HTML.

O projeto utiliza:

• formulário
• campo de entrada da área
• botão para calcular
• botão para gerar área aleatória
• painel de resultado
• área para mensagens ao usuário

Organizar corretamente o HTML facilita bastante a manipulação dos elementos posteriormente pelo JavaScript.

---

Capturando os elementos da página

Após criar a estrutura HTML, todos os elementos são capturados utilizando:

document.querySelector()

Uma boa prática apresentada durante a aula é separar o código em blocos utilizando comentários, facilitando futuras manutenções e tornando a leitura muito mais simples.

---

Trabalhando com formulários

Como o botão principal é do tipo submit, é necessário impedir o comportamento padrão do navegador.

Para isso utilizamos:

event.preventDefault();

Assim a página não é recarregada sempre que o formulário for enviado, permitindo que o JavaScript realize todo o processamento dos dados.

---

Validando os dados

Antes de qualquer cálculo, o sistema verifica diversas situações importantes:

• Campo vazio
• Valor inválido
• Área igual ou menor que zero

Esses tratamentos evitam erros e melhoram significativamente a experiência do usuário.

Aplicações reais sempre realizam esse tipo de validação antes de executar qualquer processamento.

---

Convertendo texto para número

Os valores digitados em um campo HTML chegam ao JavaScript como texto.

Por isso utilizamos:

Number(valorDigitado)

Somente após essa conversão podemos realizar operações matemáticas corretamente.

---

Utilizando isNaN()

Outro conceito importante apresentado no projeto é a utilização da função:

isNaN()

Ela verifica se o valor informado realmente representa um número.

Caso contrário, o sistema apresenta uma mensagem de erro orientando o usuário a informar apenas valores numéricos.

---

Calculando a medida dos lados

Como o terreno é quadrado, basta calcular a raiz quadrada da área.

Para isso utilizamos:

Math.sqrt()

Essa função retorna automaticamente a medida exata de cada lado do terreno, eliminando a necessidade de implementar manualmente o cálculo da raiz quadrada.

---

Arredondando os resultados

Após calcular a medida exata, utilizamos:

Math.round()

para apresentar também uma medida arredondada, facilitando a leitura dos resultados pelo usuário.

---

Gerando áreas aleatórias

Além do cálculo manual, o projeto também possui um botão responsável por gerar automaticamente uma área aleatória.

Esse recurso utiliza:

Math.random()

permitindo testar rapidamente diferentes cenários sem precisar digitar valores manualmente.

---

Atualizando a interface dinamicamente

Depois dos cálculos, o JavaScript atualiza automaticamente todas as informações exibidas ao usuário utilizando recursos como:

• innerText
• classList.add()
• classList.remove()

Também é criada uma função específica para exibir mensagens de sucesso e erro, deixando o código mais organizado e reutilizável.

---

Organização do código

Durante toda a implementação, o projeto é dividido em pequenas funções, cada uma com uma responsabilidade específica.

Entre elas:

• calcularTerreno()
• mostrarMensagem()
• gerarAreaAleatoria()

Essa organização facilita futuras manutenções e deixa o código muito mais limpo e profissional.

---

Conclusão

Projetos práticos são uma das melhores formas de aprender programação.

Neste simulador de terreno você aplicou diversos conceitos importantes do JavaScript, incluindo validação de dados, manipulação do DOM, organização de código e utilização das funções matemáticas mais utilizadas da linguagem.

Além de compreender como essas funções funcionam individualmente, você aprendeu como utilizá-las em uma aplicação real, aproximando seus estudos do desenvolvimento profissional.

---

Assista à aula completa

Se você deseja acompanhar todo o desenvolvimento passo a passo, explicando cada linha de código desde o HTML até o JavaScript, assista à live completa no canal Desvendando o Código.

🎥 Live completa: