Berikut adalah contoh kode untuk membuat aplikasi Article Structured Data Generator dengan menggunakan JavaScript. Aplikasi ini akan menghasilkan kode output yang dapat langsung disalin oleh pengguna. User interface aplikasi ini menggunakan framework Bootstrap untuk tampilan yang lebih menarik.
Article Structured Data Generator
Code:
JavaScript
JavaScript
// Mendapatkan elemen input dari pengguna
const titleInput = document.getElementById('title');
const authorInput = document.getElementById('author');
const dateInput = document.getElementById('date');
const contentInput = document.getElementById('content');
// Mendapatkan elemen tombol generate
const generateButton = document.getElementById('generate');
// Menambahkan event listener pada tombol generate
generateButton.addEventListener('click', generateStructuredData);
// Fungsi untuk menghasilkan structured data
function generateStructuredData() {
// Mendapatkan nilai dari input pengguna
const title = titleInput.value;
const author = authorInput.value;
const date = dateInput.value;
const content = contentInput.value;
// Membuat objek structured data
const structuredData = {
"@context": "https://schema.org",
"@type": "Article",
"headline": title,
"author": {
"@type": "Person",
"name": author
},
"datePublished": date,
"articleBody": content
};
// Mengubah objek structured data menjadi JSON
const jsonOutput = JSON.stringify(structuredData, null, 2);
// Menampilkan hasil output
const outputElement = document.getElementById('output');
outputElement.textContent = jsonOutput;
}CSS
CSS
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #F2F4F4;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h3 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.btn-primary {
width: 100%;
}
#outputCode {
resize: none;
}HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Structured Data Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h3>Article Structured Data Generator</h3>
<form>
<div class="form-group">
<label for="title">Judul Artikel</label>
<input type="text" class="form-control" id="title" placeholder="Masukkan judul artikel">
</div>
<div class="form-group">
<label for="author">Penulis</label>
<input type="text" class="form-control" id="author" placeholder="Masukkan nama penulis">
</div>
<div class="form-group">
<label for="date">Tanggal Publikasi</label>
<input type="date" class="form-control" id="date">
</div>
<div class="form-group">
<label for="content">Isi Artikel</label>
<textarea class="form-control" id="content" rows="5" placeholder="Masukkan isi artikel"></textarea>
</div>
<button type="button" class="btn btn-primary" id="generate">Generate Structured Data</button>
</form>
<div class="mt-3">
<h4>Code:</h4>
<pre id="output"></pre>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Leave a Reply