O curso “Code, Coffee, and Beer” é uma jornada interativa para desenvolvedores e entusiastas da tecnologia que desejam aprimorar suas habilidades de programação em um ambiente descontraído e colaborativo. Durante o curso, os participantes terão a oportunidade de aprender novas linguagens de programação, ferramentas de desenvolvimento e técnicas avançadas, tudo enquanto desfrutam de café e cerveja em sessões informais. pizza
Oficial - Code, Coffee and Beer! by CHZera!! WOWWW V4
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Rich Text Area Test</title>
<style>
body { font-family: system-ui, Arial, sans-serif; padding: 24px; background:#f7f7fb; }
.rta { background: #fff; border: 1px solid #d0d4db; border-radius: 8px; padding: 16px; min-height: 200px; }
.controls { margin: 12px 0; }
button { padding: 8px 12px; border-radius:6px; border:1px solid #bbb; background:#fff; cursor:pointer; }
pre { background:#222; color:#f6f6f6; padding:8px; border-radius:6px; overflow:auto; }
</style>
</head>
<body>
<h2>Rich Text Area — Test</h2>
<div class="controls">
<button id="copyBtn">Copy HTML</button>
<button id="resetBtn">Reset Content</button>
</div>
<!-- contenteditable rich text area -->
<div id="rta" class="rta" contenteditable="true" spellcheck="true" aria-label="Rich text area">
<h1>Bem-vindo! 🎉</h1>
<p>
Texto com acentuação: <strong>ação, usuário, francês — façade, naïve</strong>.<br>
Caracteres especiais: © ® ™ § ¶ • … — «aspas» “curvas” ‹simples› — © € £ ¥ µ
</p>
<p>Emojis e símbolos: 😀 🚀 ✨ 🔒 ✅ 📌</p>
<h2>Lista numerada</h2>
<ol>
<li>Primeiro item — com vírgulas e acentos: maçã, pão, café</li>
<li>Segundo item — caracteres HTML escapados: <script>alert('xss')</script></li>
<li>Terceiro item — código inline: <code>const x = "&";</code></li>
</ol>
<h2>Lista com marcadores</h2>
<ul>
<li>Um item curto</li>
<li>Um item muito longo que deve testar quebra de linha, responsividade e overflow em telas pequenas — verifique se não estoura o layout</li>
</ul>
<h2>Multilinguagem</h2>
<p>Português, English, Español, Français, 中文, العربية — testar direção e renderização.</p>
<blockquote>Este é um bloco citado — verifique espaçamentos e estilos.</blockquote>
<p><em>Instrução:</em> Edite este conteúdo, insira imagens, links, tabelas ou cole de um Word/Google Docs para ver como o rich text area lida com formatação.</p>
</div>
<h3>Preview (rendered HTML)</h3>
<pre id="preview"></pre>
<script>
const rta = document.getElementById('rta');
const preview = document.getElementById('preview');
const copyBtn = document.getElementById('copyBtn');
const resetBtn = document.getElementById('resetBtn');
function updatePreview() {
preview.textContent = rta.innerHTML;
}
// initial preview
updatePreview();
// update preview on input
rta.addEventListener('input', updatePreview);
// copy innerHTML to clipboard (for QA / assertions)
copyBtn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(rta.innerHTML);
alert('HTML copiado para a área de transferência!');
} catch (e) {
alert('Falha ao copiar. Abra o console para inspecionar o HTML.');
console.error(e);
}
});
// reset content
resetBtn.addEventListener('click', () => {
location.reload();
});
</script>
</body>
</html>