Countdown istilah singkatnya yaitu sebuah Hitung Mundur. Di tutorial kali ini kita akan membuat sebuah hitung mundur menggunakan JavaScript, yang nantinya kalian bisa atur sendiri hitung mundurnya ke tanggal berapa. Bahan-bahan yang kalian butuhkan hanyalah sebuah Text Editor dan sebuah gambar untuk dijadikan cover atau sampul untuk mempercantik tampilannya. Saya menggunakan gambar dari unsplash.com kalian bisa klik link tersebut untuk mendapatkan gambar seperti yang saya gunakan. Langsunf saja ke tutorialnya.
Buka Visual Studio Code dan copy kode HTML di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Countdown 2022</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="imgBx"></div>
<div class="countdownBx">
<h2>Countdown to New Year<br><span>20<i>22 M</i></span></h2>
<h3>Properti of Putra Dwi Ardhan</h3>
<div class="countdown">
<div id="day">NA</div>
<div id="hour">NA</div>
<div id="minute">NA</div>
<div id="second">NA</div>
</div>
</div>
</div>
Setelah itu kita edit dan tambahkan gambar menggunakan CSS. Copy kode CSSnya di bawah ini:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.container
{
position: relative;
width: 100%;
height: 100vh;
background: #ff4e2b;
display: flex;
}
.container .imgBx
{
position: relative;
width: 450px;
height: 100%;
background: url("https://i.ibb.co/4RCthxS/img.jpg");
background-size: cover;
}
.container .countdownBx
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: calc(100% - 450px);
}
.container .countdownBx h2
{
text-align: center;
font-size: 1.5em;
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 500;
line-height: 4em;
}
.container .countdownBx h2 span
{
font-size: 6em;
font-weight: 700;
}
.container .countdownBx h2 span i
{
font-style: initial;
color: #ff0;
}
.container .countdownBx .countdown
{
margin-top: 30px;
background: rgba(0, 0, 0, 0.1);
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.container .countdownBx .countdown div
{
position: relative;
width: 100px;
text-align: center;
color: #fff;
font-size: 2.5em;
font-weight: 500;
margin: 0 15px;
margin-top: -25px;
}
.container .countdownBx .countdown div::before
{
content: 'text';
position: absolute;
bottom: -30px;
left: 0;
height: 35px;
width: 100%;
height: 35px;
color: #fff;
font-size: 0.35em;
font-weight: 500;
line-height: 35px;
letter-spacing: 1px;
text-transform: uppercase;
}
.container .countdownBx .countdown div#day:before
{
content: 'days';
}
.container .countdownBx .countdown div#hour:before
{
content: 'hours';
}
.container .countdownBx .countdown div#minute:before
{
content: 'minutes';
}
.container .countdownBx .countdown div#second:before
{
content: 'seconds';
}
.container .countdownBx .countdown div#second, .container .countdownBx .countdown div#second:before
{
color: #ff0;
}
h3
{
color: white;
opacity: 0.3;
margin-top: 2px;
font-size: 15px;
}
@media(max-width:991px)
{
.container .imgBx
{
display: none;
}
.container .countdownBx
{
width: 100%;
}
}
@media(max-width:600px)
{
.container .countdownBx h2
{
font-size: 1.1em;
}
.container .countdownBx .countdown
{
height: 100px;
}
.container .countdownBx .countdown div
{
width: 80px;
font-size: 2em;
margin: 0;
margin-top: -25px;
}
}
Perlu diperhatikan, pada bagian
.container .imgBx
{
position: relative;
width: 450px;
height: 100%;
background: url("https://i.ibb.co/4RCthxS/img.jpg");
background-size: cover;
}
background: url() kalian isi dengan nama file gambar atau tempat dimana kalian menyimpan gambar tersebut. background: url("nama file/lokasi file").
Langkah selanjutnya yaitu menambahkan kode JavaScript untuk membuat hitung mundur. Metode yang saya gunakan untuk menambahkan JavaScript ke HTML menggunakan internal JavaScript yaitu menuliskan kode JavaScript langsung pada file HTML. Kalian bebas bisa menggunakan eksternal JavaScript ataupun internal JavaScript sesuai keinginan masing-masing. Untuk penulisaan elemen JavaScript kita bisa menuliskan di tag head tepatnya pada tag title atau bisa juga kita tuliskan di akhir sebelum tag body. Namun saya lebih sering menuliskan elemen JavaScript di akhir tag body dan saya saranin juga lebih baik menuliskan elemen JavaScript di akhir tag body. Mengapa? Supaya seluruh elemen HTML bisa diload dulu oleh memori setelah itu kita bisa jalankan elemen JavaScriptnyanya.
Silahkan copy kode JavaScript di bawah untuk memulai hitung mundurnya.
<script type="text/javascript">
const countDate = new Date('January 01, 2022 00:00:00').getTime();
function newYear(){
const now = new Date().getTime();
gap = countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const d = Math.floor(gap / (day));
const h = Math.floor((gap % (day)) / (hour));
const m = Math.floor((gap % (hour)) / (minute));
const s = Math.floor((gap % (minute)) / (second));
document.getElementById('day').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
}
setInterval(function(){
newYear();
})
</script>
</body>
</html>
Jika sudah dicopy lalu paste pada text editor dan save kemudian buka filenya pada browser dan liat hitung mundurnya sudah berjalan.
Jika kalian ingin mengubah hitung mundurnya ke tanggal tertentu kalian bisa ubah pada bagian
const countDate = new Date('January 01, 2022 00:00:00').getTime();
Pada bagian ('January 01, 2022 00:00:00') kalian ganti dengan tanggal, tahun, jam, menit dan detik yang kalian inginkan. Misalnya ingin diganti pada tanggal 1 Agustus 2021 maka penulisannya ('August 01, 2021 00:00:00'). Sekian sedikit informasi dari saya, jika ada yang ingin ditanyakan langsung saja ke kolom komentar. Terimakasih!
0 Response to "Membuat Countdown (Hitung Mundur) Menggunakan JavaScript"
Posting Komentar