Digite o código Javascript
// Função para executar o código
function executarCodigo() {
// Variáveis
let nome = "Maria";
let idade = 17;
// Exibir no console
console.log("Nome: " + nome);
console.log("Idade: " + idade);
// Verificar maioridade
let resultado = idade >= 18
? nome + " é maior de idade."
: nome + " é menor de idade.";
document.getElementById('resultado-idade').innerHTML =
"<strong>Status:</strong> " + resultado;
// Gerar contagem
let contagemHTML = "";
for (let i = 1; i <= 5; i++) {
contagemHTML += '<div class="numero">' + i + '</div>';
console.log("Contagem: " + i);
}
document.getElementById('contagem').innerHTML = contagemHTML;
console.log("Fim do programa!");
alert(" Código executado com sucesso! Verifique o console (F12) para mais detalhes.");
}
// Executar automaticamente ao carregar a página
window.onload = function() {
executarCodigo();
};
HTML
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo JavaScript</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <div class="container"> <h1>💻 Exemplo JavaScript</h1> <div class="resultado"> <strong>Nome:</strong> Maria </div> <div class="resultado"> <strong>Idade:</strong> 17 anos </div> <div class="resultado" id="resultado-idade"></div> <div> <h3 style="color: #667eea; margin-top: 30px; margin-bottom: 15px;">Contagem de 1 a 5:</h3> <div class="contagem" id="contagem"></div> </div> <button class="botao" onclick="executarCodigo()">Executar Código</button> </div> <script src="script.js"></script> </body> </html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 10px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
}
h1 {
color: #667eea;
margin-bottom: 30px;
text-align: center;
font-size: 28px;
}
.resultado {
background: #f8f9fa;
border-left: 4px solid #667eea;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
font-size: 16px;
color: #333;
}
.resultado strong {
color: #667eea;
}
.contagem {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 20px;
}
.numero {
background: #667eea;
color: white;
padding: 15px;
border-radius: 5px;
text-align: center;
font-weight: bold;
font-size: 18px;
}
.botao {
background: #667eea;
color: white;
border: none;
padding: 12px 30px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
width: 100%;
transition: background 0.3s;
}
.botao:hover {
background: #764ba2;
}
