Aplikasi Organization Structured Data Generator dengan JavaScript

Aplikasi Organization Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh Aplikasi Organization Structured Data Generator dengan JavaScript dan menggunakan Bootstrap sebagai user interface. Kode ini akan menghasilkan output yang bisa langsung disalin oleh pengguna.

Organization Structured Data Generator

Organization Structured Data Generator


HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Organization 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>Organization Structured Data Generator</h1>
    <form id="orgForm">
      <div class="form-group">
        <label for="orgName">Nama Organisasi:</label>
        <input type="text" class="form-control" id="orgName" required>
      </div>
      <div class="form-group">
        <label for="orgDescription">Deskripsi Organisasi:</label>
        <textarea class="form-control" id="orgDescription" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label for="orgUrl">URL Organisasi:</label>
        <input type="url" class="form-control" id="orgUrl" required>
      </div>
      <button type="submit" class="btn btn-primary">Generate Structured Data</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('orgForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var orgName = document.getElementById('orgName').value;
      var orgDescription = document.getElementById('orgDescription').value;
      var orgUrl = document.getElementById('orgUrl').value;

      var structuredData = {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": orgName,
        "description": orgDescription,
        "url": orgUrl
      };

      var outputElement = document.getElementById('output');
      outputElement.innerText = JSON.stringify(structuredData, null, 2);
    });
  </script>
</body>
</html>
HTML

Silakan salin kode di atas dan simpan dalam file HTML. Kemudian buka file tersebut menggunakan browser untuk melihat tampilan aplikasi Organization Structured Data Generator. Pengguna dapat mengisi formulir dengan informasi organisasi yang diinginkan, dan setelah mengklik tombol “Generate Structured Data”, output akan ditampilkan di bawah formulir.

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi yang memungkinkan pengguna untuk menghasilkan structured data untuk organisasi mereka dengan mudah.

Artikel Terbaru ⭐