Portal Belajar Coding SMP

Pilih Misi Coding-mu!

Dunia digital menunggumu. Ketik sendiri kodemu, pecahkan rahasianya, dan jadilah pencipta teknologi!

LEVEL MASTER 🔥

👛

Dompet Pelajar

Kompleks

Buat sistem bank pribadimu! Komputer akan menghitung sisa saldomu secara otomatis.

📝

Daftar Tugas

Berguna

Ciptakan aplikasi pengingat PR harian. Tugas selesai bisa dilenyapkan dengan sekali klik!

⚖️

Kalkulator BMI

IPA & MTK

Gabungkan ilmu IPA dan Matematika ke dalam coding untuk mengecek berat badan ideal!

⏰

Jam Neon

Pemula

Sadap data waktu dari komputermu dan tampilkan dengan efek cahaya neon super keren.

🍎

Tangkap Buah

Animasi JS

Bangun game pertamamu! Geser keranjang pakai mouse untuk menangkap apel dari langit.

🔮

Tebak Angka

Logika AI

Latih logikamu! Komputer memikirkan sebuah angka rahasia, mampukah kamu menebaknya?

👛 Misi: Dompet Pelajar

PERINGATAN: Buka file index.html dan ketik kode di bawah ini. Jangan copas!

Level 1: Brankas Besi (HTML)

Kita buat wujud fisik brankasnya. Ada layar saldo dan tombol simpan.

<!DOCTYPE html>
<html>
<head>
    <title>Dompet Pelajar</title>
</head>
<body>
    <h1>👛 Dompet Pelajarku</h1>
    <h2 id="teksSaldo">Sisa Saldo: Rp 0</h2>
    
    <div class="kotak-input">
        <input type="text" id="namaTrx" placeholder="Beli cilok...">
        <input type="number" id="jumlahTrx" placeholder="Jumlah Rp">
        <select id="jenisTrx">
            <option value="masuk">Pemasukan</option>
            <option value="keluar">Pengeluaran</option>
        </select>
        <button onclick="tambahCatatan()">Simpan</button>
    </div>

    <h3>Riwayat Uangmu:</h3>
    <ul id="daftarRiwayat"></ul>
</body>
</html>

🤔

Masih Berantakan?

Tampilannya putih polos! Di Level 2, kita akan menyiram brankas ini dengan cat ajaib CSS.

Level 2: Cat Desainer (CSS)

Ketik mantra <style> ini di dalam <head>.

<style>
    body { font-family: Arial; text-align: center; background: #fce4ec; padding: 20px; }
    
    #teksSaldo { background: #e91e63; color: white; padding: 20px; border-radius: 15px; font-size: 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    
    .kotak-input { background: white; padding: 20px; border-radius: 15px; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    
    input, select { padding: 8px; margin: 5px; border-radius: 5px; border: 1px solid #ccc; }
    
    button { padding: 10px 20px; background: #e91e63; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
    
    ul { list-style-type: none; padding: 0; max-width: 400px; margin: 20px auto; }
    li { background: white; padding: 15px; margin-bottom: 10px; border-radius: 8px; display: flex; justify-content: space-between; font-weight: bold; border-left: 5px solid gray; }
</style>

Level 3: Ingatan Super (Array)

Ketik kode ini sebelum tag </body>.

<script>
    let semuaData = []; 

    function tambahCatatan() {
        let nama = document.getElementById("namaTrx").value;
        let jumlah = Number(document.getElementById("jumlahTrx").value);
        let jenis = document.getElementById("jenisTrx").value;

        if(nama !== "" && jumlah > 0) {
            semuaData.push({
                keterangan: nama,
                uang: jumlah,
                tipe: jenis
            });

            document.getElementById("namaTrx").value = "";
            document.getElementById("jumlahTrx").value = "";
            
            prosesTampilan(); 
        } else {
            alert("Isi nama dan jumlah uang!");
        }
    }
</script>

Level 4: Mesin Penggambar (Tamat)

Sambungkan fungsi ini di bawah fungsi tambahCatatan() tadi.

    function prosesTampilan() {
        let wadahDaftar = document.getElementById("daftarRiwayat");
        let teksSaldo = document.getElementById("teksSaldo");
        
        wadahDaftar.innerHTML = ""; 
        let totalSaldo = 0;

        for(let i = 0; i < semuaData.length; i++) {
            let d = semuaData[i];
            
            if(d.tipe === "masuk") {
                totalSaldo += d.uang;
            } else {
                totalSaldo -= d.uang;
            }

            let kartu = document.createElement("li");
            kartu.innerText = d.keterangan + " (Rp " + d.uang + ")";
            
            if(d.tipe === "masuk") {
                kartu.style.borderLeftColor = "green"; kartu.style.color = "green";
            } else {
                kartu.style.borderLeftColor = "red"; kartu.style.color = "red";
            }
            wadahDaftar.appendChild(kartu);
        }
        teksSaldo.innerText = "Sisa Saldo: Rp " + totalSaldo;
    }

👾 TANTANGAN HACKER

Beranikah kamu memodifikasi kode tadi dengan misi ini?

🔥 Peringatan Minus

Jika totalSaldo < 0, ubah warna latar teksSaldo jadi merah gelap.

💣 Reset Dompet

Buat tombol HTML baru. Di JS, buat fungsi semuaData = []; prosesTampilan();

Level 1

📝 Misi: Daftar Tugas

Level 1: Siapkan HTML

<!DOCTYPE html>
<html>
<body>
    <h1>📝 Daftar Tugas</h1>
    <input type="text" id="inputTugas" placeholder="Ketik tugasmu...">
    <button onclick="tambahTugas()">+ Tambah</button>
    <ul id="daftarTugas"></ul>
</body>
</html>

Level 2: CSS Estetika

<style>
    body { font-family: Arial; text-align: center; background: #fdf6e3; padding: 30px; }
    input { padding: 10px; width: 70%; border-radius: 5px; border: 1px solid #ccc; }
    button { padding: 10px; background: orange; font-weight: bold; border: none; cursor: pointer; }
    li { background: white; padding: 15px; margin: 10px auto; width: 80%; list-style-type: none; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; }
</style>

Level 3: Robot JS

<script>
    function tambahTugas() {
        let kotakInput = document.getElementById("inputTugas");
        let wadahDaftar = document.getElementById("daftarTugas");
        
        if (kotakInput.value !== "") {
            let tugasBaru = document.createElement("li");
            tugasBaru.innerText = "👉 " + kotakInput.value;
            
            // Logika Hapus saat diklik
            tugasBaru.onclick = function() { tugasBaru.remove(); };
            
            wadahDaftar.appendChild(tugasBaru);
            kotakInput.value = ""; 
        }
    }
</script>

Level 1

⚖️ Misi: Kalkulator BMI

Level 1: Formulir Lab

<body>
    <h1>⚖️ Cek Kesehatan (BMI)</h1>
    <p>Berat Badan (kg):</p>
    <input type="number" id="inputBerat">
    <p>Tinggi Badan (cm):</p>
    <input type="number" id="inputTinggi">
    <br><br>
    <button onclick="hitungBMI()">Hitung BMI</button>
    <h2 id="teksHasil">Hasil akan muncul di sini</h2>
</body>

Level 2: Rumus Medis JS

<script>
    function hitungBMI() {
        let b = Number(document.getElementById("inputBerat").value);
        let t = Number(document.getElementById("inputTinggi").value) / 100;
        let hasil = document.getElementById("teksHasil");

        if (b > 0 && t > 0) {
            let bmi = (b / (t * t)).toFixed(1); 
            let kategori = "";

            if (bmi < 18.5) kategori = "Kurus 🍟";
            else if (bmi <= 24.9) kategori = "Normal Sehat 🥗";
            else kategori = "Kelebihan Berat 🏃‍♂️";

            hasil.innerText = "Skormu: " + bmi + " - " + kategori;
        }
    }
</script>

Level 1

⏰ Misi: Jam Neon

Level 1: CSS Cahaya

<style>
    body { background: black; display: flex; justify-content: center; height: 100vh; align-items: center; }
    #layar-jam { 
        color: cyan; font-size: 15vw; font-family: Courier; 
        text-shadow: 0 0 20px cyan, 0 0 40px blue; 
    }
</style>
<h1 id="layar-jam">00:00:00</h1>

Level 2: Waktu Bumi (JS)

<script>
    function nyalakanJam() {
        const wkt = new Date(); 
        let j = wkt.getHours(), m = wkt.getMinutes(), d = wkt.getSeconds();

        if (j < 10) j = "0" + j;
        if (m < 10) m = "0" + m;
        if (d < 10) d = "0" + d;

        document.getElementById('layar-jam').innerText = j + ":" + m + ":" + d;
    }
    setInterval(nyalakanJam, 1000); 
</script>

Level 1

🍎 Misi: Game Tangkap Buah

Level 1: Gravitasi & Kanvas

<canvas id="layar" width="300" height="400" style="background: skyblue; border:2px solid black;"></canvas>

<script>
    const ctx = document.getElementById('layar').getContext('2d');
    let kX = 100, aX = 150, aY = 0, skor = 0;        

    function main() {
        ctx.clearRect(0, 0, 300, 400); 
        aY += 5; // Apel jatuh

        ctx.font = "30px Arial";
        ctx.fillText("🍎", aX, aY);
        ctx.fillText("🧺", kX, 380);

        if (aY > 400) { aY = 0; aX = Math.random() * 250; }
        
        // Tabrakan
        if (aY > 350 && Math.abs(aX - kX) < 30) {
            skor += 10; aY = 0; aX = Math.random() * 250; 
            console.log("Skor: " + skor);
        }
        requestAnimationFrame(main);
    }
    main(); 

    // Kontrol Mouse
    document.getElementById('layar').addEventListener('mousemove', e => {
        kX = e.offsetX - 15; 
    });
</script>

Level 1

🔮 Misi: Tebak Angka

Level 1: HTML & Logika AI

<h1>Tebak (1-10)</h1>
<input type="number" id="tebakan">
<button onclick="cek()">Tebak</button>
<h2 id="hasil"></h2>

<script>
    let rahasia = Math.floor(Math.random() * 10) + 1;

    function cek() {
        let t = Number(document.getElementById("tebakan").value);
        let h = document.getElementById("hasil");
        
        if (t === rahasia) h.innerText = "Benar! 🎉"; 
        else if (t > rahasia) h.innerText = "Kebesaran ❌"; 
        else h.innerText = "Kekecilan ❌"; 
    }
</script>

Level 1