miniProjects

⭐참고⭐ 1. font awesome 2. 사용자 지정 CSS root로 색을 지정하고 var()로 적용시킬 수 있음. 3. Position 속성 값|의미 -------|------- static|기준없음(배치 불가능, 기본값) relative|요소 자기 자신을 기

01_Expanding Cards 💻 주제 : 카드를 눌렀을 때 접혀져있던 카드가 크게 나타남. classList의 add, remove 기능을 활용해 패널을 active 상태로 만듦. css에서 패널 active를 구현 후 transition으로 유연하게 패널의 크

02_Progress Steps 💻 주제 : Prev와 Next 버튼에 따라 진행 바가 움직임. currentActive라는 변수를 만들고 이 변수가 circles.length(길이 4)보다 작으면 currentActive 가 1이 되고, 크면 currentActive = circles.length로 함. update 함수를 통해 어떤 원이 활성되어야 ...

💻 주제 : 상단 햄버거바를 누르면 화면이 꺾이면서 하단에 내비게이션바가 나타남.classList의 add, remove 기능을 활용해 show-nav 기능을 구현함.

💻 주제 : 돋보기를 누르면 검색 창이 늘어남.토글 메서드를 통해 버튼을 클릭 시 active라는 클래스를 만들거나 제거할 수 있게 함. 토글이란 add(), remove() 메서드를 한 번에 쓸 수 있음. 보통 click 이벤트에 classList를 이용해 togg

💻 주제 : 퍼센트가 100까지 채워지면서 흐릿했던 배경이 점점 선명하게 변함

💻주제 : 화면을 스크롤시 내리는 방향에 따라 content박스가 생기거나 제거됨.scroll 메서드를 사용하여 checkBoxes 함수를 실행함.Element.getBoundingClientRect() 메서드 사용https://developer.mozill

💻 주제 : 반으로 나뉜 화면에서 마우스 이동 시 화면이 커지고, 버튼에 마우스를 올려두면 버튼 색이 변함.mouseenter, mouseleave 메서드를 통해 classList의 add, remove를 실행함.👍🏻 hover 되었을 때 화면 비율을 75%로 지

💻 주제 : 로그인 양식이지만 입력칸에 마우스를 올려두면 글자가 웨이브로 움직임.각각의 글자를 span으로 묶어 개별적으로 움직이게 함.

💻 주제 : 소리 버튼을 누르면 소리가 나옴. 소리가 끝나기 전에 다른 소리 버튼을 누르면 전에 눌렀던 버튼의 소리가 중지됨. sounds라는 배열을 선언하고, 여러 오디오 파일 이름을 포함.sounds.forEach(sound => { ... })을 사용하여 so

💻 주제 : Fetch API를 통해 버튼을 누르면 무작위로 아재개그가 나옴.async & await 비동기처리 ✔️ other ver.비동기 처리는 JavaScript에서 장기 실행 작업이나 네트워크 요청과 같은 작업을 처리할 때 사용된다. 비동기 처리를 통해 장기

💻 주제 : 키보드 키를 눌렀을 때 키 버튼과 키코드를 보여줌.keydown 메서드 사용.window.addEventListener('keydown', (event) => { ... })를 사용하여 창(브라우저)의 키보드 이벤트에 대한 이벤트 리스너를 등록한다. 이

💻 주제 : 접혀있던 질문지를 선택했을 때 카드가 아래로 확장됨.font-awesome을 통해 유니코드로 이모지를 받아옴.querySelectorAll로 토글 버튼 가져오기노드 목록을 이용해 반복문을 통과하고 각각의 토글에는 이벤트를 추가함.(클릭이벤트)부모 클래스

💻 주제 : 입력란에 단어를 입력하면 하단에 태그가 생김. 콤마(,)를 통해 여러 개의 태그를 만들 수 있음.무작위로 하이라이트를 넣을 태그를 고름.classList의 add, remove로 하이라이트를 준다.textarea.focus()를 사용하여 페이지가 로드되면

💻 주제 : 네비게이션 바의 X를 누르면 네비바가 줄어들면서 햄버거 바로 전환된다.rotate를 활용한 css가 많음.toggle 메서드를 이용해 active 클래스를 붙이거나 제거하여 네비 바에 애니메이션을 적용함.

💻 주제 : 숫자 증감 + 반응형 페이지초기 counter 값은 0❗아래 결과 값은 string ${target값}으로 나온다.❗counter 앞에 parseInt나 +기호를 붙이면 number로 type이 바뀐다.c가 target이 되기전에는 counter가 올라가

💻 주제 : 물병을 클릭하면 큰 물병 안에 물이 채워진다.Small 컵을 클릭시 Big 컵에 물이 담긴다.

💻 주제 : API를 활용한 영화 소개 페이지.TMDB의 API를 사용해 영화 제목, 등급, 이미지가 있는 영화 데이터베이스를 받는다.❗ https://www.themoviedb.org/settings/apiUI(HTML, CSS)를 만들고, API 키를 I

💻 주제 : 이미지를 슬라이드 하면 배경화면의 이미지가 함께 변경된다.오른쪽, 왼쪽 버튼에 click 메서드를 추가해 이미지가 반복되도록 함.setBgToBody() 함수를 만들어 해당 슬라이드 이미지가 배경 이미지와 같도록 설정.classList의 add, rem

💻 주제 : 현재시각을 보여주고 시계바늘이 움직이는 시계 + 다크모드x축으로 -50%, y축으로-100% 까지 이동시키고 회전 시킬거임.❗transformElement를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 )transform 내 사용 : tra

💻 주제 : 버튼 클릭시 마우스 포인터에 파급 효과를 줌.

💻 주제 : 이미지를 정사각형 박스에 드래그 앤 드롭을 할 수 있음.draggable: true로 설정해 드래그가 가능하도록 함.웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환될 수 있다.d

💻 주제 : 캔버스 요소를 사용한 드로잉. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_APIcanvas 변수는 document.getElementById('canvas')를 통해 canvas요소를 가져

💻 주제 : 두 개의 삼각형이 돌아가는 로딩화면keyframe을 사용해 정한 너비안에서 삼각형이 돌아가도록 함.https://www.w3schools.com/cssref/css3_pr_animation-keyframes.php 👍🏻rotateA, B 애니

💻 주제 : 카드 로드 전에 로딩 화면 만들기animated 클래스가 붙은 것은 로딩화면임.classList의 add, remove 기능을 활용해 animated 상태로 만듦.

💻 주제 : 양쪽에 이미지와 텍스트가 있음. 화살표를 눌러 이미지와 텍스트를 바꿀 수 있는 페이지화살표에 따라 이미지와 텍스트가 바뀌어야 함.

💻 주제 : 버튼 클릭 시 하단에 알람이 뜨고 일정시간이 지나면 사라짐.messages 배열에는 알람 메시지 내용을, types 배열에는 텍스트 색상을 지정함.random 함수를 만들어 메시지 내용과 텍스트 색상을 랜덤으로 지정함.classList의 add 기능으로

💻 주제 : 깃허브 API로 사용자를 불러와 사용자를 검색해 프로필 데이터를 얻어 카드에 표시함. 또한, 사용자의 최신 리포지토리 5개를 보여줌.

💻 주제 : 이미지 위에서 클릭한 위치에 하트를 생성하고, 클릭 횟수를 세는 기능

💻주제 : 자동 타이핑 효과 (속도조절도 가능)let speed = 300 / speedEl.value애니메이션 속도를 나타내는 변수 speed를 선언하고, speedEl 요소의 값에 따라 초기화한다. speedEl은 input 요소로 사용자가 속도를 선택할 수 있는

💻주제 : 자동 비밀번호 생성기비밀번호 길이대문자 포함소문자 포함숫자 포함기호 포함👍🏻 다섯가지 기능을 활용하여 무작위로 비밀번호가 생성됨.알파벳의 개수는 26라 random \* 26임.97부터 122까지의 수를 생성한다. 이 숫자들은 소문자 알파벳 'a'부터

💻주제 : 체크박스 애니메이션

💻주제 : 마크다운 기능이 있는 메모장메모 추가메모 저장(편집)메모 삭제메모 데이터 로컬 스토리지에 저장하기'add' 버튼의 'click' 이벤트가 발생하면 addNewNote 함수를 호출한다. 기본적으로 빈 텍스트로 호출된다.addNewNote 함수는 노트를 생성하

💻주제 : replay시 3부터 0까지 애니메이션이 나타남.

💻주제 : next, prev 버튼을 활용한 이미지 슬라이더❓reset을 하는 이유이미지 슬라이더는 일정한 간격으로 이미지를 자동으로 전환해주는 기능이 있다. 이를 위해 setInterval() 함수를 사용하여 일정한 시간 간격으로 run() 함수를 호출하고 있다.

💻주제 : 박스에 마우스를 올려놓으면 랜덤 색이 칠해짐.

💻주제 : 포키 API를 사용해 포켓몬 도감 만들기

💻주제 : 모바일 탭바를 클릭시 이미지가 바뀜

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

💻주제 : gif이미지를 보여주는 3d 박스

💻 주제 : 이메일 확인 코드 입력 UI

42_Live User Filter💻 주제 : Me API를 이용하여 사용자 필터 만들기

💻 주제 : 세 가지 선택지 중 하나를 선택해 리뷰를 보내면 감사답장이 나오는 피드백 카드

💻 주제 : 0 ~ 100까지 사용자가 범위 값을 조정할 때마다 "input" 이벤트가 발생하며, 이를 활용하여 레이블의 위치와 내용을 업데이트 함.

💻 주제 : 반응형 네비게이션

💻 주제 : 퀴즈를 푼 후 몇 개를 맞췄는지 보여줌.

💻 주제 : 투두 리스트, 로컬 저장소에 저장왼쪽 클릭 : 완료오른쪽 클릭 : 삭제할 일을 입력하면 배열에 저장된다.