Exercise-Hover-String-Components.html

<DOCTYPE! html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rest Parameter</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1 class="nama">GUNDALA</h1>

<script src="script.js"></script>
</body>
</html>

//CSS STYLE (file: style.css)
body {background-color: salmon;}

.nama {
  font-family: arial;
  font-size: 50px;
  color: white;
}

.nama span {
    display: inline-block;
    transition: .3s;
    cursor: pointer  
}
.nama span:hover {
  transform: scale(1.5) translateY(-2px);
}

//JAVASCRIPT (file: script.js)

//merubah string menjadi single component
//setiap huruf pada string “GUNDALA” terpisah menjadi span2 individual 
let nama = document.querySelector('.nama');
let huruf = [...nama.textContent].map( h => `<span>${h}</span>`).join('');

console.log(huruf);
nama.innerHTML = huruf;

//akan tampak menjadi seperti ini jika kita inspect:
<h1 class=”nama”>
 <span>G</span>
 <span>U</span>
 <span>N</span>
 <span>D</span>
 <span>A</span>
 <span>L</span>
 <span>A</span>
</h1>