Skip to content
UX/UI Engineer Roadmap

Workshop: Todo List + Dark Mode Toggle

Project Brief

Section titled “Project Brief”

Todo List + Dark Mode Toggle

สร้าง Todo App ที่เพิ่ม/ลบ/mark complete ได้ พร้อม Dark/Light toggle และบันทึกข้อมูลด้วย localStorage — ใช้ Vanilla JS เท่านั้น ไม่ใช้ framework
  • เพิ่ม todo ใหม่ได้ (กด Enter หรือกดปุ่ม Add)
  • ลบ todo ได้
  • Mark todo เป็น completed ได้ (toggle checkbox)
  • Dark / Light mode toggle
  • บันทึก todos และ theme ใน localStorage (รีเฟรชแล้วข้อมูลยังอยู่)
  • ใช้ Vanilla JS เท่านั้น — ไม่ใช้ React, Vue, หรือ library อื่น
What you'll build Preview
My Todos
Add a new todo...
Add
✓ Buy groceries
Read Chapter 2 guide
✓ Setup project folder
Build dark mode toggle
2 items left

Project Structure

Section titled “Project Structure”
  • Directorytodo-app/
    • index.html โครงสร้าง HTML
    • style.css ตกแต่ง style + dark mode
    • script.js JavaScript logic ทั้งหมด

Step-by-Step Instructions

Section titled “Step-by-Step Instructions”

  1. สร้าง Project Folder

    เปิด Terminal แล้วสร้างโฟลเดอร์โปรเจกต์:

    Terminal window
    mkdir todo-app
    cd todo-app
    touch index.html style.css script.js
    code .

  2. เขียน HTML Structure

    สร้างโครงสร้างหน้าเว็บใน index.html:

    • Header พร้อมชื่อ app และปุ่ม theme toggle
    • Form สำหรับเพิ่ม todo (input + button)
    • List container สำหรับแสดง todos
    • Footer แสดงจำนวน todo ที่เหลือ

  3. เขียน CSS Base Styles

    ตกแต่ง style ใน style.css:

    • ใช้ CSS Variables (--bg, --text, --card-bg ฯลฯ) สำหรับ theme
    • Style สำหรับ form input และ button
    • Style สำหรับ todo items (ปกติ + completed)
    • Transition สำหรับ smooth theme switching

  4. เพิ่ม Dark Mode CSS

    เพิ่ม CSS สำหรับ dark theme:

    • สร้าง body.dark selector ที่เปลี่ยนค่า CSS Variables
    • เพิ่ม transition ให้ background และ color เปลี่ยนอย่าง smooth

  5. เขียน JavaScript — State & Render

    เริ่มเขียน script.js ตาม pattern: State → Render → Events

    script.js — โครงสร้างเริ่มต้น
    // === State ===
    let todos = [];
    

    // === Render ===
    const render = () => {
      // 1. เคลียร์ list
      // 2. วนลูป todos แล้วสร้าง li element
      // 3. อัปเดตจำนวนที่เหลือ
    };
    

    // === Events ===
    // form submit → เพิ่ม todo → render
    // checkbox change → toggle completed → render
    // delete button click → ลบ todo → render
    

    render();

  6. เพิ่ม localStorage

    บันทึก todos และ theme ทุกครั้งที่ state เปลี่ยน:

    • save() — เรียกหลังทุก state change
    • โหลดข้อมูลจาก localStorage ตอนเริ่มต้น
    • ใช้ try/catch ป้องกัน JSON.parse error

  7. เพิ่ม Theme Toggle

    สร้างปุ่ม toggle theme:

    • อ่าน theme จาก localStorage ตอนเริ่มต้น
    • กดปุ่มแล้ว toggle class dark บน body
    • บันทึก theme ลง localStorage

เมื่อทำเสร็จแล้ว ไปดูเฉลยได้ที่ Solution เพื่อเทียบกับงานของคุณ