DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Simple Countdown Using Vanilla Javascript
Aditya Muhamad Putra P.
Aditya Muhamad Putra P.

Posted on

Simple Countdown Using Vanilla Javascript

Introduction๐Ÿ“

Halo semuanya, perkenalkan nama saya adalah Aditya Muhamad Putra P., sekarang saya bekerja sebagai developer di salah satu startup di Indonesia, ini merupakan artikel pertama saya dan pastinya saya akan luangkan waktu untuk membuat artikel seputar pemograman web ๐Ÿค“

Pada kesempatan kali ini, saya akan membagikan sedikit tips dan tutorial membuat countdown sederhana menggunakan Vanilla Javascript.

Tools & Prerequisites๐Ÿ› ๏ธ

Untuk mengikuti tutorial ini, terdapat beberapa tools yang digunakan serta prerequisites seminimal - minimalnya yang kalian harus bisa yaitu :

  • Text Editor : Sublime Text, VS Code ataupun sejenisnya.
  • Browser : Chrome, Firefox (harus support CSS3) dan sejenisnya
  • HTML Dasar
  • CSS Dasar
  • Javascript DOM

Let's Code!โœ๏ธ

Step 1 : Mulai dengan kerangka HTML๐Ÿค“

Pertama - tama kita harus membuat kerangka menggunakan HTML dulu agar nanti bisa kita manipulasi menggunakan Javascript DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="countdown-text">
            <h1>Simple Countdown Using Vanilla Javascript</h1>
        </div>
        <div class="countdown">
            <div class="countdown-box">
                <p class="countdown-days">0</p>
                <span>Hari</span>
            </div>
            <div class="countdown-box">
                <p class="countdown-hours">0</p>
                <span>Jam</span>
            </div>
            <div class="countdown-box">
                <p class="countdown-minutes">0</p>
                <span>Menit</span>
            </div>
            <div class="countdown-box">
                <p class="countdown-seconds">0</p>
                <span>Detik</span>
            </div>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Cukup simple bukan? Itulah mengapa perlu HTML Dasar untuk mengikuti tutorial ini. Oke, Lanjut๐Ÿ”ฅ

Step 2 : Javascript DOM๐Ÿ˜Š

Oke, selanjutnya kita buat supaya dapat menampilkan waktu hitung mundurnya dengan menggunakan Javascript DOM.

       // dapatkan semua element countdown
        const countdownDays = document.querySelector('.countdown-days')
        const countdownHours = document.querySelector('.countdown-hours')
        const countdownMinutes = document.querySelector('.countdown-minutes')
        const countdownSeconds = document.querySelector('.countdown-seconds')

        // waktu berakhir hitungan mundur
        let timeOut = "2021-10-27 00:00:00"
        // convert untuk mendapatkan nilai detik dengan timestamp waktu timeOut
        let getDeadline = Math.floor(new Date(timeOut).getTime() / 1000)
        // convert untuk mendapatkan nilai detik dengan timestamp sekarang
        let now = Math.floor(Date.now() / 1000)
        // dapatkan selisih detiknya
        let seconds = getDeadline - now

        // jika jumlah selisih detiknya lebih dari 0
        if (seconds > 0) {
            // buat variable untuk mendapatkan rumus jumlah hari dengan membagi dari hasil jumlah detik dalam satu jam dikali dengan jumlah jam perharinya
            let d = Math.floor(seconds / (3600*24));
            // buat variable untuk mendapatkan rumus jumlah jam dengan sisa bagi dari hasil jumlah detik dalam satu jam dikali dengan jumlah jam perharinya dan dibagi jumlah detik dalam satu jam
            let h = Math.floor(seconds % (3600*24) / 3600);
            // buat variable untuk mendapatkan rumus jumlah menit dengan sisa bagi dari jumlah detik dalam satu jam dibagi dengan jumlah menit perjamnya
            let m = Math.floor(seconds % 3600 / 60);
            // buat variable untuk mendapatkan rumus jumlah detik dengan sisa bagi dari hasil jumlah menit perjamnya
            let s = Math.floor(seconds % 60);

            // buat fungsi agar digunakan nanti untuk realtimenya berjalan waktu dan dimana juga terdapat kondisi jika waktu tadi kurang dari 10 lalu
            let setTimeElement = function() {
                let setSecond = s < 10 ? '0' + s : s;
                let setMinute = m < 10 ? '0' + m : m;
                let setHour = h < 10 ? '0' + h : h;
                let setDay = d < 10 ? '0' + d : d;

                // tampilkan kedalam element HTML
                countdownDays.innerHTML = setDay;
                countdownHours.innerHTML = setHour;
                countdownMinutes.innerHTML = setMinute;
                countdownSeconds.innerHTML = setSecond;
            }

            // panggil fungsinya
            setTimeElement();

            // buat fungsi timer dimana ini untuk mengatur berjalannya waktu perdetiknya 
            let timer = setInterval(function() {

                // setiap detik fungsi ini berjalan lakukan decrement 1 kali untuk variable detik
                s--;

                // jika detik sudah ke angka 0
                if (s < 0) {
                    // maka set kembali detik ke 59
                    s = 59;
                    // lalu decrement kembali satu kali untuk variable menit
                    m--;
                    // jika menit sudah ke angka 0 
                    if (m < 0) {
                        // maka set kembali menit ke 59
                        m = 59;
                        // lalu decrement kembali satu kali untuk variable jam
                        h--;
                        // jika jam sudah ke angka 0 
                        if (h < 0) {
                            // maka set kembali jam ke 23
                            h = 23;
                            // lalu decrement kembali satu kali untuk variable hari
                            d--;
                            // jika hari sudah ke angka 0
                            if (d < 0) {
                                // maka hentikan timing nya dengan menggunakan clearInterval()
                                clearInterval(timer);
                            }
                        }
                    }
                }

                setTimeElement();
            // set 1000 yaitu untuk satu detik (1000 ms = 1 s)
            }, 1000);
        } else {
            // jika detik tidak tersisa atau sudah memenuhi hitungan mundur maka tampilkan 00 ke elemen HTML
            countdownDays.innerHTML = '00';
            countdownHours.innerHTML = '00';
            countdownMinutes.innerHTML = '00';
            countdownSeconds.innerHTML = '00';
        }
Enter fullscreen mode Exit fullscreen mode

Hasilnya seperti di gambar berikut.
Hasil gambar 1
Hmmm, kelihatan masih kurang bukannya? Jadi apa selanjutnya? Yups, benar, yaitu styling. Kita styling menggunakan CSS.

Step 3 : Styling menggunakan CSS๐Ÿ˜Ž

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
}

.container {
    max-width: 1140px;
    margin: 10rem auto;
}

.countdown-text {
    text-align: center;
}

.countdown {
    margin: 5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-box {
    width: 100px;
    height: 100px;
    background-color: #FDB400;
    margin: 0 40px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 3px 9px 20px rgba(42, 65, 119, 0.1);
}

.countdown-box > p {
    font-size: 30px;
    font-weight: bold;
}

.countdown-box > span {
    font-size: 20px;
    font-weight: 600;
}
Enter fullscreen mode Exit fullscreen mode

Maka hasilnya seperti gambar di bawah ini.
Hasil gambar 2

Congratulations๐Ÿ‘๐ŸŽ‰

Terima kasih kepada kalian semua karena sudah mengikuti tutorial ini dari awal sampai akhir, saya harap kalian mengikuti dengan benar - benar (tidak copy paste). Selamat juga untuk kalian jika tutorial ini berhasil๐Ÿ˜‰. Sepertinya cukup sampai disini saja๐Ÿ˜ž, eitss, tapi jangan berkecil hati, nanti kita jumpa kembali dengan tutorial atau tips dan trik selanjutnya. See you๐Ÿ˜š๐Ÿ‘‹

Top comments (2)

Collapse
 
edubridgewd profile image
edubridge-wd

Mantap suhu, semangat terus

Collapse
 
adityamputra27 profile image
Aditya Muhamad Putra P. Author • Edited on

Thanks huu...

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›