Tutorial Membuat Countdown Timer dengan Notifikasi Suara dan Pesan Menggunakan Bootstrap 5.3 dan jQuery
Halo teman-teman! Siapa di sini yang sering banget mengandalkan timer saat bekerja atau belajar? Ya, saya juga! Timer itu seperti penyelamat yang setia saat kita ingin fokus, menyelesaikan tugas, atau bahkan saat bikin kopi, supaya nggak keburu dingin! Kali ini, saya akan berbagi tutorial membuat countdown timer dengan Bootstrap 5.3 dan jQuery yang dilengkapi dengan notifikasi suara serta pesan ketika waktunya habis. Timer ini bisa kamu atur mulai dari menit hingga detik, plus ada tombol start, pause, dan reset. Wah, lengkap banget, kan?
Mari kita mulai, teman-teman. Kita akan pecah ini jadi beberapa bagian supaya gampang diikuti.
1. Struktur Dasar HTML
Pertama, kita mulai dengan bagian HTML-nya. Ini adalah bagian yang bertugas menyediakan input untuk menit dan detik, tampilan waktu, serta tombol untuk start, pause, dan reset. Kita juga akan menyertakan audio buat notifikasi suara, jadi nanti kalau waktunya habis, kamu bisa langsung dengerin suara "beep" yang keren banget!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center vh-100">
<div class="card text-center p-4 shadow">
<h1>Countdown Timer</h1>
<div class="mb-3">
<input type="number" id="minutes-input" class="form-control mb-2" placeholder="Enter minutes" min="0">
<input type="number" id="seconds-input" class="form-control" placeholder="Enter seconds" min="0" max="59">
</div>
<div class="timer-display mb-3" id="timer">00:00</div>
<div class="d-flex justify-content-center gap-2">
<button id="start-pause-btn" class="btn btn-success">Start</button>
<button id="reset-btn" class="btn btn-danger">Reset</button>
</div>
<audio id="alarm-sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3" preload="auto"></audio>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. CSS: Bikin Timer Lebih Cakep
Oke, sekarang bagian CSS-nya. Di sini, kita akan mendandani tampilan biar lebih kece. Kita pakai Bootstrap 5.3 biar nggak ribet dengan styling dasar, tapi tambahin sedikit CSS custom buat bikin tampilan lebih rapi. Tenang aja, nggak bakal bikin pusing kok!
body {
background-color: #f4f4f4;
margin: 0;
}
.timer-display {
font-size: 48px;
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
input {
text-align: center;
}
3. Logika Timer dengan jQuery
Nah, teman-teman, ini bagian yang penting. Kita akan menambahkan logika buat timer menggunakan jQuery. Jadi saat kamu menekan tombol start, timer akan mulai berjalan. Kamu juga bisa menjeda (pause) atau mereset timer. Tidak lupa, kita tambahkan notifikasi suara dan pesan di browser jika waktu sudah habis.
let countdown;
let isPaused = true;
let remainingTime = 0;
function updateDisplay(minutes, seconds) {
let min = minutes < 10 ? '0' + minutes : minutes;
let sec = seconds < 10 ? '0' + seconds : seconds;
$('#timer').text(`${min}:${sec}`);
}
function startTimer(duration) {
let timer = duration;
countdown = setInterval(function () {
let minutes = Math.floor(timer / 60);
let seconds = timer % 60;
updateDisplay(minutes, seconds);
if (timer <= 0) {
clearInterval(countdown);
notifyEnd();
} else {
timer--;
}
remainingTime = timer;
}, 1000);
}
function notifyEnd() {
// Notifikasi suara
$('#alarm-sound')[0].play();
// Notifikasi browser
if (Notification.permission === "granted") {
new Notification("Time's Up!", {
body: "The countdown has finished.",
icon: "https://www.iconpacks.net/icons/2/free-alarm-clock-icon-3099-thumb.png"
});
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
new Notification("Time's Up!", {
body: "The countdown has finished.",
icon: "https://www.iconpacks.net/icons/2/free-alarm-clock-icon-3099-thumb.png"
});
}
});
}
}
$('#start-pause-btn').click(function () {
let inputMinutes = parseInt($('#minutes-input').val()) || 0;
let inputSeconds = parseInt($('#seconds-input').val()) || 0;
if (isPaused) {
$(this).text('Pause');
isPaused = false;
let totalTime = inputMinutes * 60 + inputSeconds;
if (remainingTime === 0) {
startTimer(totalTime);
} else {
startTimer(remainingTime);
}
} else {
$(this).text('Start');
isPaused = true;
clearInterval(countdown);
}
});
$('#reset-btn').click(function () {
clearInterval(countdown);
isPaused = true;
remainingTime = 0;
$('#start-pause-btn').text('Start');
updateDisplay(0, 0);
$('#minutes-input').val('');
$('#seconds-input').val('');
});
// Minta izin notifikasi browser saat halaman dimuat
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
Kesimpulan
Voila! Kita sudah berhasil membuat countdown timer yang keren, lengkap dengan fitur notifikasi suara dan pesan browser. Timer ini cocok banget buat kamu yang suka mengatur waktu kerja atau belajar. Kalau waktunya habis, kamu akan diberi notifikasi yang mengingatkan kalau sudah saatnya berhenti (atau mulai lagi kalau masih semangat!). Sekarang, kamu sudah punya alat bantu untuk produktivitas yang simple tapi powerful. Jadi, tunggu apa lagi? Coba sekarang dan biarkan waktu bekerja untukmu!
Selamat mencoba, teman-teman! 🎉
Posting Komentar untuk "Tutorial Membuat Countdown Timer dengan Notifikasi Suara dan Pesan Menggunakan Bootstrap 5.3 dan jQuery"
Posting Komentar