Cara Membuat Jam Digital Dengan HTML, CSS dan Javascript

HTML adalah kepanjangan dari Hypertext Markup Language, pengertian html yaitu bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. 

CSS adalah kepanjangan dari Cascading Style Sheet, pengertian dari CSS yaitu aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 

JavaScript adalah JavaScript adalah suatu bahasa pemrograman tingkat tinggi dan dinamis.

Alat Yang Perlu Disiapkan:

1. Komputer/leptop/hp

2. Teks editor

Langkah pengerjaan:

1. Buat file di teks editor kalian, dan berinama index.html. Disini saya menggunakan "vscode"

2. Buat struktur HTML, agar lebih cepat ketik "!" Lalu tekan enter

3. Ganti title, lalu ketikan ini di dalam tag body :

<div id="jam" style="border: 1px solid; width :100px; text-align:center; font-size : 25px; "></div>

    <script>

        setInterval(()=>{

            const waktu = new Date()

            const jam = waktu.getHours()

            const menit = waktu.getMinutes()

            const detik = waktu.getSeconds()

            document.getElementById('jam').innerHTML = jam + ":" + menit + ":" + detik ;

        },1000)

    </script>

4. Jika ingin lebih bagus tambah kan style" lainnya sesuai keinginan kalian sendiri

5. Lalu jalankan code tersebut. Dengan cara klik kanan lalu pilih live server.

6. Output yang dihasilkan seperti ini

Keterangan :

"const waktu = new Date()" ini untuk membuat perintah agar fungsi ini di jalankan setiap detik. sesuai dengan jam digital yang menampikan perubahan detiknya setiap 1 detik sekali.

"const jam = waktu.getHours()" ini untuk mengambil data jam yang  telah tersimpan dalam variabel waktu.

"const menit = waktu.getMinutes()" ini untuk mengambil data menit yang telah tersimpan di dalam variabel waktu.

"const detik = waktu.getSeconds()" ini untuk mengambil data detik yang telah tersimpan di dalam variabel waktu.

"document.getElementById('jam').innerHTML = jam + ":" + menit + ":" + detik ;" perintah ini untuk memanggil function jam dan di ganti oleh jam, menit, detik. 

Ya, jadi begitulah cara membuat jam digital sederhana dengan menggunakan HTML, CSS, dan Js.
Semoga bermanfaat, selamat mencobaaa!