Membuat Aplikasi Event Structured Data Generator dengan JavaScript

Event Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

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

Event Structured Data Generator



JavaScript
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);
});
JavaScript

HTML

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>
HTML

CSS

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;
}
CSS

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.

Artikel Terbaru ⭐