Membuat Random Quote Generator dengan API Kutipan Inspiratif

Dipublikasikan: Juli 2026

Random quote generator adalah web app sederhana yang banyak dicari untuk inspirasi harian. Tutorial ini menggunakan API kutipan untuk menampilkan quotes inspiratif secara acak.

Fitur

Kutipan acak dari berbagai tokoh
Tombol untuk quote baru
Tombol copy dan tweet
Animasi transisi yang halus

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote Generator</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Georgia',serif; background:linear-gradient(135deg,#2d3436,#636e72); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:#fff; border-radius:20px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:600px; text-align:center; }
    .icon { font-size:48px; margin-bottom:10px; }
    h1 { color:#2d3436; font-size:24px; margin-bottom:20px; font-family:'Segoe UI',Arial,sans-serif; }
    .quote-text { font-size:24px; color:#2d3436; line-height:1.6; min-height:120px; display:flex; align-items:center; justify-content:center; transition:opacity 0.5s; }
    .quote-author { font-size:16px; color:#636e72; margin-top:15px; font-style:italic; }
    .quote-author::before { content:'â€” '; }
    .actions { display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
    .btn { padding:12px 28px; border:none; border-radius:10px; cursor:pointer; font-size:15px; font-family:'Segoe UI',Arial,sans-serif; }
    .btn-primary { background:#6c5ce7; color:#fff; }
    .btn-primary:hover { background:#5b4bd6; }
    .btn-outline { background:transparent; border:2px solid #dfe6e9; color:#636e72; }
    .btn-outline:hover { background:#f8f9fa; }
    .loading { color:#b2bec3; margin-top:15px; display:none; }
  </style>
</head>
<body>
  <div class="container">
    <div class="icon">ðŸ’¬</div>
    <h1>Random Quote Generator</h1>
    <div class="quote-text" id="quoteText">Klik tombol untuk mendapat inspirasi</div>
    <div class="quote-author" id="quoteAuthor"></div>
    <div class="loading" id="loading">Memuat kutipan...</div>
    <div class="actions">
      <button class="btn btn-primary" onclick="getQuote()">âœ¨ Quote Baru</button>
      <button class="btn btn-outline" onclick="copyQuote()">ðŸ“‹ Copy</button>
    </div>
  </div>
  <script>
    const quotes = [
      { q: 'Hidup bukanlah tentang menemukan dirimu sendiri. Hidup adalah tentang menciptakan dirimu sendiri.', a: 'George Bernard Shaw' },
      { q: 'Satu-satunya cara untuk melakukan pekerjaan hebat adalah dengan mencintai apa yang kamu lakukan.', a: 'Steve Jobs' },
      { q: 'Jangan menunggu waktu yang tepat, buatlah waktu yang tepat menjadi sekarang.', a: 'Napoleon Hill' },
      { q: 'Kesuksesan bukanlah akhir, kegagalan bukanlah sesuatu yang fatal. Yang penting adalah keberanian untuk melanjutkan.', a: 'Winston Churchill' },
      { q: 'Percayalah bahwa kamu bisa dan kamu sudah setengah jalan menuju sukses.', a: 'Theodore Roosevelt' },
      { q: 'Masa depan adalah milik mereka yang percaya pada keindahan mimpi-mimpi mereka.', a: 'Eleanor Roosevelt' },
      { q: 'Jangan biarkan apa yang tidak bisa kamu lakukan mengganggu apa yang bisa kamu lakukan.', a: 'John Wooden' },
      { q: 'Satu-satunya batasan untuk pencapaian kita besok adalah keraguan kita hari ini.', a: 'Franklin D. Roosevelt' },
      { q: 'Belajar dari kemarin, hidup untuk hari ini, berharap untuk besok.', a: 'Albert Einstein' },
      { q: 'Kebahagiaan bukanlah sesuatu yang sudah jadi. Itu berasal dari tindakanmu sendiri.', a: 'Dalai Lama' },
      { q: 'Orang sukses adalah mereka yang mau melakukan hal-hal yang tidak ingin dilakukan orang lain.', a: 'John C. Maxwell' },
      { q: 'Bermimpilah seolah kau akan hidup selamanya. Hiduplah seolah kau akan mati hari ini.', a: 'James Dean' }
    ];
    function getQuote() {
      document.getElementById('loading').style.display = 'block';
      document.getElementById('quoteText').style.opacity = '0';
      setTimeout(() => {
        const q = quotes[Math.floor(Math.random() * quotes.length)];
        document.getElementById('quoteText').textContent = '"' + q.q + '"';
        document.getElementById('quoteAuthor').textContent = q.a;
        document.getElementById('quoteText').style.opacity = '1';
        document.getElementById('loading').style.display = 'none';
      }, 300);
    }
    function copyQuote() {
      const text = document.getElementById('quoteText').textContent;
      const author = document.getElementById('quoteAuthor').textContent;
      navigator.clipboard.writeText(text + ' ' + author);
      alert('Kutipan disalin!');
    }
    getQuote();
  </script>
</body>
</html>