# miniprojects

JS Mini projects - Increment Counter
couner클래스들을 querySelectorAll로 가져오기1번의 가져온 counters들을 forEach해서 각각 innerText 넣어주기updateCounter() 함수 생성3-1. update해주는 target을 잡아주기3-2. counter.innerText

JS Mini projects - Toggle Component
toggle 버튼 가져오기Nodelist 를 통해서 Loop 생성 (forEach)click이벤트 생성Toggle the active class on the parent node(.parentNode& classList.toggle())FAQ 작성 뿐만아니라, 토글은

JS Mini projects - Event Key code
div처음 js 하기전 css하기위해이렇게, 화면에 먼저 그려놓고 css 작업후 지우기!먼저 키보드 이벤트 값이 콘솔에 어떻게 찍히는지 확인하기key, code, keyCode 값 확인 후 innerHTML 입력완전쉽다! 어떤 프로젝트에서든 잘 사용될 것같다. 역시 모

JS Mini projects - Blurry Loading
문제발생 : blur(70px)시 여백 하얗게 보임blur(70px)시 여백 하얗게 보이는 걸 해결!로딩 화면에서 유용하게 사용될것같다.데이터가 받아와지는 속도와는 어떻게 매칭하지? 이것이 관건일것같다!

JS Mini projects - Rotating Navigation Animation
왼쪽 상단 nav 클릭시 -> 클래스 추가 및 삭제 -> hide showcontainer 와 nav 로 구성,container에 배경색을 하얀색으로 해주고, body 배경색을 회색으로 해놓음 container에 show-nav시 회전효과를 줘서 가려진 nav바를 보여

JS Mini projects - Music Player
뮤직플레이어! 재생바와, 전으로 후로 어떻게 구현하지 ??https://www.w3schools.com/tags/ref_av_dom.aspHTML 요소로만 !

JS Mini projects - DarkMode
강의에서는 웹페이지 한페이지를 만들었지만, 정말로 필요한 토글을 이용한 다크모드 기능구현만 해보았다!DarkMode의 핵심인 toggle-switch부분과 main내용 부분으로 나누어 작성하였다.블로그에 게시는 안되었지만, 이미지를 가져올 때 또한 다크모드를 고려줄수

JS Mini projects - Picture in Picture(PIP)
🫢 구현 전 생각 API를 이용하는것같은데... 감이오지않는다...! 미디어 스트림을 선택하고 비디오 요소로 전달한 다음 재생하기 selectMediaStream()버튼 클릭이벤트PIP는 라이브러리를 이용해야하나? 라는 생각을 했는데, 내장함수로 구현 가능한점이 새

JS Mini projects - Infinity Scroll
무한스크롤이면 dom을 조작하겠고, 스크롤이 가장 마지막을 가르켰을때, 증가?시키게 하면 되지않을까? 뭘 증가시키지?? 구체적으로 뭘?!https://loading.io/https://unsplash.com/documentation🤔 오늘의 궁금점한

JS Mini projects - Quote Generator
배경이미지 Url을 svg패턴으로 가져올 수 있다! 색상, 투명도 변경가능!유용하게 쓰일 것 같다!https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intentw

JS Mini projects - Progress Steps
💡 구현 전 생각해보기1️⃣ 1,2,3,4를 나타낼 원 div로 만들기, Prev, Next버튼 만들기2️⃣ ::active로 ---그어주기3️⃣ Prev 클릭시 이전단계로, Next 클릭시 다음단계로

JS Mini projects - Expanding Card
# 💡 구현 전 생각해보기 1️⃣ card 5개, container1개 필요하지않을까? -> 🙆🏻♀️ 2️⃣ 'click'시 class 생성해서 css 변경하면되지않을까? 🙆🏻♀️ 처음 생각하지 못한 부분 3️⃣ class 생성 후 기존의 active였던