Program Javascript Sederhana: Jam Digital

Roihan Fajareno Januari 23, 2024
Dalam artikel ini, kita akan membuat Jam Digital menggunakan HTML, CSS, dan Javascript yang memberikan informasi waktu. Lalu, kita bisa tambahkan efek dan fungsionalitas tambahan ke Jam Digital tersebut.

Tujuan Program

Tujuan dari program ini adalah membuat Jam digital dengan fungsi menampilkan waktu dalam format Jam:Menit:Detik serta fitur border jam berubah warna jika detik jam memiliki angka genap atau ganjil.
Hasil Akhir            

Source Code

Kalian bisa mencoba kode berikut secara langsung dengan mengklik link ini [JSFiddle Link]


Github Repository untuk Mini Project modul Pengenalan Javascript ada di link berikut [Repository] 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

        :root {
            --neongreen: #48ff00;
            --biru: rgb(0, 132, 255);
            --merah: rgb(255, 22, 22);
        }

        body {
            margin: 0;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: rgb(8, 8, 22);
            font-family: 'Bebas Neue', sans-serif;
        }

        #container {
            display: grid;
            place-items: center;
            color: var(--neongreen);
            text-shadow: 0 0 5vh var(--neongreen);
            background-color: rgb(5, 5, 5);
            padding: 1.5vh 5vh 1.5vh 5vh;
            border-radius: 25px;
            border: 1vh solid;
            transition: border-color 0.5s ease;
            border-color: none;
        }

        #displayTime {
            font-size: 12vh;
        }

        #checkOddEven {
            font-size: 4vh;
        }

    </style>
</head>
<body>
    <div id="container">
        <span id="displayTime">00:00:00</span>
        <span id="checkOddEven">TEST</span>
    </div>
    <script>
        // Jalankan fungsi clock() setiap 1000 milisekon (1 detik)
        setInterval(clock, 1000);

        let displayTime = document.getElementById("displayTime");
        let timeContainer = document.getElementById("container");
        let checkOddEven = document.getElementById("checkOddEven");

        function clock() {
            let date = new Date();
            displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
            if (date.getSeconds() % 2 == 0) {
                timeContainer.style.borderColor = "var(--merah)";
                checkOddEven.innerHTML = "GENAP";
            } else {
                timeContainer.style.borderColor = "var(--biru)";
                checkOddEven.innerHTML = "GANJIL";
            }
        }
    </script>
</body>
</html>

Pembahasan

1. Styling dan HTML

Pertama buat struktur HTML beserta isinya serta tambah styling CSS. @import digunakan untuk menggunakan font external (dari google font) dan :root digunakan untuk membuat "variabel" dalam CSS. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

        :root {
            --neongreen: #48ff00;
            --biru: rgb(0, 132, 255);
            --merah: rgb(255, 22, 22);
        }

        body {
            margin: 0;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: rgb(8, 8, 22);
            font-family: 'Bebas Neue', sans-serif;
        }

        #container {
            display: grid;
            place-items: center;
            color: var(--neongreen);
            text-shadow: 0 0 5vh var(--neongreen);
            background-color: rgb(5, 5, 5);
            padding: 1.5vh 5vh 1.5vh 5vh;
            border-radius: 25px;
            border: 1vh solid;
            transition: border-color 0.5s ease;
            border-color: none;
        }

        #displayTime {
            font-size: 12vh;
        }

        #checkOddEven {
            font-size: 4vh;
        }
    </style>
</head>
<body>
    <div id="container">
        <span id="displayTime">00:00:00</span>
        <span id="checkOddEven">TEST</span>
    </div>
</body>
</html>

Hasilnya akan jadi seperti berikut

2. Tambahkan Script Javascript

Setelah membuat tampilan web, langkah selanjutnya kita bisa membuat skrip agar jam tersebut bekerja. 
...
<script>
    setInterval(clock, 1000);

    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
        if (date.getSeconds() % 2 == 0) {
            timeContainer.style.borderColor = "var(--merah)";
            checkOddEven.innerHTML = "GENAP";
        } else {
            timeContainer.style.borderColor = "var(--biru)";
            checkOddEven.innerHTML = "GANJIL";
        }
    }
</script>
...

Pembahasan
1. Ambil element HTML menggunakan document .getElementById dan masukan ke dalam variabel. 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
</script>

2. Buat function jam. Deklarasi function dan beri nama clock(). 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        ...
    }
</script>

3. Dapatkan waktu saat ini menggunakan object Date() dan simpan di dalam variabel bernama date. 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        ...
    }
</script>

4. Tampilkan waktu dengan .innerHTML di dalam variabel displayTime (yang merupakan elemen <span> dengan id "displayTime" yang ada di HTML) dengan waktu diformat 24 jam. 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
        ...
    }
</script>

5. Buat conditional if-else. Kondisinya yakni jika detik waktu (.getSeconds() berfungsi mendapatkan detik dari object Date) dibagi 2 hasilnya 0, Jalankan kode yang ada di dalamnya. Jika tidak, jalankan kode berikut. 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
        if (date.getSeconds() % 2 == 0) {
            ...
        } else {
            ...
        }
    }
</script>

6. Di conditional if, tambahkan style bordercolor merah dan ubah isi dari checkOddEven menjadi GENAP. sedangkan di conditional else, tambahkan style bordercolor biru dan ubah isi dari checkOddEven menjadi GANJIL. 
<script>
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
        if (date.getSeconds() % 2 == 0) {
            timeContainer.style.borderColor = "var(--merah)";
            checkOddEven.innerHTML = "GENAP";
        } else {
            timeContainer.style.borderColor = "var(--biru)";
            checkOddEven.innerHTML = "GANJIL";
        }
    }
</script>

7. Tambahkan setInterval(clock, 1000) untuk menjalankan function clock() setiap 1000 milidetik atau 1 detik. 
<script>
    setInterval(clock, 1000);
    
    let displayTime = document.getElementById("displayTime");
    let timeContainer = document.getElementById("container");
    let checkOddEven = document.getElementById("checkOddEven");
        
    function clock() {
        let date = new Date();
        displayTime.innerHTML = date.toLocaleTimeString(undefined, {hour12: false});
        if (date.getSeconds() % 2 == 0) {
            timeContainer.style.borderColor = "var(--merah)";
            checkOddEven.innerHTML = "GENAP";
        } else {
            timeContainer.style.borderColor = "var(--biru)";
            checkOddEven.innerHTML = "GANJIL";
        }
    }
</script>

Bila sudah menambahkan Javascript tersebut, Jam akan menunjukkan waktu dan border akan berubah warna menjadi merah ketika detik genap dan border menjadi biru ketika detik ganjil.
    Jam digital ketika detik ganjil    



Jam digital ketika detik genap

Semoga Bermanfaat

Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar