Membuat Aplikasi Recipe Structured Data Generator dengan JavaScript

Membuat Aplikasi Recipe Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

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

Recipe Structured Data Generator

Recipe 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>Recipe 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>Recipe Structured Data Generator</h1>
    <form id="recipeForm">
      <div class="form-group">
        <label for="recipeName">Nama Resep</label>
        <input type="text" class="form-control" id="recipeName" required>
      </div>
      <div class="form-group">
        <label for="recipeDescription">Deskripsi Resep</label>
        <textarea class="form-control" id="recipeDescription" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label for="recipeIngredients">Bahan-bahan</label>
        <textarea class="form-control" id="recipeIngredients" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label for="recipeInstructions">Instruksi</label>
        <textarea class="form-control" id="recipeInstructions" rows="3" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Generate Structured Data</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('recipeForm').addEventListener('submit', function(event) {
      event.preventDefault();

      var recipeName = document.getElementById('recipeName').value;
      var recipeDescription = document.getElementById('recipeDescription').value;
      var recipeIngredients = document.getElementById('recipeIngredients').value;
      var recipeInstructions = document.getElementById('recipeInstructions').value;

      var structuredData = {
        "@context": "https://schema.org/",
        "@type": "Recipe",
        "name": recipeName,
        "description": recipeDescription,
        "recipeIngredient": recipeIngredients.split('\n'),
        "recipeInstructions": recipeInstructions.split('\n')
      };

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

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Recipe Structured Data Generator yang menghasilkan kode output yang dapat langsung disalin oleh pengguna. Aplikasi ini menggunakan JavaScript untuk mengambil input dari pengguna dan menghasilkan structured data dalam format JSON. User interface-nya menggunakan Bootstrap untuk tampilan yang lebih menarik.

Anda dapat menyalin kode di atas ke dalam file HTML dan membukanya di browser untuk melihat aplikasinya. Setelah mengisi formulir dengan informasi resep, klik tombol “Generate Structured Data” untuk menghasilkan kode output yang sesuai dengan input yang diberikan.

Tutorial lainnya:

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Recipe Structured Data Generator menggunakan JavaScript dan Bootstrap. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

Artikel Terbaru ⭐