[Study] 개발 공부/[Project] 바닐라JS3 [Vanilla-JS] 고양이 사진 검색 사이트😺: 상세 기능 구현 시작 전, 문제를 보고 기능 요구사항을 정리해보자 1. HTML, CSS더보기더보기시맨틱 태그 사용반응형 2. 다크모드 더보기더보기체크박스OS 반영3. 이미지 모달더보기더보기[필수] 닫기 기능/api/cats/:id반응형[추가] fade in/out4. 검색더보기더보기[필수] 검색 결과가 없을 때 예외사항 UI[필수] 랜덤 버튼 추가(/api/cats/random50)[필수] 로딩 UI 추가input el 수정최근 검색 키워드새로고침 시 마지막 검색 결과 유지lazy load스크롤 페이징각 아이템 클릭 이벤트를 Event Delegation 기법 사용하여 수정[추가] 마우스 오버 시 고양이 이름5. 랜덤 고양이 배너 섹션 추가 더보기더보기/api/cats/random505개만 노출하며 좌, 우 슬라이.. 2025. 3. 13. [Vanilla-JS] 고양이 사진 검색 사이트😺 프로그래머스 과제 테스트 2020 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 고양이 사진 검색 사이트 과제를 직접 풀어보았습니다.본 과제는 라이브러리나 프레임워크 없이 Vanilla JS(ES6)로만 구현하였으며, 기능 요구 사항의 풀이 과정을 기록하였습니다.저장소: https://github.com/petitesize/search-cat 본 포스팅에서는 과제 문제를 풀이하기 위해 추가적인 공부가 필요한 큰 개념 위주로 정리하였습니다. 세부 문제 풀이는 복기를 목적으로 다음 포스팅에 정리하기로 하고,시작! 1. 시맨틱한 태그 이용하기출처:[HTML] 과 의 차이 먼저 시맨틱한 태그를 이용하기 위해, header 태그에 다크모드와 검색창을 넣어주었다.그 외로는, section, article.. 2025. 3. 10. dataset 사용하여 todoList 삭제 구현 let todoList = [];function addTodo() { // 여기에 기능을 구현하세요. const newTodoInputEl = document.getElementById("newTodo"); todoList.push(newTodoInputEl.value); renderTodos();}function deleteTodo(index) { // 여기에 기능을 구현하세요. todoList.splice(index,1); renderTodos();}function renderTodos() { // 여기에 기능을 구현하세요. const todoUlEl = document.getElementById("todoList"); todoUlEl.innerHTML= ""; todoUlEl.i.. 2024. 12. 27. 이전 1 다음
