Tips And Tricks Web Design #01 Navbar Animation

Aditya Muhamad Putra P. — Wed, 29 Dec 2021 02:35:38 +0000

Introduction📝
Halo semuanya, kembali lagi dengan saya untuk membahas seputar pemograman web🤓

Pada kesempatan kali ini, saya akan membagikan sedikit tips dan trik web design yaitu animasi pada navigasi menu.

Langsung saja kita mulai...

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 styling dan memberikan event pada menu yang di klik.

<!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>Tips And Tricks Web Design #01 Navbar Animation</title>
</head>
<body>
  <div class="container">
    <div class="navbar__menu">
      <div class="navbar__button">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</body>
</html>

Oke kerangka HTML nya sudah dibuat kita lanjut untuk styling menggunakan CSS.

Step 2 : Styling menggunakan CSS😎

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items-center;
}

.navbar__menu {
  width: 85px;
  height: 85px;
  background: transparent;
  position: relative;
  cursor: pointer;
  margin-top: 5em;
}

.navbar__button {
  margin-top: 2.5em
}

.navbar__button span {
  width: 85px;
  height: 10px;
  border-radius: 3px;
  position: absolute;
}

.navbar__button span:nth-child(1),
.navbar__button span:nth-child(2),
.navbar__button span:nth-child(3){
  background-color: #282A2B;
  transition: all .3s ease-in-out;
}

.navbar__button span:nth-child(1) {
  transform: translateY(-23px);
}

.navbar__button span:nth-child(3) {
  transform: translateY(23px);
}

.navbar__button.open span:nth-child(1) {
  transform: rotate(45deg);
}

.navbar__button.open span:nth-child(2) {
  background: transparent;
}

.navbar__button.open span:nth-child(3) {
  transform: rotate(-45deg);
}

Step 3 : Javascript DOM😊

Oke, selanjutnya kita buat supaya dapat terlihat animasinya kita gunakan Javascript DOM.

const navbarMenu = document.querySelector('.navbar__menu')
const navbarButton = document.querySelector('.navbar__button')

let isOpen = false;

navbarMenu.addEventListener('click', () => {
  if(!isOpen) {
    navbarButton.classList.add('open')
    isOpen = true
  } else {
    navbarButton.classList.remove('open')
    isOpen = false
  }
})

Untuk hasilnya kalian bisa lihat disini

Congratulations👏🎉

Terima kasih kepada kalian semua karena sudah mengikuti tips dan trik ini dari awal sampai akhir, saya harap kalian mengikuti dengan benar - benar (tidak copy paste). Selamat juga untuk kalian jika tips dan trik ini berhasil😉. See you😚👋

Simple Countdown Using Vanilla Javascript

Aditya Muhamad Putra P. — Tue, 26 Oct 2021 09:09:03 +0000

Introduction📝

Halo semuanya, perkenalkan nama saya adalah Aditya Muhamad Putra P.

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>

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';
        }

Hasilnya seperti di gambar berikut.

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;
}

Maka hasilnya seperti gambar di bawah ini.

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😚👋

DEV Community: Aditya Muhamad Putra P.

Tips And Tricks Web Design #01 Navbar Animation

Tools & Prerequisites🛠️

Let's Code!✍️

Step 1 : Mulai dengan kerangka HTML🤓

Step 2 : Styling menggunakan CSS😎

Step 3 : Javascript DOM😊

Congratulations👏🎉

Simple Countdown Using Vanilla Javascript

Introduction📝

Tools & Prerequisites🛠️

Let's Code!✍️

Step 1 : Mulai dengan kerangka HTML🤓

Step 2 : Javascript DOM😊

Step 3 : Styling menggunakan CSS😎

Congratulations👏🎉