[{"name":"index.html","content":"<!DOCTYPE html>\n<html>\n<head>\n    <title>Secure Login</title>\n    <link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"all\" />\n\n</head>\n<body>\n    <div class=\"login-box\">\n        <h2>ADMIN PANEL</h2>\n        <input type=\"text\" placeholder=\"Username\" id=\"user-input\">\n        <input type=\"password\" placeholder=\"Password\">\n\n        <button>LOGIN</button>\n\n        <p id=\"message\"></p>\n    </div>\n    </body>\n</html>\n"},{"name":"style.css","content":"body {\n    background-color: #f0f0f0;\n    font-family: monospace;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n}\n.login-box {\n    background: white;\n    padding: 20px;\n    border: 1px solid green;\n    text-align: center;\n}\ninput { display: block; margin: 10px auto; padding: 5px; }\n"},{"name":"script.js","content":"// Logic Login Sederhana\n// TUGAS 3: Pastikan ID tombol sesuai dengan di HTML\n\ndocument.getElementById('btn-login').onclick = function() {\n    let user = document.getElementById('user-input').value;\n\n    if(user === \"admin\") {\n        document.getElementById('message').innerText = \"ACCESS GRANTED\";\n        document.getElementById('message').style.color = \"green\";\n    } else {\n        document.getElementById('message').innerText = \"ACCESS DENIED\";\n    }\n};\n"}]

Area Web / html

Web Repair: Broken Login

ACE EDITOR

Berkas

🌎 Loading... ✕

localhost:8080/index.html

✨ AI MENTOR

Klik tombol di atas untuk cek kodemu.

Target Pembelajaran 3 TUGAS

HTML: Beri id='btn-login' pada tombol
CSS: Ubah border .login-box jadi abu abu
JS: Tombol berfungsi (Tidak error null)

Petunjuk:

Halaman login ini rusak! Developer sebelumnya lupa memberikan ID pada tombol dan stylenya kurang “mengancam”.

Buka index.html, tambahkan id="btn-login" pada tag <button>.
Buka style.css, ubah warna border menjadi red.
Cek script.js untuk memahami logikanya, lalu coba jalankan.

Web Repair: Broken Login

Mode Fokus Aktif

✨ AI MENTOR

Target Pembelajaran 3 TUGAS

KONFIGURASI AI