Cara Membuat Jam Analog dengan JavaScript

By Posted on

Cara Membuat Jam Analog dengan JavaScript – Sobat Java, apakah kamu tahu bahwa JavaScript tidak hanya berguna untuk membuat halaman web lebih interaktif, tetapi juga bisa digunakan untuk membuat jam digital dan analog?

Ya, kita dapat membuat jam digital atau analog dengan menggunakan JavaScript, dan yang lebih menarik lagi, caranya pun cukup mudah! Mari kita bahas lebih dalam tentang pembuatan jam analog dengan JavaScript yang sudah kelasjava rangkum dibawah ini.

Apa Itu Jam Analog JS?

Jam analog JavaScript adalah program yang menampilkan waktu dengan menggunakan tampilan analog, mirip dengan jam tangan pada umumnya. Namun, tampilan ini dikontrol dan diperbarui menggunakan JavaScript. Fitur utama dari jam analog JavaScript meliputi:

  • Jarum Jam: Menunjukkan waktu saat ini dalam format jam.
  • Jarum Menit: Menunjukkan waktu saat ini dalam format menit.
  • Jarum Detik: Menunjukkan waktu saat ini dalam format detik.
  • Perbarui Waktu: JavaScript secara terus-menerus memperbarui posisi jarum-jarum untuk mencerminkan waktu aktual.
  • Tampilan Interaktif: Jam analog dapat diberikan interaksi tambahan, seperti menampilkan informasi tambahan saat diklik.
Baca Juga:   Cara Membuat Game Tebak Angka dengan JavaScript

Jam analog JavaScript sering digunakan sebagai elemen dekoratif pada situs web atau aplikasi web, atau bahkan sebagai jam waktu aktual dalam aplikasi web yang membutuhkan penampilan waktu analog.

Alat yang Dibutuhkan untuk Membuat Jam Analog dengan JavaScript

Berikut ini beberapa alat yang dibutuhkan untuk dapat membuat jam analog dengan menggunakan HTML, CSS, dan JavaScript:

  • Perangkat laptop,
  • Sublime Text (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Mudah Membuat Jam Analog dengan JavaScript

1. Siapkan Folder dan File

Langkah pertama dalam membuat jam analog menggunakan JS, yaitu buatlah folder baru untuk proyek jam analog kamu. Di dalam folder proyek, buatlah tiga file: index.html, style.css, dan script.js.

2. Coding HTML (index.html)

Buka file index.html dan tambahkan kode HTML yang diperlukan untuk struktur dasar jam analog, kamu bisa menyalin 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>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
    <div class="center-circle"></div>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS (style.css)

Buka file style.css dan tambahkan kode CSS untuk memberikan tampilan visual yang menarik pada jam analog, kamu bisa menyalin kode CSSnya dibawah ini.

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.clock {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 8px solid #333;
    position: relative;
}

.hour-hand,
.minute-hand,
.second-hand {
    position: absolute;
    background-color: #333;
    transform-origin: bottom center;
}

.hour-hand {
    width: 4px;
    height: 50px;
    top: 50px;
    left: 98px;
}

.minute-hand {
    width: 3px;
    height: 70px;
    top: 30px;
    left: 98px;
}

.second-hand {
    width: 2px;
    height: 90px;
    top: 10px;
    left: 99px;
}

.center-circle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center {
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 94px;
    left: 94px;
}

4. Coding JavaScript (script.js)

Buka file script.js dan tambahkan kode JavaScript untuk mengatur perilaku dan pergerakan jarum-jarum pada jam analog, kamu bisa menyalin kode JavaScriptnya dibawah ini.

setInterval(() => {
    const now = new Date();

    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();

    const hourDegree = (hour * 30) + (0.5 * minute);
    const minuteDegree = (minute * 6) + (0.1 * second);
    const secondDegree = second * 6;

    document.querySelector('.hour-hand').style.transform = `rotate(${hourDegree}deg)`;
    document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegree}deg)`;
    document.querySelector('.second-hand').style.transform = `rotate(${secondDegree}deg)`;
}, 1000);

5. Menjalankan Kode

Jika sudah maka jalankan kode dengan membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu Open in Browser.

Baca Juga:   Cara Membuat Validasi Form dengan JavaScript

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat Jam Analog dengan JavaScript dan mempercantik tampilannya menggunakan CSS. Sekarang, jam analogmu siap untuk tampil dalam pengguna situs web atau aplikasi web yang kamu buat.

Kesimpulan

Itulah tutorial mengenai cara membuat jam analog dengan JavaScript yang kami jabarkan langkah demi langkahnya. Dengan memahami konsep dan langkah-langkah pembuatan jam analog, kamu dapat menambahkan elemen dekoratif yang menarik dan fungsional pada situs web atau aplikasi web kamu. Selamat mencoba!

Related posts: