Fase 1: Persiapan Meja Kerja
Kita buat satu file saja agar Anda tidak bingung berpindah-pindah tab.
Buat folder baru di komputer Anda, beri nama
Latihan_Counter.Di dalam folder itu, buat file bernama
index.html.Ketik struktur dasar HTML ini (ini adalah kertas kosong kita):
<!DOCTYPE html>
<html>
<head>
<title>Counter Saya</title>
</head>
<body>
</body>
</html>
Tentu, saya mengerti. Agar materi ini benar-benar bisa dicerna dan dipraktikkan tanpa kebingungan, kita akan menggunakan metode "Bedah Anatomi".
Kita akan memecah proses pembuatan The Counter ini menjadi 5 Fase Kerja. Jangan lompat ke fase berikutnya sebelum fase sebelumnya berhasil.
Bayangkan kita sedang merakit sebuah Robot Penghitung:
Fase 1 (Persiapan): Menyiapkan meja kerja.
Fase 2 (HTML): Merakit kerangka badan robot.
Fase 3 (CSS): Memberi cat dan baju agar robot terlihat bagus.
Fase 4 (JavaScript Dasar): Memasang kabel agar robot bisa bergerak (Tambah/Kurang).
Fase 5 (JavaScript Logika): Memberi kecerdasan buatan (Mengubah warna otomatis).
Silakan buka teks editor Anda (Visual Studio Code, Notepad++, atau Sublime Text) dan ikuti panduan ini.
Fase 1: Persiapan Meja Kerja
Kita buat satu file saja agar Anda tidak bingung berpindah-pindah tab.
Buat folder baru di komputer Anda, beri nama Latihan_Counter.
Di dalam folder itu, buat file bernama index.html.
Ketik struktur dasar HTML ini (ini adalah kertas kosong kita):
HTML<!DOCTYPE html>
<html>
<head>
<title>Counter Saya</title>
</head>
<body>
</body>
</html>
Fase 2: HTML (Merakit Kerangka)
Di sini kita menaruh benda-benda yang diperlukan. Jangan pedulikan tampilannya yang masih jelek (di pojok kiri atas).
Tugas Anda:
Masukkan kode berikut di antara tag <body> dan </body>.
HTML <div class="kotak-aplikasi">
<h2>Penghitung</h2>
<h1 id="angka">0</h1>
<button onclick="kurang()">Kurang (-)</button>
<button onclick="reset()">Reset</button>
<button onclick="tambah()">Tambah (+)</button>
</div>
Fase 3: CSS (Memberi Gaya)
Sekarang kita rapikan. Kita akan menulis CSS di dalam file yang sama, di bagian <head>.
Tugas Anda:
Masukkan kode <style> ini di antara <head> dan </head>.
HTML<style>
/* 1. Merapikan Body (Latar Belakang) */
body {
font-family: sans-serif; /* Ganti font biar rapi */
background-color: #f0f0f0; /* Warna abu-abu muda */
text-align: center; /* Agar semua isi ada di tengah */
padding-top: 50px; /* Memberi jarak dari atas */
}
/* 2. Merapikan Angka */
h1 {
font-size: 80px; /* Membesarkan ukuran angka */
margin: 10px 0; /* Memberi jarak atas bawah */
}
/* 3. Merapikan Tombol */
button {
padding: 10px 20px; /* Membuat tombol lebih gemuk */
font-size: 16px; /* Tulisan tombol lebih besar */
margin: 5px; /* Jarak antar tombol */
cursor: pointer; /* Ubah kursor jadi telunjuk */
}
</style>
Fase 4: JavaScript Dasar (Menghidupkan Robot)
Ini intinya. Kita akan membuat tombol berfungsi. Letakkan kode ini di bagian paling bawah, sebelum penutup </body>.
Konsep:
Kita butuh wadah ingatan (let count) untuk menyimpan angka.
Kita butuh "tangan" untuk mengambil elemen HTML (document.getElementById).
Kita butuh fungsi (function) untuk mengubah angka tersebut.
Tugas Anda:
Ketik kode ini (jangan copy paste agar jari terbiasa):
HTML<script>
// 1. Siapkan Ingatan (Variabel)
let hitungan = 0;
// 2. Ambil elemen H1 dari HTML dan simpan ke variabel JS
let elemenAngka = document.getElementById("angka");
// 3. Fungsi Tambah
function tambah() {
hitungan = hitungan + 1; // Logika matematika: angka sekarang + 1
elemenAngka.innerText = hitungan; // Tampilkan hasil ke layar
}
// 4. Fungsi Kurang
function kurang() {
hitungan = hitungan - 1;
elemenAngka.innerText = hitungan;
}
// 5. Fungsi Reset
function reset() {
hitungan = 0;
elemenAngka.innerText = hitungan;
}
</script>
Fase 5: Tantangan Logika (Kecerdasan Tambahan)
Instruktur Anda meminta fitur tambahan: "Warna hijau jika positif, merah jika negatif."
Di sini kita belajar logika IF - ELSE (Jika - Maka). Kita akan memodifikasi script di Fase 4 sedikit.
Tugas Anda:
Tambahkan fungsi baru bernama cekWarna() dan panggil fungsi itu setiap kali tombol ditekan. Ubah bagian <script> Anda menjadi seperti ini:
JavaScript<script>
let hitungan = 0;
let elemenAngka = document.getElementById("angka");
// --- FUNGSI BARU: LOGIKA WARNA ---
function cekWarna() {
if (hitungan > 0) {
// Jika angka lebih dari 0, ubah CSS warna jadi hijau
elemenAngka.style.color = "green";
} else if (hitungan < 0) {
// Jika angka kurang dari 0, ubah CSS warna jadi merah
elemenAngka.style.color = "red";
} else {
// Jika 0, kembali ke hitam
elemenAngka.style.color = "black";
}
}
// ----------------------------------
function tambah() {
hitungan = hitungan + 1;
elemenAngka.innerText = hitungan;
cekWarna(); // Panggil fungsi pengecekan warna
}
function kurang() {
hitungan = hitungan - 1;
elemenAngka.innerText = hitungan;
cekWarna(); // Panggil fungsi pengecekan warna
}
function reset() {
hitungan = 0;
elemenAngka.innerText = hitungan;
cekWarna(); // Panggil fungsi pengecekan warna
}
</script>
Komentar
Posting Komentar