한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
css속성 검색하기
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</header>
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">자바스크립트</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>CSS속성 검색하기</h3>
<h4>indexOf()/ search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">
</div>
<div class="search__info">
<div>
CSS속성 갯수 : <span></span>개
</div>
</div>
<div class="search__list">
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:esansi@naver.com">esansi@naver.com</a></footer>
</footer>
<script>
//선택자
const searchBox = document.querySelector(".search__box input")
const searchList = document.querySelectorAll(".search__list li")
searchList
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el=> {
// const cssName = el.getAnimations("data-name")
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//데이터가 있을 때
el.classList.add("hide")
} else {
//데이터가 없을 때
el.classList.remove("hide")
}
})
});
const searchInfo= document.querySelector(".search__info span")
searchInfo.innerHTML = searchList.length
</script>
</body>
</html>사용자의 정보를 받기 위해 input박스를 사용
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">안에 저장한 데이터의 갯수를 찾기 위해 span의 선택자를 만들고 searchList안에 있는 데이터이기 때문에
searchList에 length를 사용해 갯 수를 구했다.
<div class="search__info">
CSS속성 갯수 : <span></span>개
</div>
const searchInfo= document.querySelector(".search__info span")
searchInfo.innerHTML = searchList.lengthsearchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el=> {
// const cssName = el.getAnimations("data-name")
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//데이터가 있을 때
el.classList.add("hide")
} else {
//데이터가 없을 때
el.classList.remove("hide")
}
})
});오늘은 keyup을 사용해 보았습니다.
keyup은 이벤트는 사용자가 키보드에서 어떤 키를 눌렀다가 뗄 때 발생하는 이벤트입니다. 이벤트 리스너를 등록하여 사용자가 특정 키를 눌렀을 때 원하는 동작을 수행할 수 있습니다.
keyup으로 사용자가 정답을 고쳐 쓸때마다 바뀌는 효과를 준다.
사용자의 정답을 indexOf 를 통해 저장되어있는 정답과 비교해 시작점인 앞글자를 입력하면 indexOf 를 통해 0이 나와 0은 false이기에 else의 el.classList.remove가 적용되어 hide를 삭제한다. css에 hide를 display: none으로 설정해놨기 때문에 눈에 보이지 않다 remove가 적용되어 hide를 지워져 그 값들만 나타나게 된다.
indexOf
중요
문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
대소문자를 구별합니다.
리스트 총 갯수 구하기
총 몇개 있는지 출력한것을 span에 넣어주기 위해
선택자를
const searchInfo= document.querySelector(".search__info span")
로 설정합니다.
searchInfo.innerHTML = searchList.length
리스트 수는 length로 알수있기에 선택자.innerHTML(출력) = searchList(리스트).length(수 구하기)로
리스트가 총 몇개인지 출력하였다.