[miniProjects] 39_Password Strength Background

39_Password Strength Background

💻주제 : 로그인 양식, 암호의 강도에 따라 배경 이미지의 흐림도가 결정됨.

• https://tailwindcss.com/docs/installation/play-cdn

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css" integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w==" crossorigin="anonymous"/>

✨JS

password.addEventListener('input', (e) => {
  const input = e.target.value
  const length = input.length
  const blurValue = 20-length*2
  background.style.filter = `blur(${blurValue}px)`
})

filter: blur(20px)으로 기본값이 설정되었기 때문에
백틱 기호를 사용해 filter를 변경할 수 있도록 함.