Berikut adalah contoh kode untuk membuat aplikasi Event Structured Data Generator dengan menggunakan JavaScript. Aplikasi ini akan menghasilkan kode output yang bisa langsung disalin oleh pengguna. Kami akan menggunakan user interface yang dibangun dengan bantuan Bootstrap untuk tampilan yang lebih menarik.
Event Structured Data Generator
document.getElementById('eventForm').addEventListener('submit', function(event) {
event.preventDefault();
var eventName = document.getElementById('eventName').value;
var eventDate = document.getElementById('eventDate').value;
var eventLocation = document.getElementById('eventLocation').value;
var structuredData = {
"@context": "https://schema.org",
"@type": "Event",
"name": eventName,
"startDate": eventDate,
"location": {
"@type": "Place",
"name": eventLocation
}
};
var outputElement = document.getElementById('output');
outputElement.innerText = JSON.stringify(structuredData, null, 2);
});HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event 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">
<h1>Event Structured Data Generator</h1>
<form id="eventForm">
<div class="form-group">
<label for="eventName">Nama Event:</label>
<input type="text" class="form-control" id="eventName" required>
</div>
<div class="form-group">
<label for="eventDate">Tanggal Event:</label>
<input type="date" class="form-control" id="eventDate" required>
</div>
<div class="form-group">
<label for="eventLocation">Lokasi Event:</label>
<input type="text" class="form-control" id="eventLocation" required>
</div>
<button type="submit" class="btn btn-primary">Generate Structured Data</button>
</form>
<div id="output" class="mt-4"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
#output {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
}Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Event Structured Data Generator yang menghasilkan kode output yang bisa langsung disalin oleh pengguna. Aplikasi ini memiliki user interface yang dibangun dengan bantuan Bootstrap untuk tampilan yang lebih menarik.
Pastikan Anda menyertakan file JavaScript dan CSS yang diperlukan, serta menghubungkannya dengan file HTML. Setelah itu, Anda dapat mengisi formulir dengan informasi event yang diinginkan, dan aplikasi akan menghasilkan kode structured data yang sesuai.
Tutorial lainnya:
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Event Structured Data Generator menggunakan JavaScript.
Leave a Reply