Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript - hapidzfadli.id
News Update
Loading...

Minggu, 13 September 2020

Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript

 


Pada artikel kali ini saya akan memberikan panduan cara membuat jam analog dengan tampilan keren menggunakan HTML CSS dan JavaScript. Namun sebelum mengikuti panduan ini sebaiknya kalian harus mengerti terlebih dahulu dasar dasar dari html css dan javascript supaya paham.

Jam analog yang akan kita buat, nantinya bisa kita gunakan untuk mempercantik website agar lebih interaktif (bisa di tambahkan sebagai widget). Bagaimana membuat Jam analog menggunakan javascript? berikut panduanya:

Pertama silahkan buat dulu folder untuk menyimpan proyek yang akan kita buat silahkan berinama jam analog atau namanya terserah kalian. Jika sudah di buat silahkan tambhakn file index.html untuk menyimpan kode html dam buat file style.css untuk menyimpan kode css nya.

Selanjutnya silahkan masukan kode html berikut kedalam file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Jam Dinding</title>
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>

<script>
const deg = 6;
const hr = document.getElementById('hr');
const mn = document.getElementById('mn');
const sc = document.getElementById('sc');



setInterval (() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;

hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
</body>
</html>

Penjelasan Kode pada HTML

Pada bagian atas ada kode <link rel="stylesheet" href="style.css">  ini berguna untuk menghubungkan file html kita dengan file style.css. Mengapa harus di hubungkan? untuk mempercantik tampilan jam nya kita harus menggunakan css sebagai style.

Pada bagian body ada div dengan class clock merupakan tampilan utama jamnya. Di dalam div dengan class clock ada beberapa div lagi dengan class dan id. div ini berguna sebagai arah jarum nya.

Selanjutnya pada bagian tag script di dalamnya ada beberapa variabel dan fungsi untuk mengatur arah jarum jam.

const deg digunakan untuk mengatur rotasi
const hr, mn, sc pada bagian atas digunakan untuk mengambil code dari id masing masing.
fungsi setInterval di perlukan untuk mengatur waktu bergeraknya arah jarum jam.

Kemudian silahkan masukan kode css berikut kedalam file style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #091921;
}
.clock {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url(clock.png);
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);

}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
z-index: 1000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr {
width: 160px;
height: 160px;

}
.clock .min, .mn {
width: 190px;
height: 190px;
}
.clock .sec, .sc {
width: 230px;
height: 230px;
}

.hr, .mn, .sc {
display: flex;
justify-content: center;
border-radius: 50%;
position: absolute;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff105e;
border-radius: 6px 6px 0 0;
z-index: 10;
}
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
border-radius: 6px 6px 0 0;
z-index: 20;
}
.sc::before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #e2e2e2;
border-radius: 6px 6px 0 0;
z-index: 22;
}

Kode css ini akan mempercantik dan mengatur penempatan setiap elemen pada kode html.


Jika sudah memasukan kode kode tersebut silahkan buka file index.html menggunakan browser nanti tampilanya seperti ini:


nah itulah sedikit tentang cara membuat jam analog otomatis menggunakan html css dan javascript. sampai jumpa pada tutorial berikutnya

Share with your friends

Give us your opinion

Notification
This is just an example, you can fill it later with your own note.
Done