Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 5 menit

Proyek Web: Membangun Aplikasi Pomodoro Timer Interaktif

Halo Sobat Jurnal Coding! Selamat datang kembali di kategori Proyek.

Pernahkah kamu duduk manis di depan laptop, sudah berniat bulat untuk belajar menulis kode hari ini, lalu tiba-tiba kamu berpikir, "Ah, aku mau cek media sosial sebentar saja selama lima menit sebelum mulai."

Lalu, apa yang terjadi selanjutnya? Tahu-tahu tiga jam sudah berlalu, matamu sudah lelah menatap layar, dan tidak ada satu baris kode pun yang berhasil kamu tulis. Jika jawabanmu adalah "Iya, sering banget!", tenang saja, kamu sama sekali tidak sendirian.

Semua orang, bahkan para pembuat perangkat lunak (Software Engineer) senior yang bergaji ratusan juta pun, pernah dan sering mengalami masalah hilangnya fokus ini. Di dunia modern yang penuh dengan notifikasi, mempertahankan konsentrasi adalah salah satu kemampuan yang paling mahal harganya.

Untuk mengatasi penyakit hilangnya fokus ini, ada sebuah teknik manajemen waktu legendaris dari tahun 1980-an yang bernama Teknik Pomodoro. Teknik ini sangat sederhana: Kamu mematikan semua gangguan dan fokus bekerja keras selama 25 menit, lalu disusul dengan istirahat santai selama 5 menit. Siklus ini diulang terus-menerus.

Nah, daripada kita menggunakan aplikasi pengingat waktu buatan orang lain, bukankah jauh lebih keren jika sebagai calon programmer kita membuat aplikasi Pomodoro Timer kita sendiri?

Pada proyek kali ini, kita akan membangun mesin pengingat waktu tersebut. Proyek ini sangat brilian untuk melatih logikamu tentang bagaimana JavaScript bisa menghitung mundur waktu secara presisi tanpa memuat ulang (refresh) halaman website.

Mari kita singsingkan lengan baju dan mulai merakitnya!

Langkah 1: Menyiapkan Kerangka Rumah (HTML)

Seperti biasa, setiap proyek website harus dimulai dengan membangun fondasi dan kerangka bangunannya. Kita butuh sebuah teks besar untuk menampilkan angka menit dan detik, serta dua buah tombol interaktif (satu untuk memulai waktu, dan satu lagi untuk mengulang dari awal).

Buka Text Editor andalanmu (seperti VS Code yang sudah kita bahas di kategori Toolkit), lalu tuliskan struktur HTML sederhana berikut ini:

<div id="wadah-pomodoro">

    <h1>Fokus Belajar</h1>

    <h2 id="waktu-tampil">25:00</h2>

    <div class="grup-tombol">

        <button id="tombol-mulai">Mulai Fokus</button>

        <button id="tombol-reset">Ulangi</button>

    </div>

</div>

Sangat singkat dan padat, bukan? Rahasianya ada pada pemberian ID di setiap elemen. ID ini ibarat "Papan Nama" yang nantinya akan dipanggil oleh JavaScript agar tahu bagian mana yang harus diubah angkanya.

Langkah 2: Menghias Kerangka Menjadi Elegan (CSS)

Jika kamu hanya menggunakan HTML di atas, tampilan aplikasimu akan berada di pojok kiri atas layar dengan warna hitam putih yang sangat membosankan. Tentu kita tidak mau proyek portofolio kita terlihat seperti website tahun 1990-an.

Mari kita berikan sedikit sentuhan ajaib CSS agar posisi pengingat waktu ini berada persis di tengah layar, dan memiliki teks berukuran raksasa yang nyaman dilihat dari jarak jauh.

#wadah-pomodoro {

    text-align: center;

    margin-top: 100px;

    font-family: sans-serif;

}

#waktu-tampil {

    font-size: 80px;

    color: #00ffff;

    margin: 20px 0;

}

button {

    padding: 15px 30px;

    font-size: 18px;

    margin: 10px;

    cursor: pointer;

    background-color: #333;

    color: #fff;

    border: 2px solid #00ffff;

    border-radius: 8px;

}

Tampilannya sekarang pasti sudah terlihat jauh lebih galak dan profesional! Angka "25:00" akan menyala dengan warna cyan terang yang sangat menawan.

Namun, sehebat apapun desainnya saat ini, angka tersebut hanyalah teks mati. Jika kamu menunggu selama satu jam pun, angkanya akan tetap 25:00. Di sinilah pahlawan sejati kita masuk.

Langkah 3: Memberikan Nyawa pada Waktu (JavaScript)

Sekarang kita akan menulis logika otaknya. Konsepnya seperti ini: Kita memiliki total waktu 25 menit. Komputer lebih suka menghitung dalam bentuk detik (25 dikali 60 detik sama dengan 1500 detik).

Kita akan menyuruh JavaScript untuk mengurangi angka 1500 tersebut sebanyak satu angka setiap detiknya. Berikut adalah kode lengkapnya:

let waktuTersisa = 1500; // 25 menit dalam detik

let mesinWaktu; // Variabel penampung interval

let sedangBerjalan = false;

const teksWaktu = document.getElementById("waktu-tampil");

const tombolMulai = document.getElementById("tombol-mulai");

const tombolReset = document.getElementById("tombol-reset");

function perbaruiTampilan() {

    let menit = Math.floor(waktuTersisa / 60);

    let detik = waktuTersisa % 60;

    // Tambahkan angka 0 di depan jika detik kurang dari 10

    if (detik < 10) {

        detik = "0" + detik;

    }

    if (menit < 10) {

        menit = "0" + menit;

    }

    teksWaktu.innerText = menit + ":" + detik;

}

tombolMulai.addEventListener("click", function() {

    if (sedangBerjalan === false) {

        sedangBerjalan = true;

        tombolMulai.innerText = "Jeda";

        mesinWaktu = setInterval(function() {

            waktuTersisa = waktuTersisa - 1;

            perbaruiTampilan();

            if (waktuTersisa <= 0) {

                clearInterval(mesinWaktu);

                alert("Waktu Habis! Selamat beristirahat.");

                sedangBerjalan = false;

            }

        }, 1000); // 1000 milidetik = 1 detik

    } else {

        // Jika sedang berjalan, maka jeda (pause)

        clearInterval(mesinWaktu);

        sedangBerjalan = false;

        tombolMulai.innerText = "Lanjutkan";

    }

});

tombolReset.addEventListener("click", function() {

    clearInterval(mesinWaktu);

    sedangBerjalan = false;

    waktuTersisa = 1500;

    tombolMulai.innerText = "Mulai Fokus";

    perbaruiTampilan();

});

Bedah Logika: Bagaimana Ini Bekerja?

Bagi kamu yang baru belajar JavaScript, melihat kode di atas mungkin membuat kepalamu sedikit berputar. Tapi mari kita bedah perlahan dengan bahasa manusia.

Fungsi sakti yang membuat aplikasi ini hidup adalah setInterval(). Anggap saja fungsi ini sebagai seorang asisten pribadi yang sangat disiplin. Kamu menyuruh asisten ini: "Tolong kurangi angkanya satu per satu, dan lakukan itu setiap 1000 milidetik (1 detik)."

Lalu, apa fungsi Math.floor() dan tanda persen (%)?
Itu adalah matematika dasar untuk mengubah detik mentah kembali menjadi format Menit dan Detik. Tanda persen (%) adalah operator sisa bagi (Modulo). Jadi jika waktu tersisa 65 detik, 65 dibagi 60 sisanya adalah 5 detik. Sangat jenius dan logis, bukan?

Kesimpulan Proyek

Selamat! Kamu baru saja merakit sebuah aplikasi yang sangat fungsional. Proyek ini membuktikan bahwa kamu mulai memahami bagaimana data dimanipulasi, bagaimana kejadian (klik tombol) diproses, dan bagaimana tampilan website diperbarui secara langsung tanpa berkedip.

Gunakan aplikasi buatanmu sendiri ini setiap kali kamu membaca artikel di Jurnal Coding. Fokus 25 menit membaca dan berlatih, lalu istirahat 5 menit. Jangan pernah meremehkan kekuatan istirahat, karena otakmu butuh jeda untuk mencerna ratusan baris kode yang baru saja kamu pelajari.

Sampai jumpa di proyek luar biasa berikutnya. Selamat berlatih dan jangan menyerah!