간단 투두(할일) 앱 단계별 만들기(쉬운 영어 설명)

python -m http.server

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>To‑Do App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app" id="app">
      <h1 class="app__title" id="appTitle">My To‑Do List</h1>

      <form class="task-form" id="taskForm">
        <label class="task-form__label" for="taskInput">New task</label>
        <div =>
          
          
            Add

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

saveTasks(tasks);
renderTasks(tasks);

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

const text = input.value.trim();
addButton.disabled = text === "";

console.log("Adding:", text);
console.log("Current tasks:", tasks);

간단 투두(할일) 앱 단계별 만들기(쉬운 영어 설명) | Koder.ai

우리가 만드는 것(그리고 배울 내용)

목표(완성된 앱이 할 일)

배울 내용(쉬운 말로)

시작 전에 필요한 것

1단계: 앱 목표와 기능 정하기

앱의 한 가지 목적을 정하세요

필수 vs. 있어도 좋은 것

화면을 평범한 말로 설명하세요

"완료"가 무엇을 의미하는지 정의하세요

2단계: 프로젝트 파일 설정

1) 프로젝트 폴더 만들기

2) 편집기와 브라우저에서 폴더 열기

3) 변경 사항 확인 방법

선택 사항: 간단한 로컬 서버 사용(권장 사항)

3단계: 페이지 구조 만들기(HTML)

필요한 최소 레이아웃

아래 내용을 index.html에 붙여넣으세요

4단계: 보기 좋게 다듬기(CSS)

단순한 가운데 박스부터 시작

작업을 한눈에 보기 쉽게 만들기

"완료" 상태를 명확히 표시하기

버튼 스타일을 통일하세요

5단계: 작업 추가하기(JavaScript 기초)

버튼과 Enter 키 연결하기

이 코드가 하는 일(쉬운 설명)

6단계: 완료 표시와 삭제 기능 추가

작업을 단순 데이터로 저장하기

완료 토글과 삭제 버튼 추가하기

7단계: 작업을 저장해 유지하기(localStorage)

localStorage = 브라우저 안에 있는 작은 "저장 상자"

1) 변경이 있을 때마다 저장하기

2) 페이지 시작 시 로드하고 렌더링하기

8단계: 테스트하고 흔한 버그 고치기

빠른 테스트(60초)

초보자 앱을 망가뜨리는 엣지 케이스 시도하기

클릭이 먹히지 않을 때 빠른 점검 목록

콘솔을 사용해 실제 상황 확인하기

9단계: 사용성 높이기(접근성 + 모바일)

모바일에서 누르기 쉽게 만들기

레이블과 ARIA 추가(무엇이고 왜 필요한가)

키보드 지원: Tab + Enter

읽기 쉬움: 대비와 글꼴 크기

10단계: 코드 정리와 구성

간단한 폴더 구조

JavaScript를 읽기 쉽게 만들기

간단한 README 추가

프로젝트 백업

11단계: 앱 배포하고 공유하기

옵션 1: GitHub Pages(정적 사이트에 적합)

옵션 2: Netlify 또는 Vercel(간단한 드래그 앤 드롭)

공유 전 빠른 체크리스트

다음 단계: 시도해볼 만한 간단한 확장 기능들

1) 작업 텍스트 편집하기

2) 필터: 전체 / 진행중 / 완료

3) 마감일 또는 간단한 카테고리

4) 나중에: localStorage에서 백엔드로 옮기기

5) 좋은 다음 초보자 프로젝트

아래 내용을 `index.html`에 붙여넣으세요