Vanilla JS 30

TILjavascriptjavascipt30

30 Day Vanilla JS Coding Challenge Study - 6주차

  • LocalStorage and Event Delegation
  • CSS Text Shadow Mouse Move Effect
  • Sorting Band Names without articles

15. LocalStorage and Event Delegation

영상: https://youtu.be/YL1F4dCUlLc

로컬 스토리지와 이벤트 위임

리스트의 <ul> 태그에 이벤트를 등록하여 자식요소인 다수의 <li> 태그에 이벤트를 한번에 등록한다.

이외에 특별한 부분은 존재하지 않았으며

<form> 태그에 당연히 e.preventDefault()를 사용한 점과
reset()을 활용한 부분을 다시 한번 상기시킬 수 있었다.

16. CSS Text Shadow Mouse Move Effect

영상: https://youtu.be/zaz9gLI-Xac

Text Shadow 효과 활용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const { offsetWidth: width, offsetHeight: height } = hero;
let { offsetX: x, offsetY: y } = e;

if (this !== e.target) {
  x = x + e.target.offsetLeft;
  y = y + e.target.offsetTop;
}

const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));

text.style.textShadow = `
  ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
  ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
  ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
  ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
`;

mousemove 이벤트 타입을 사용하여 텍스트의 `textShadow 스타일링을 수정한다.

17. Sorting Band Names without articles

영상: https://youtu.be/PEEo-2mRQ7A

1
2
3
4
5
6
7
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, '').trim();
}

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

sort() 메서드를 활용한 정렬과 정규표현식 활용 방법으로 딱히 특별한 내용은 없었다.

Share Comments