Membuat Quote Bergaya Code Menggunakan HTML, CSS, dan JavaScript

Membuat Quote Bergaya Code Menggunakan HTML, CSS, dan JavaScript

Dalam dunia pemrograman, kreativitas tidak hanya terbatas pada menulis logika aplikasi, tetapi juga dapat digunakan untuk membuat elemen visual yang unik dan inspiratif. Salah satunya adalah quote generator bergaya kode pemrograman yang dapat memotivasi developer sekaligus menambah estetika halaman web.

Artikel ini akan membahas bagaimana kode HTML, CSS, dan JavaScript digunakan untuk membuat code-style quote generator yang tetap terlihat jelas di berbagai latar belakang (background) berkat desain kontainer yang kontras dan responsif.

1. Struktur Dasar HTML

Kode HTML membentuk kerangka utama dari aplikasi, terdiri dari:

• Kontainer Card – area utama yang menampilkan kutipan dalam format kode.
• Tombol Kontrol – untuk copy, tweet, dan memuat quote baru.
• Preview Area – menunjukkan tampilan latar belakang sebagai referensi desain.

Struktur ini dibuat menggunakan elemen <div> dengan kelas .wrap, .card, dan .preview agar mudah diatur dengan CSS.

2. Desain Visual dengan CSS

Desain dibuat agar teks kode tetap terlihat jelas di atas berbagai jenis latar belakang. Beberapa teknik yang digunakan:

• Glassmorphism – dengan rgba(255,255,255,0.02) dan efek blur ringan, membuat efek kaca transparan yang modern.
• Warna Sintaks – setiap bagian kode (keyword, function, komentar, dll.) diberi warna berbeda menggunakan CSS variables untuk menyerupai syntax highlighting seperti di editor kode.
• Responsif – menggunakan media query agar tata letak tetap rapi di perangkat mobile.

Contoh deklarasi warna sintaks:

.code .kw { color: var(--keyword); }
.code .func { color: var(--func); }
.code .comment { color: var(--comment); font-style: italic; }

3. Logika Aplikasi dengan JavaScript

Bagian JavaScript bertugas menampilkan quote secara acak dan memberikan interaktivitas pada tombol.

• Array codeQuotes – berisi kumpulan kutipan yang dipecah menjadi bagian logika kode seperti conditionLeft, comparator, conditionRight, action, comment, dan hashtag.
• Fungsi renderCode() – menggabungkan bagian-bagian quote menjadi teks kode dengan efek syntax highlighting.
• Fitur Copy dan Tweet – memudahkan pengguna membagikan kutipan langsung ke media sosial atau menyalinnya ke clipboard.

Contoh array quote:

const codeQuotes = [
  {
    conditionLeft: "value",
    comparator: "<",
    conditionRight: "timeGiven",
    action: "goodbye()",
    comment: "If they value you less than your time, say goodbye.",
    hashtag: "#KeepCoding :)"
  },
  ...
];

4. Keunggulan Fitur

• Interaktif: Tombol New Quote menampilkan kutipan baru secara acak.
• Mudah Dibagikan: Dengan sekali klik, pengguna bisa menyalin atau membagikan ke Twitter.
• Desain Tetap Jelas: Warna teks dan latar belakang transparan memastikan keterbacaan di semua jenis background.
• Responsif: Cocok untuk tampilan desktop maupun mobile.

5. Potensi Penggunaan

• Portfolio Developer – menambah sentuhan kreatif pada halaman profil.
• Aplikasi Motivasi – digunakan sebagai elemen widget di blog teknologi.
• Konten Media Sosial – membagikan quote dalam format yang unik dan “nge-tech”.

Kesimpulan

Kode ini menunjukkan bagaimana perpaduan HTML, CSS, dan JavaScript dapat menghasilkan pengalaman visual yang menarik sekaligus fungsional. Dengan memanfaatkan syntax highlighting dan glassmorphism, quote bergaya kode tetap mudah dibaca di berbagai latar belakang.

Bagi developer yang ingin memperindah halaman web atau membuat konten motivasi bergaya techy, pendekatan ini sangat layak dicoba.

Contoh halaman quote seperti ini Quote Generator Bergaya Code