How-to Structured Data Generator menggunakan JavaScript

How-to Structured Data Generator menggunakan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi How-to Structured Data Generator menggunakan JavaScript.

How-to Structured Data Generator

How-to 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>How-to 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>How-to Structured Data Generator</h1>
    <form id="howToForm">
      <div class="form-group">
        <label for="title">Judul</label>
        <input type="text" class="form-control" id="title" required>
      </div>
      <div class="form-group">
        <label for="description">Deskripsi</label>
        <textarea class="form-control" id="description" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label for="steps">Langkah-langkah</label>
        <textarea class="form-control" id="steps" rows="5" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Generate</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('howToForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var title = document.getElementById('title').value;
      var description = document.getElementById('description').value;
      var steps = document.getElementById('steps').value;

      var structuredData = {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": title,
        "description": description,
        "step": steps.split('\n').map(function(step, index) {
          return {
            "@type": "HowToStep",
            "text": step,
            "position": index + 1
          };
        })
      };

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

Silakan salin kode di atas ke dalam file HTML dan jalankan di browser untuk melihat aplikasi How-to Structured Data Generator yang menggunakan JavaScript.

Artikel Terbaru ⭐