Aplikasi Job Posting Structured Data Generator dengan JavaScript

Aplikasi Job Posting Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh Aplikasi Job Posting Structured Data Generator. Aplikasi ini akan menghasilkan kode output yang dapat langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik dan responsif.

Job Posting Structured Data Generator

Job Posting Structured Data Generator


JavaScript

JavaScript
// Kode JavaScript untuk aplikasi Job Posting Structured Data Generator

// Fungsi untuk menghasilkan kode output
function generateStructuredData() {
  // Kode untuk mengambil input dari pengguna dan menghasilkan kode output
  var jobTitle = document.getElementById('jobTitle').value;
  var jobDescription = document.getElementById('jobDescription').value;
  var jobLocation = document.getElementById('jobLocation').value;

  var structuredData = {
    "@context": "https://schema.org",
    "@type": "JobPosting",
    "title": jobTitle,
    "description": jobDescription,
    "jobLocation": {
      "@type": "Place",
      "address": {
        "@type": "PostalAddress",
        "addressLocality": jobLocation
      }
    }
  };

  var outputCode = JSON.stringify(structuredData, null, 2);

  // Menampilkan kode output ke pengguna
  document.getElementById('outputCode').value = outputCode;
}

// Event listener untuk tombol generate
document.getElementById('generateButton').addEventListener('click', generateStructuredData);
JavaScript

Berikut ini adalah contoh kode HTML untuk user interface aplikasi menggunakan Bootstrap.

HTML

HTML
<!-- Kode HTML untuk user interface aplikasi Job Posting Structured Data Generator -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Posting 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>Job Posting Structured Data Generator</h1>

    <div class="form-group">
      <label for="jobTitle">Job Title:</label>
      <input type="text" class="form-control" id="jobTitle">
    </div>

    <div class="form-group">
      <label for="jobDescription">Job Description:</label>
      <textarea class="form-control" id="jobDescription" rows="5"></textarea>
    </div>

    <div class="form-group">
      <label for="jobLocation">Job Location:</label>
      <input type="text" class="form-control" id="jobLocation">
    </div>

    <button id="generateButton" class="btn btn-primary">Generate</button>

    <div class="form-group mt-4">
      <label for="outputCode">Output Code:</label>
      <textarea class="form-control" id="outputCode" rows="10" readonly></textarea>
    </div>
  </div>

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

</html>
HTML

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Job Posting Structured Data Generator yang dapat menghasilkan kode output yang siap digunakan. Pengguna dapat mengisi informasi pekerjaan seperti judul pekerjaan, deskripsi pekerjaan, dan lokasi pekerjaan, kemudian mengklik tombol “Generate” untuk menghasilkan kode output yang sesuai dengan struktur data terstruktur yang diperlukan.

Pastikan Anda telah menyertakan file JavaScript dengan nama “script.js” yang berisi kode JavaScript di atas dalam direktori yang sama dengan file HTML.

Dengan menggunakan Bootstrap, tampilan aplikasi akan menjadi lebih menarik dan responsif, sehingga pengguna dapat dengan mudah mengisi informasi pekerjaan dan melihat kode output yang dihasilkan.

Selamat mencoba!

Artikel Terbaru ⭐