🧩 Text to HTML Article Generator
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Text to HTML Generator</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #0f172a;
color: #e2e8f0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
width: 100%;
max-width: 800px;
background: #1e293b;
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #38bdf8;
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
border: none;
border-radius: 8px;
margin-top: 10px;
background: #0f172a;
color: #f8fafc;
resize: vertical;
}
button {
width: 100%;
margin-top: 10px;
padding: 10px;
font-weight: bold;
border: none;
border-radius: 8px;
background: #38bdf8;
color: #0f172a;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: #0ea5e9;
}
#output {
margin-top: 15px;
background: #0f172a;
border-radius: 8px;
padding: 10px;
min-height: 150px;
white-space: pre-wrap;
color: #a5b4fc;
overflow-x: auto;
}
.copy-btn {
background: #22c55e;
margin-top: 8px;
}
.copy-btn:hover {
background: #16a34a;
}
</style>
</head>
<body>
<div class="container">
<h1>🧩 Text to HTML Generator</h1>
<p>Masukkan teks artikel di bawah, lalu klik <b>Generate HTML</b> untuk membungkus otomatis ke format HTML.</p>
<textarea id="inputText" placeholder="Tulis atau paste teks artikel di sini..."></textarea>
<button onclick="generateHTML()">Generate HTML</button>
<div id="output" contenteditable="true"></div>
<button class="copy-btn" onclick="copyHTML()">Copy HTML</button>
</div>
<script>
function generateHTML() {
const input = document.getElementById("inputText").value.trim();
if (!input) {
alert("Masukkan teks terlebih dahulu!");
return;
}
// Pisahkan paragraf berdasarkan baris kosong
const paragraphs = input.split(/\n\s*\n/);
let htmlOutput = "<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <title>Artikel</title>\n</head>\n<body>\n";
paragraphs.forEach(p => {
const clean = p.replace(/\n/g, " ").trim();
htmlOutput += ` <p>${clean}</p>\n`;
});
htmlOutput += "</body>\n</html>";
document.getElementById("output").textContent = htmlOutput;
}
function copyHTML() {
const htmlText = document.getElementById("output").textContent;
navigator.clipboard.writeText(htmlText);
alert("HTML berhasil disalin ke clipboard!");
}
</script>
</body>
</html>
No comments:
Post a Comment