열 번째 문제: To-Do List 앱 만들기

요구사항

HTML 구조:
- 할 일 입력 필드와 버튼을 포함하는 <form id="todo-form">을 만듭니다.
  - <input type="text" id="todo-input"> (할 일 입력)
  - <button type="submit">추가</button>
- 할 일 목록이 표시될 빈 <ul> 태그 (id="todo-list")를 만듭니다.
CSS 스타일 (선택 사항):
- 추가된 <li> 항목에 마우스 오버 시 배경색이 바뀌는 등 간단한 스타일을 적용하여 시각적으로 구분합니다.
JavaScript 기능 (가장 중요):
- 할 일 추가 기능:
  - 폼 (#todo-form)에 submit 이벤트 리스너를 추가합니다.
  - 이벤트 발생 시 페이지 새로고침을 막고 (힌트: event.preventDefault()) 입력된 텍스트를 가져옵니다.
  - 새로운 <li> 요소를 생성하고, 그 안에 입력된 텍스트와 삭제 버튼 (<button class="delete-btn">삭제</button>)을 포함시킵니다.
  - 새로운 <li> 요소를 #todo-list에 추가합니다.
  - 입력 필드 (#todo-input)를 비웁니다.
- 할 일 삭제 기능 (이벤트 위임 사용):
  - 목록 컨테이너 (#todo-list)에 클릭 이벤트 리스너를 하나만 추가합니다. (새로 생성되는 모든 삭제 버튼에 개별 리스너를 추가하지 않음)
  - 클릭된 요소가 .delete-btn 클래스를 가진 버튼인지 확인합니다.
  - 버튼이 맞다면, 해당 버튼의 가장 가까운 부모 <li> 요소를 DOM에서 제거합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .todo {
            border: 4px solid #000;
        }
        .todo__controls {
            display: flex;
            align-items: center;
            column-gap: 5px;
            padding: 15px;
            border-bottom: 1px solid #333;
        }
        .todo__controls .todo__input {
            height: 25px;
            border: 1px solid #000;
            border-radius: 0;
        }
        .todo__controls .todo__add-btn {
            height: 25px;
            background-color: #333;
            cursor: pointer;
            color: #fff;
        }
        .todo__list {
            margin: 0;
            list-style-type: circle;
            color: #777
        }
        .todo__item {
            padding: 10px 0;
        }
        .todo__item:hover {
            color: #000;
            text-decoration: line-through;
        }
        .todo__item .todo__del-btn {
            margin-left: 5px;
            background-color: tomato;
            border: 1px solid tomato;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="" id="todo-form" class="todo">
        <div class="todo__controls">
            <label class="todo__label">할 일 입력 :
                <input type="text" name="" id="todo-input" class="todo__input">
            </label>
            <button type="submit" class="todo__add-btn">추가</button>
        </div>
        <ul id="todo-list" class="todo__list"></ul>
    </form>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const todoForm = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');


            todoForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                const taskText = todoInput.value.trim();
                
                if (taskText === '') {
                    alert('할 일을 입력해주세요!');
                    return;
                }

                const newItem = `
                    <li class="todo__item">
                        ${taskText}
                        <button type="button" class="todo__del-btn">삭제</button>
                    </li>
                `;

                todoList.insertAdjacentHTML('beforeend', newItem);

                todoInput.value = '';

            })
            todoList.addEventListener('click', (e) => {
                if (e.target.classList.contains('todo__del-btn')) {
                    const listItemToDelete = e.target.closest('li');
    
                    listItemToDelete.remove();
                }
            });
        })
    </script>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

열두 번째 문제: 비동기 작업 시뮬레이션 및 콜백 함수 이해 (0)	2025.10.27
열한 번째 문제: 배열 및 함수를 활용한 장바구니 계산기 (0)	2025.10.27
아홉 번째 문제: Light/Dark 모드 토글 버튼 만들기 (0)	2025.10.27
여덟 번째 문제: Grid Area를 활용한 블로그 레이아웃 만들기 (0)	2025.10.27
일곱 번째 문제: Grid와 Flexbox를 혼합한 대시보드 레이아웃 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바