Tutorial Membuat Stopwatch Sederhana Menggunakan HTML dan CSS
Halo semuanya! Pada tutorial kali ini, kita akan belajar membuat stopwatch sederhana menggunakan HTML dan CSS. Stopwatch ini dapat digunakan untuk mengukur waktu secara digital. langsung saja silahkan simak dibawah ini.
Dalam dunia pengembangan web, sering kali kita memerlukan alat sederhana seperti stopwatch untuk mengukur waktu secara digital. Stopwatch ini berguna untuk berbagai keperluan, mulai dari menghitung durasi suatu kegiatan hingga mengatur jadwal tugas. Dalam artikel ini, kita akan belajar cara membuat stopwatch yang dapat diakses melalui web menggunakan HTML dan CSS. Mari kita mulai!
Tutorial Membuat Stopwatch Sederhana Menggunakan HTML dan CSS
1. Persiapan Awal
Sebelum memulai membuat stopwatch, pastikan kalian memiliki perangkat lunak yang diperlukan seperti Visual Studio Code atau Sublime Text, serta browser web seperti Google Chrome atau Mozilla Firefox untuk melihat hasil proyek.
2. Membuat Struktur Dasar HTML
Langkah pertama yang dilakukan adalah membuat file HTML baru dengan nama index.html. Struktur dasar HTML ini akan menjadi kerangka utama dari stopwatch.
Kita dapat menggunakan elemen-elemen seperti <div>, < span>, dan <button> untuk membuat tampilan stopwatch. Untuk lebih jelasnya silahkan kalian ikuti atau salin kode dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<h1>Tutorial <span class="by-text">by bannemedia</span></h1>
<div class="stopwatch-container">
<div id="display" class="stopwatch">00:00:00</div>
<div class="button-container">
<button id="startButton" onclick="startStop()">Start</button>
<button id="stopButton" onclick="stopTimer()" disabled>Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
file index.html pada project stopwatch ini berfungsi sebagai halaman utama yang menampilkan stopwatch di dalam browser web.
Selain itu file index juga berperan dalam menghubungkan halaman dengan file CSS (style.css) untuk mengatur tampilan dan gaya visual stopwatch dan JavaScript (script.js) untuk mengatur logika pada stopwatch agar button Start, Stop, dan Reset bisa berfungsi.
3. Buat File style.css
Setelah selesai membuat file index, sejalnjutnya buat file CSS dengan nama style.css untuk mengatur tampilan dari elemen-elemen HTML yang telah dibuat.
File style.css ini berfungsi untuk mengatur warna, font, ukuran, dan posisi elemen-elemen dari stopwatch yang akan kita buat.
Silahkan ikuti atau salin code css dibawah ini:
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f9fa;
margin: 0;
}
.content {
text-align: center;
}
h1 {
font-size: 2.5em;
color: #343a40;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 30px;
}
/* CSS lainnya disini */
jika kalian sudah membuat file Index dan Style dengan mengikuti code yang saya berikan maka tampilan dari stopwatch yang kita buat akan terlihat seperti berikut ini:
4. Implementasi Logika Stopwatch dengan JavaScript
Selanjutnya, buatlah file JavaScript dengan nama script.js untuk mengatur logika dari stopwatch. Dalam contoh ini, kita akan membuat fungsi-fungsi dasar seperti 'startStopwatch()', 'stopStopwatch()', 'resetStopwatch()', dan 'updateStopwatch()'.
Berikut ini adalah code untuk JavaScript dalam pembuatan stopwatch kita. Silahkan ikuti atau salin codenya dibawah ini:
let timer;
let startTime;
let running = false;
let pausedTime = 0;
function startStop() {
if (!running) {
startTimer();
} else {
stopTimer();
}
}
function startTimer() {
startTime = Date.now() - (pausedTime || 0);
timer = setInterval(updateDisplay, 1000);
running = true;
document.getElementById("startButton").textContent = "Pause";
document.getElementById("stopButton").disabled = false;
}
function stopTimer() {
clearInterval(timer);
running = false;
pausedTime = Date.now() - startTime;
document.getElementById("startButton").textContent = "Resume";
document.getElementById("stopButton").disabled = true;
}
function reset() {
clearInterval(timer);
running = false;
pausedTime = 0;
document.getElementById("startButton").textContent = "Start";
document.getElementById("stopButton").disabled = true;
document.getElementById("display").textContent = "00:00:00";
}
function updateDisplay() {
const elapsedTime = Date.now() - startTime;
const seconds = Math.floor(elapsedTime / 1000) % 60;
const minutes = Math.floor(elapsedTime / 1000 / 60) % 60;
const hours = Math.floor(elapsedTime / 1000 / 60 / 60);
const displayString =
pad(hours) + ":" +
pad(minutes) + ":" +
pad(seconds);
document.getElementById("display").textContent = displayString;
}
function pad(value) {
return value < 10 ? "0" + value : value;
}
File JavaScript diatas berfungsi untuk membuat tombol start, stop, dan reset pada stopwatch yang kita buat ini bekerja sesuai dengan yang diharapkan, yaitu dapat dimulai, dihentikan, diatur ulang, dan menampilkan waktu dengan tepat.
Nah, jika semua kalian sudah selesai membuat semua file Index, CSS, dan JavaScript dan semua coding telah kalian salin dan ikuti dengan benar maka hasil dari Stopwatch sederhana menggunakan HTML dan CSS hasilnya akan seperti dibawah ini:
Penutup
Demikianlah cara membuat stopwatch menggunakan HTML dan CSS. Semoga artikel ini bermanfaat dan bisa memberikan inspirasi untuk mulai belajar pengembangan web.
Dengan pemahaman dasar tentang HTML dan CSS, kamu dapat mulai menciptakan berbagai aplikasi web sederhana seperti stopwatch ini dan terus mengembangkan keterampilan dalam pemrograman web
Terima kasih telah mampir di situs Banne Media. Selamat mencoba dan selamat berkreasi dalam membuat hal-hal menarik di dunia pemrograman website!
No comments for "Tutorial Membuat Stopwatch Sederhana Menggunakan HTML dan CSS"
Post a Comment