Aula 16

Exercícios Temáticos com Estilo (JavaScript + CSS simples)

🎯 Objetivo da aula

Reforçar os principais conceitos trabalhados até agora com foco em cálculo, organização de variáveis e apresentação visual, usando HTML, JavaScript e CSS leve (sem <div>). Os exercícios foram construídos com temas envolventes para os alunos, mantendo a estrutura simples, mas com aparência mais agradável.

📁 Organização da Aula

Criar uma nova pasta chamada aula16 dentro da pasta com o nome do aluno.
Criar 5 arquivos HTML, cada um com um exercício diferente.
Cada arquivo virá com estrutura visual pré-pronta no HTML e CSS, e os alunos deverão completar o código JavaScript com base nas instruções escritas nos comentários.

Hora do exercício! 🏋️🔥

✅ Exercício 1 – Loja de Itens Espaciais

<!DOCTYPE html>

<head>

<title>Exercício 1 - Loja Espacial</title>

<style>

body {

background-color: #eef6ff;

font-family: Arial, sans-serif;

padding: 20px;

text-align: center;

}

h2 {

color: #003366;

}

</style>

</head>

<body>

<h2>🚀 Loja Espacial</h2>

<p>Complete o código abaixo para calcular o valor total da compra de 3 itens intergalácticos.</p>

// Peça ao usuário o valor de três itens espaciais:

// - Sabre de luz

// - Escudo de plasma

// - Capacete galáctico

// Use prompt() e converta com Number()

// Calcule o valor total

// Mostre o total com alert() usando toFixed(2)

</script>

</body>

</html>

✅ Exercício 2 – Cálculo de Combustível para Nave

<!DOCTYPE html>

<head>

<title>Exercício 2 - Combustível</title>

<style>

body {

background-color: #fff0f0;

font-family: sans-serif;

text-align: center;

padding: 20px;

}

h2 {

color: #990000;

}

</style>

</head>

<body>

<h2>⛽ Combustível para Nave</h2>

<p>Complete o código abaixo para calcular quanto combustível será usado em uma viagem interplanetária.</p>

// Peça ao usuário:

// - Quantidade de quilômetros a serem percorridos

// - Quantos km a nave faz por litro

// Use Number() para conversão

// Divida a distância pela média para descobrir os litros necessários

// Mostre o resultado com alert(), usando toFixed(2)

</script>

</body>

</html>

✅ Exercício 3 – Pontuação de Batalha

<!DOCTYPE html>

<head>

<title>Exercício 3 - Pontuação</title>

<style>

body {

background-color: #f0fff0;

font-family: 'Segoe UI', sans-serif;

text-align: center;

padding: 20px;

}

h2 {

color: #006600;

}

</style>

</head>

<body>

<h2>⚔️ Pontuação de Batalha</h2>

<p>Complete o código para calcular a pontuação de um jogador:</p>

// Peça ao usuário:

// - Quantos inimigos foram derrotados (vale 10 pontos cada)

// - Quantos chefes foram derrotados (vale 50 pontos cada)

// - Quantos baús secretos foram abertos (vale 20 pontos cada)

// Calcule a pontuação total com operadores

// Mostre com alert() o resultado total

</script>

</body>

</html>

✅ Exercício 4 – Custo do Festival Gamer

<!DOCTYPE html>

<head>

<title>Exercício 4 - Festival Gamer</title>

<style>

body {

background-color: #e6f2ff;

font-family: Tahoma, sans-serif;

text-align: center;

padding: 20px;

}

h2 {

color: #004080;

}

</style>

</head>

<body>

<h2>🎮 Festival Gamer</h2>

<p>Você vai calcular quanto vai gastar no festival:</p>

// Peça ao usuário:

// - Valor do ingresso

// - Valor de comidas

// - Valor de lembranças/compras

// Some os valores e use toFixed(2) no total

// Mostre com alert() o total gasto no evento

</script>

</body>

</html>

✅ Exercício 5 – Loja de Robôs Personalizados

<!DOCTYPE html>

<head>

<title>Exercício 5 - Loja de Robôs</title>

<style>

body {

background-color: #f9f9f9;

font-family: Verdana, sans-serif;

text-align: center;

padding: 20px;

}

h2 {

color: #333;

}

</style>

</head>

<body>

<h2>🤖 Loja de Robôs Personalizados</h2>

<p>Monte o seu robô e calcule o valor total:</p>

// Peça ao usuário:

// - Valor do corpo do robô

// - Valor do chip de inteligência

// - Valor do visual personalizado

// Use prompt() e Number()

// Calcule o total e exiba com alert() usando toFixed(2)

</script>

</body>

</html>

✅ 📸 Desafio Visual — Recrie a Página Igual ao Print

📝 Instrução para os alunos (coloque no quadro ou no topo do arquivo):

Você verá um print de uma página simples. Seu desafio é reproduzir o visual e o comportamento funcional da página o mais fielmente possível.

A página deve conter:

Título centralizado
Texto explicativo
Um botão
Ao clicar no botão, um alert() mostra o resultado de um cálculo

Você deve:

Usar HTML + CSS simples (sem <div>)
Usar JavaScript com prompt(), Number() e alert()
Reproduzir as cores, fontes e alinhamento

🧩Endereço da imagem: https://cdn-icons-png.flaticon.com/512/7210/7210556.png

💡 Dica de Estilo: Centralizar Imagem no Centro da Tela

Quer deixar sua imagem de poção mágica centralizada na tela sem usar <div>?
Você pode aplicar o seguinte estilo direto na tag <img>:

O display: block transforma a imagem em um bloco, e o margin: auto faz com que ela fique perfeitamente centralizada na horizontal.

Se quiser mais espaço, adicione margin-top ou margin-bottom:

Esse truque funciona em qualquer página HTML e deixa o visual muito mais bonito!