DEV Community

Cover image for Novo app!!!! Stingheer executar html
Gloomy_darkness
Gloomy_darkness

Posted on

Novo app!!!! Stingheer executar html

#codepen

Um executor HTML simples e fácil de usar sem nenhuma conta!!
Jogue clicando aqui
Ou jogue por DEV.to!!:

O código é público para quem quer alterar o app o código é este (não tem Copyright):
<!DOCTYPE html>



Executor de Sites body { font-family: Arial; background:#222; color:#fff; padding:20px; } textarea { width:100%; margin-top:10px; border-radius:6px; padding:10px; border:none; font-family:monospace; font-size:14px; } button { margin-top:10px; padding:8px 12px; cursor:pointer; border:none; border-radius:5px; background:#00aaff; color:#000; font-weight:bold; } iframe { width:100%; height:300px; border:1px solid #555; margin-top:10px; border-radius:6px; background:#000; } label { display:block; margin-top:10px; }

Executor de Sites

HTML:
<h1>Olá Mundo</h1>

CSS:
h1 { color: #00ffcc; }

JS:
console.log("JS executado!");

Executar

Resultado:

function runCode(){ const html = document.getElementById("htmlArea").value; const css = document.getElementById("cssArea").value; const js = document.getElementById("jsArea").value; const iframe = document.getElementById("outputFrame"); const doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(` <style>${css}</style> ${html} <script> try { ${js} } catch(e){ console.error(e); } <\/script> `); doc.close(); }

Top comments (1)

Collapse
 
gloomy_darkness-3456 profile image
Gloomy_darkness •

css #html #javascript #js #codepen