js challenge day 22

Following Along Nav

 

Code

  <script>
    const triggers = document.querySelectorAll('a');
    const highlight = document.createElement('span');
    highlight.classList.add('highlight');
    document.body.appendChild(highlight);

    const highlightLink = (e) => {
      const linkCoords = e.target.getBoundingClientRect();
      console.log(linkCoords)
      const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top: linkCoords.top + window.scrollY,
        left: linkCoords.left + window.scrollX
      };
      highlight.style.width = `${coords.width}px`
      highlight.style.height = `${coords.height}px`
      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    }
    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
  </script>

 

배운 점 & 느낀 점

글에서 특정 글에 마우스를 가져다 대면 css를 입혀주는 과제였습니다.

이 과제를 하면서 배운 점은 2가지 입니다.

1. getBoundingClientRect()는 요소의 크기를 가져오는데 매우 유용한 메소드 입니다.

2. append와 appendChild는 모두 DOM에서 사용되는 메소드인데, append는 appendChild와 다르게, 여러요소를 한번에 삽입할 수 있고 DomString을 추가할 수 도 있습니다.

ex)

const name = 'John';
const age = 30;
document.body.append(`My name is ${name} and I am ${age} years old.`);