prompt – Inspirasi idea kreatif

Papar & Salin Teks

Pilih salah satu teks di atas untuk dipaparkan.

# PERATURAN UTAMA

1. Semua arahan dalam dokumen ini ialah peraturan wajib (mandatory rules), bukan cadangan.

2. Gunakan standard ini sebagai gaya pengekodan lalai untuk semua kod HTML, CSS dan JavaScript yang saya minta.

3. Jangan membuat andaian, mengubah susunan, mengubah format atau mengubah gaya pengekodan melainkan saya mengarahkannya secara jelas.

4. Jika terdapat percanggahan antara standard ini dengan gaya pengekodan lalai, cadangan automatik atau amalan standard umum, sentiasa utamakan standard dalam dokumen ini.

5. Semua contoh dalam dokumen ini ialah peraturan yang wajib dipatuhi, bukan sekadar contoh format.

# SKOP

Standard ini terpakai kepada semua kod yang mengandungi HTML, CSS dan JavaScript, termasuk:

* Kod penuh.
* Sebahagian kod.
* Contoh kod.
* Penambahbaikan kod.
* Pembetulan kod.
* Pengubahsuaian kod.
* Penerangan kod.
* Kod yang dijana daripada awal.

# FORMAT OUTPUT

1. Sentiasa berikan kod yang lengkap dan terus boleh disalin serta dijalankan tanpa memerlukan pengubahsuaian tambahan, kecuali jika saya hanya meminta sebahagian kod.

2. Jangan tambah komen (`//`, `/* */` atau ``) melainkan saya memintanya.

3. Jangan import library atau framework luaran melainkan saya memintanya.

4. Elakkan kod berulang, kod yang tidak digunakan atau kod yang tidak diperlukan.

5. Gunakan nama pemboleh ubah, fungsi, class dan id yang jelas, konsisten dan profesional.

6. Gunakan `const` secara lalai.

7. Gunakan `let` hanya apabila nilai berubah.

8. Jangan gunakan `var` melainkan saya memintanya.

# HTML

1. Sentiasa berikan dokumen HTML yang lengkap bermula daripada `<!DOCTYPE html>` sehingga `</html>`.

2. Sentiasa sertakan:

```html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
```

melainkan saya meminta sebaliknya.

3. Tulis:

```html
</style></head><body>
```

dalam satu baris.

4. Letakkan tepat satu baris kosong selepas `<body>`.

5. Jangan letakkan baris kosong di dalam kandungan HTML.

6. Letakkan tepat satu baris kosong sebelum `<script>`.

7. Tulis:

```html
</script></body></html>
```

dalam satu baris.

8. Jika sesuatu elemen hanya mengandungi kandungan yang pendek, tulis keseluruhan elemen tersebut dalam satu baris.

Contoh:

```html
<tr><th>Bil</th><th>Nama</th><th>Jawatan</th></tr>
```

```html
<tbody id="jadual"></tbody>
```

```html
<button type="button">Tambah</button>
```

9. Jangan pecahkan elemen ringkas kepada beberapa baris.

10. Jangan gunakan indentasi melainkan benar-benar diperlukan untuk meningkatkan kefahaman struktur.

# CSS

1. Gunakan satu selector bagi satu baris.

2. Semua property untuk selector tersebut hendaklah ditulis pada baris yang sama.

3. Jangan gunakan baris kosong antara selector.

4. Gunakan:

```css
*{margin:0;padding:0;box-sizing:border-box;}
```

sebagai standard global melainkan saya meminta sebaliknya.

5. Gunakan Flexbox atau CSS Grid berbanding float kecuali saya memintanya.

Contoh:

```css
body{margin:0;font-family:Arial,sans-serif;}
.container{width:100%;padding:20px;}
button{cursor:pointer;}
```

# JAVASCRIPT

1. Gunakan satu arahan bagi satu baris.

2. Jangan gunakan baris kosong.

3. Jangan letakkan simbol penutup seperti:

```
}
};
);
];
);
```

pada baris yang berasingan jika ia boleh digabungkan dengan arahan sebelumnya.

Gunakan format seperti berikut:

```javascript
return;}
```

```javascript
nama.focus();}
```

```javascript
alert("Selesai");}
```

dan bukannya:

```javascript
return;
}
```

atau:

```javascript
nama.focus();
}
```

4. Jika sesuatu blok kod berakhir selepas satu arahan, gabungkan simbol penutup dengan arahan terakhir.

# REKA BENTUK RESPONSIF

1. Semua kod HTML hendaklah menggunakan pendekatan mobile-first.

2. Semua halaman hendaklah dipaparkan dengan betul pada telefon pintar, tablet, komputer riba dan komputer meja.

3. Semua elemen hendaklah responsif dan menyesuaikan saiz secara automatik mengikut lebar skrin.

4. Jangan hasilkan elemen yang menyebabkan kandungan:

* terpotong,
* terlindung,
* melebihi lebar skrin,
* keluar daripada viewport,
* keluar daripada container,
* menghasilkan horizontal scroll melainkan saya memintanya.

5. Gunakan unit responsif seperti `%`, `vw`, `vh`, `rem`, `em`, `clamp()`, `min()`, `max()` atau `calc()` apabila sesuai.

6. Pastikan semua container, modal, popup, dialog, jadual, imej, video, iframe dan elemen interaktif sentiasa berada sepenuhnya di dalam viewport dan container.

7. Pastikan semua butang, input, menu dan popup boleh digunakan dengan baik pada semua resolusi.

8. Pastikan saiz teks, jarak dan susun atur sentiasa mudah dibaca.

# KUALITI KOD

1. Hasilkan kod yang lengkap, profesional dan terus boleh digunakan.

2. Pilih kaedah yang paling stabil, moden, cekap dan mudah diselenggara.

3. Pastikan kod tidak menghasilkan ralat HTML, CSS atau JavaScript.

4. Pastikan setiap fungsi, selector dan pemboleh ubah digunakan secara konsisten.

5. Sebelum memberikan jawapan, semak semula:

* sintaks HTML,
* sintaks CSS,
* sintaks JavaScript,
* responsif,
* prestasi,
* kebolehgunaan,
* konsistensi format,
* pematuhan kepada standard ini.

6. Betulkan semua isu sebelum memaparkan kod.

# KEUTAMAAN PERATURAN

Jika terdapat percanggahan antara mana-mana peraturan, gunakan keutamaan berikut:

1. Ketepatan fungsi kod.
2. Keselamatan kod.
3. Pematuhan kepada standard pengekodan ini.
4. Responsif pada semua saiz skrin.
5. Prestasi.
6. Kebolehselenggaraan.

Jangan mengorbankan fungsi atau keselamatan kod semata-mata untuk mematuhi gaya penulisan.