Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

131 mengambil data jam dan menit dengan menggunakan const hour = new Date().getHours() % 12; untuk mengambil data jam dan const minute = new Date().getMinutes(); untuk mengambil data menit. Langkah terakhir melakukan settingan atribut yang akan digunakan pada line hourse dan minutes dengan menggunakan code hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`); untuk id line hourse dan minutesElement.setAttribute("transform",`rotate(${(360 / 60) * minute})`); untuk id line minutes. Setelah selesai melakukan settingan jam pada javascrip, kita masuk kebagian desain dari jam yang akan dibuat. Setelah bagian penutup pada tag </script> kita masuk pada pembuatan kotak latar untuk jam dengan menggunakan code <rect x="-100" y="-100" width="200" height="200" fill="green" />. Disini kita membuat sebuah kotak dengan tag <rect> yang mana kotak dibuat dari titik <-100, -100>. Kemudian ukuran kotak dibuat dengan tinggi 200 dan lebar 200. Warna fill yang akan ditampilkan pada kotak ini adalah warna hijau. Bagian selanjutnya adalah membuat tampilan dari jam dimana pada program kita akan membuat jam dalam bentuk lingkaran. Code yang digunakan untuk membentuk sebuah lingkaran pada program ini adalah <circle r="90" stroke="#FCCE7B" stroke-width="10" fill="white" />. Seperti yang sudah dipelajari sebelumnya untuk membuat sebuah lingkaran pada svg kita bisa gunaka tag <circle>. Lingkarang yang pertama ini adalah lingkarang yang dibentuk

RkJQdWJsaXNoZXIy MTM3NDc5MQ==