Example-Arrow-Function-Box-Resize.html



<!DOCTYPE html>
<html>
<head>
<style>

* {
margin: 0;
padding: 0;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  margin: 50px auto;
  background-color: blue;
  transition: .3s width,
              .3s height .3s,
              .3s margin-top .3s,
              1s background-color; 
}

.size {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}

.caption {
  background-color: green;
}

</style>
</head>
<body>

<h1>This is a arrow function case</h1>

  <div class="box">
   <p>JTB</>
  </div>

<script>

const box = document.querySelector('.box');
box.addEventListener('click', function () {
 console.log(this); 
     //buka console, klik kotak, maka "this" di sini akan terlihat me-refer pada box, output:
     // <div class="box size"></div>
     // <div class="box size caption"></div>

  this.classList.toggle('size'); 
     // fungsi toggle: jika class 'size' belum ada, maka tambahkan. jika class 'size' sudah ada, maka hilangkan.

  setTimeout( () => {
   this.classList.toggle('caption');
   console.log(this);
     // klik kotak 
     // <div class="box caption"></div>
     // <div class="box"></div>
 },600) 
})

</script>

</body>
</html>