<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Desafio com window.write</title>
<script>
// Define a função personalizada `window.write`
window.write = function(content) {
// Adiciona conteúdo diretamente no corpo da página
document.body.innerHTML += content + "<br>";
};
</script>
</head>
<body>
<script>
// Testando a função personalizada com <details>
write(`
<details>
<summary>Cálculos Simples</summary>
${23 * 23}<br>
"Seja feliz! 😊"<br>
Resultado: ${45 + 10}<br>
</details>
`);
// Adicionando uma imagem em um <details>
write(`
<details>
<summary>Imagem Inspiradora</summary>
<img src="https://img.freepik.com/premium-photo/mujer-linda-radiante-con-cabello-rubio-y-suelto_1106336-41.jpg" width="300" height="200">
</details>
`);
// Adicionando um iframe de vídeo em um <details>
write(`
<details>
<summary>Vídeo Inspirador</summary>
<iframe width="300" height="300" src="https://www.youtube.com/embed/UgTeVBZmUlU"
title="Julia Graciela por amar demais" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</details>
`);
// Adicionando um botão interativo em um <details>
write(`
<details>
<summary>Botão Interativo</summary>
<button onclick="alert('Você clicou no botão!')">Clique Aqui</button>
</details>
`);
// Adicionando uma tabela dinâmica em um <details>
let rows = 3, cols = 4;
let table = '<table border="1">';
for (let i = 0; i < rows; i++) {
table += '<tr>';
for (let j = 0; j < cols; j++) {
table += `<td>${i},${j}</td>`;
}
table += '</tr>';
}
table += '</table>';
write(`
<details>
<summary>Tabela Dinâmica</summary>
${table}
</details>
`);
// Adicionando um relógio dinâmico em um <details>
write(`
<details>
<summary>Relógio Dinâmico</summary>
<div id="clock"></div>
</details>
`);
setInterval(() => {
document.getElementById('clock').innerText = new Date().toLocaleTimeString();
}, 1000);
// Adicionando um formulário interativo em um <details>
write(`
<details>
<summary>Formulário Interativo</summary>
<form onsubmit="handleSubmit(event)">
Nome: <input type="text" id="nome"><br>
<button type="submit">Enviar</button>
</form>
<div id="result"></div>
</details>
`);
function handleSubmit(event) {
event.preventDefault();
let nome = document.getElementById('nome').value;
document.getElementById('result').innerText = `Olá, ${nome}!`;
}
</script>
</body>
</html>
<