Mari kita latihan membuat algoritma sebelumnya, Bu Mawar akan acak tugasnya.
hmm... caranya? ok, kita buat game-nya.
Game ini akan mengacak tugas TIK secara random.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acak Tugas TIK</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f4f4f9;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
#hasil-acak {
font-size: 2em;
font-weight: bold;
color: #007bff; /* Warna biru */
min-height: 50px;
margin: 20px 0;
padding: 10px;
border: 2px dashed #007bff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 10px 20px;
font-size: 1.1em;
background-color: #28a745; /* Warna hijau */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #218838;
}
.daftar-tugas {
margin-top: 20px;
text-align: left;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>📃Acak Tugas TIK</h1>
<p>Klik tombol di bawah untuk mengacak tugas yang harus dikerjakan.</p>
<button onclick="acakTugas()">Acak Tugas Sekarang!</button>
<div id="hasil-acak">
Klik Acak
</div>
<div class="daftar-tugas">
<strong>Daftar Tugas yang Tersedia:</strong>
<ul id="list-tugas">
</ul>
</div>
</div>
<script>
// ** Daftar tugas yang bisa Anda ubah/sesuaikan **
const tugasList = [
"menyalakan kipas angin",
"menyiapkan sarapan pagi",
"menyetrika seragam sekolah",
"mengisi ulang air galon",
"menata tempat tidur setelah bangun",
"merawat tanaman pagi hari",
"mencuci baju",
"mengepel lantai",
"piket membersihkan kelas",
"memelihara ikan",
"mencuci piring",
"belanja online",
"membuat jus buah",
"memasang oksigen",
"menggunakan tandu",
"Mandi",
"menyikat kamar mandi",
"meminjam buku di perpustakaan",
"menghidupkan komputer di lab",
"membuat minuman chocolatos",
"membuat pancake",
"mengambil uang di loket uang saku",
"memasak pisang goreng",
"berwudhu sebelum shalat",
"bermain bola gebok",
"Jajan di kantin",
"Jajan di IT-Mart",
"Memelihara kucing",
"membuat seblak",
"menanam cabe"
];
// Fungsi untuk menampilkan daftar tugas
function tampilkanDaftarTugas() {
const ul = document.getElementById('list-tugas');
tugasList.forEach((tugas, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. ${tugas}`;
ul.appendChild(li);
});
}
// Fungsi untuk mengacak tugas
function acakTugas() {
// Mendapatkan angka acak antara 0 dan (jumlah tugas - 1)
const indeksAcak = Math.floor(Math.random() * tugasList.length);
// Mendapatkan tugas terpilih
const tugasTerpilih = tugasList[indeksAcak];
// Menampilkan hasilnya di halaman
document.getElementById('hasil-acak').textContent = tugasTerpilih;
}
// Panggil fungsi ini saat halaman dimuat
tampilkanDaftarTugas();
</script>
</body>
</html>
Penjelasannya :
Fungsi tampilkanDaftarTugas()
Tujuan: menampilkan semua tugas yang ada dalam daftar (tugasList) ke halaman web.
Langkah kerjanya:
-
const ul = document.getElementById('list-tugas');
→ Mengambil elemen <ul> dari HTML yang memiliki id="list-tugas".
-
tugasList.forEach(...)
→ Melakukan perulangan untuk setiap item dalam array tugasList.
-
const li = document.createElement('li');
→ Membuat elemen <li> baru untuk tiap tugas.
-
li.textContent = ...
→ Mengisi teks di dalam <li> dengan nomor urut dan nama tugas.
-
ul.appendChild(li);
→ Menambahkan elemen <li> ke dalam <ul> di halaman.
Fungsi acakTugas()
Tujuan: memilih satu tugas secara acak dari daftar.
Langkah kerjanya:
-
Math.random() → menghasilkan angka acak antara 0 dan 1.
-
Dikalikan dengan tugasList.length agar sesuai jumlah tugas.
-
Math.floor(...) → membulatkan ke bawah untuk mendapat indeks array.
-
Mengambil tugas berdasarkan indeks acak itu.
-
Menampilkan nama tugas acak ke elemen HTML dengan id="hasil-acak".
Tidak ada komentar:
Posting Komentar