반응형 투두 리스트 앱 개발

Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.

HTML5, CSS3 및 바닐라 JavaScript를 사용하여 반응형 투두(할 일) 앱을 만드세요. CSS Grid/Flexbox를 사용하고 직관적인 컨트롤을 갖춘 현대적이고 깔끔한 UI를 구현해야 합니다. 부드러운 애니메이션과 함께 완전한 CRUD 기능(작업 추가/수정/삭제/완료)을 구현하세요. 색상 코딩 및 우선순위 수준(낮음/중간/높음)이 포함된 작업 분류를 포함하세요. 날짜 선택기 구성 요소 및 알림 알림과 함께 마감일을 추가하세요. 세션 간 데이터 보존을 위해 localStorage를 사용하세요. 상태, 범주 및 날짜 범위에 대한 필터가 포함된 검색 기능을 구현하세요. HTML5 드래그 앤 드롭 API를 사용하여 작업의 드래그 앤 드롭 순서 재지정을 추가하세요. 미디어 쿼리를 사용하여 적절한 중단점으로 디자인이 완전히 반응형인지 확인하세요. 사용자 시스템 기본 설정을 준수하는 다크/라이트 테마 토글을 추가하세요. 더 나은 UX를 위해 미묘한 마이크로 인터랙션과 전환 효과를 추가하세요.

• 활용React나 Vue 같은 프레임워크 버전으로 변환해달라고 요청할 수 있습니다.
• 활용Tailwind CSS 등 선호하는 CSS 라이브러리를 추가하여 지정해도 좋습니다.

출처 · prompts.chat · Todo List — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.