Membuat Aplikasi Breadcrumb Structured Data Generator dengan JavaScript

Breadcrumb Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Breadcrumb Structured Data Generator dengan menggunakan JavaScript. Aplikasi ini akan menghasilkan kode output yang bisa langsung disalin oleh pengguna. Kami juga akan menggunakan user interface yang dibangun dengan menggunakan Bootstrap untuk tampilan yang lebih menarik.

Breadcrumb Structured Data Generator

Breadcrumb Structured Data Generator



JavaScript

JavaScript
// Mendapatkan elemen input dari pengguna
const breadcrumbInput = document.getElementById('breadcrumb-input');

// Mendapatkan elemen output
const breadcrumbOutput = document.getElementById('breadcrumb-output');

// Fungsi untuk menghasilkan kode structured data
function generateStructuredData() {
  const breadcrumbValue = breadcrumbInput.value;

  // Membuat objek structured data
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": []
  };

  // Memisahkan nilai input menjadi array
  const breadcrumbItems = breadcrumbValue.split(',');

  // Menambahkan setiap elemen breadcrumb ke structured data
  breadcrumbItems.forEach((item, index) => {
    structuredData.itemListElement.push({
      "@type": "ListItem",
      "position": index + 1,
      "name": item.trim(),
      "item": window.location.href
    });
  });

  // Mengubah structured data menjadi JSON
  const structuredDataJson = JSON.stringify(structuredData, null, 2);

  // Menampilkan kode output
  breadcrumbOutput.textContent = structuredDataJson;
}

// Event listener untuk tombol generate
document.getElementById('generate-button').addEventListener('click', generateStructuredData);
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>Breadcrumb 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">
    <h1>Breadcrumb Structured Data Generator</h1>
    <div class="form-group">
      <label for="breadcrumb-input">Breadcrumb:</label>
      <input type="text" class="form-control" id="breadcrumb-input" placeholder="Enter breadcrumb items">
    </div>
    <button type="button" class="btn btn-primary" id="generate-button">Generate</button>
    <div class="mt-3">
      <label for="breadcrumb-output">Structured Data Output:</label>
      <textarea class="form-control" id="breadcrumb-output" rows="5" readonly></textarea>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
HTML

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Breadcrumb Structured Data Generator yang menghasilkan kode output yang bisa langsung disalin oleh pengguna. Aplikasi ini juga dilengkapi dengan user interface yang dibangun menggunakan Bootstrap untuk tampilan yang lebih menarik.

Pastikan Anda menyertakan file JavaScript dan CSS yang diperlukan, serta menghubungkannya dengan file HTML Anda. Anda juga dapat menyesuaikan tampilan aplikasi dengan menambahkan gaya kustom di dalam file CSS.

Baca juga:

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Breadcrumb Structured Data Generator menggunakan JavaScript.

Artikel Terbaru ⭐