├── index.html
├── style.css
├── README.md
└── script.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Check khodam online
8 |
9 |
10 |
11 |
12 |
13 |
Check Khodam online
14 |
18 |
19 |
21 | copyright 2024 | N T A
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* styles.css */
2 |
3 | body {
4 | font-family: Arial, sans-serif;
5 | background-color: #f4f4f4;
6 | margin: 0;
7 | padding: 0;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | background-color: #fff;
17 | padding: 20px;
18 | border-radius: 8px;
19 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
20 | text-align: center;
21 | width: 100%;
22 | max-width: 400px;
23 | }
24 |
25 | h1 {
26 | font-size: 24px;
27 | margin-bottom: 20px;
28 | }
29 |
30 | form {
31 | display: flex;
32 | flex-direction: column;
33 | align-items: center;
34 | }
35 |
36 | input[type="text"] {
37 | width: 100%;
38 | padding: 10px;
39 | margin-bottom: 10px;
40 | border: 1px solid #ccc;
41 | border-radius: 4px;
42 | font-size: 16px;
43 | }
44 |
45 | button {
46 | padding: 10px 20px;
47 | border: none;
48 | border-radius: 4px;
49 | background-color: #007bff;
50 | color: white;
51 | font-size: 16px;
52 | cursor: pointer;
53 | }
54 |
55 | button:hover {
56 | background-color: #0056b3;
57 | }
58 |
59 | .result {
60 | margin-top: 20px;
61 | font-size: 18px;
62 | }
63 |
64 | .copyright {
65 | margin-top: 20px;
66 | font-size: 14px;
67 | color: #777;
68 | text-align: center;
69 | }
70 |
71 | @media (max-width: 400px) {
72 | .container {
73 | width: 90%;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # DEMO ↓
4 | __________
5 | ### https://ananta-ti.github.io/cek-khodam/
6 | __________
7 |
8 | # 🔮 Check Khodam Online
9 |
10 | Aplikasi web sederhana untuk mengecek "khodam" secara online berdasarkan nama yang dimasukkan oleh pengguna. Dibuat untuk hiburan semata, dengan hasil acak dan penuh kejutan.
11 |
12 | ## 🧙♂️ Fitur
13 |
14 | - Input nama pengguna.
15 | - Menampilkan khodam acak dari daftar yang unik dan lucu.
16 | - Tampilan sederhana dan responsif.
17 | - Reset otomatis setelah 5 detik.
18 |
19 | ## 📁 Struktur Proyek
20 |
21 | check-khodam-online/
22 |
23 | - ├── index.html
24 | - ├── style.css
25 | - ├──script.js
26 | - └── README.md
27 |
28 | ## 🚀 Cara Menjalankan
29 |
30 | 1. **Clone repository ini** atau salin semua file ke direktori lokal.
31 | 2. **Buka `index.html` di browser** favoritmu.
32 | 3. Masukkan nama dan klik tombol **"cek khodam"**.
33 | 4. Lihat hasil khodam unikmu selama 5 detik!
34 |
35 | ## 🔧 Teknologi yang Digunakan
36 |
37 | - HTML5
38 | - CSS3
39 | - Vanilla JavaScript
40 |
41 | ## 📝 Contoh
42 |
43 | Input Nama: Ananta Hasil: khodam Ananta adalah pocong salto.
44 |
45 | ## ⚠️ Disclaimer
46 |
47 | Proyek ini dibuat untuk **hiburan** semata dan tidak memiliki dasar spiritual, magis, atau ilmiah. Semua hasil sepenuhnya **acak** dan tidak mencerminkan kenyataan.
48 |
49 | ## 📜 Lisensi
50 |
51 | MIT License.
52 |
53 | ## 👤 Author
54 |
55 | Made with 💀 by **N T A**
56 |
57 |
58 | ---
59 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const khodamlist = [
2 | "macan putih",
3 | "macan lapar",
4 | "macan tidur",
5 | "kuda putih",
6 | "kuda laut",
7 | "tuyul mulet",
8 | "kulkas",
9 | "titid terbang",
10 | "genderuwo",
11 | "pocong salto",
12 | "kuyang",
13 | "plastik",
14 | "gajah terbang",
15 | "kuda pony",
16 | "le mineral",
17 | "topi koki",
18 | "wortel",
19 | "daging kurban",
20 | "kuntilanak",
21 | "sundel bolong",
22 | "banaspati",
23 | "kwetiaw",
24 | "ayam kampung",
25 | "ayam potong",
26 | "ayam kampus",
27 | "kompor gas",
28 | "kucing",
29 | "firaun",
30 | "ular",
31 | "dinosaurus",
32 | "platipus",
33 | "bebek nungging",
34 | "lebah ganteng",
35 | "pein akatsuki",
36 | "tidak ada",
37 | "naga terbang",
38 | "jenglot",
39 | "harimau kumbang",
40 | "elang laut",
41 | "kucing oren",
42 | "pocong lompat-lompat",
43 | "suster ngesot",
44 | "cecak ninja",
45 | "babi ngepet",
46 | "cacing tanah raksasa",
47 | "ular naga",
48 | "burung hantu",
49 | "orang minyak",
50 | "buto ijo",
51 | "wong gede",
52 | "ikan duyung",
53 | "kura-kura ninja",
54 | "hiu darat",
55 | "tuyul joget",
56 | "ninja hatori",
57 | "ular terbang",
58 | "anjing kampung",
59 | "semut merah",
60 | "belalang tempur",
61 | "gorila ngamuk",
62 | "manusia karet",
63 | "gundala petir",
64 | "badak bercula tiga",
65 | "burung cendrawasih",
66 | "katak ninja",
67 | "manusia api",
68 | "raja jin",
69 | "monyet sakti",
70 | "harimau sirkus",
71 | "tengkorak hidup",
72 | "robot penghancur",
73 | "alien berkepala dua",
74 | "kucing meong",
75 | "panda bersayap",
76 | "zombie dancer",
77 | "semar mesem",
78 | "garuda putih",
79 | "macan hijau",
80 | "macan emas",
81 | "naga hitam",
82 | "serigala malam",
83 | "beruang kutub",
84 | "kerbau putih",
85 | "ikan paus kecil",
86 | "lele sakti",
87 | "laba-laba raksasa",
88 | "capung emas",
89 | "penunggu pohon beringin",
90 | "srigala api",
91 | "kera putih",
92 | "lumba-lumba sakti",
93 | "jaka sembung",
94 | "bidadari laut",
95 | "ratu pantai selatan",
96 | "nyai ronggeng",
97 | "jaka tarub",
98 | "manusia serigala",
99 | "ikan mas sakti",
100 | "kebo bule",
101 | "lele jumbo",
102 | "pinguin ninja",
103 | "kucing ungu",
104 | ];
105 |
106 | function pilihkhodam(event) {
107 | event.preventDefault();
108 | const nama = document.getElementById("nama").value;
109 | const resultDiv = document.getElementById("result");
110 | resultDiv.textContent = "";
111 | if (nama) {
112 | const randomIndex = Math.floor(Math.random() * khodamlist.length);
113 | const khodamTerpilih = khodamlist[randomIndex];
114 | resultDiv.textContent = `khodam ${nama} adalah ${khodamTerpilih}.`;
115 |
116 | setTimeout(() => {
117 | resultDiv.textContent = "";
118 | }, 5000);
119 | } else {
120 | resultDiv.textContent = "nama tidak boleh kosong.";
121 | }
122 | }
123 | document.getElementById("khodamForm").addEventListener("submit", pilihkhodam);
124 |
--------------------------------------------------------------------------------