Membuat Aplikasi Article Structured Data Generator dengan JavaScript

Article Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

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

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;
}
JavaScript
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;
}
CSS
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>
HTML
Artikel Terbaru ⭐