HTML ትምህርት - ክፍል 9 | Mini Project: Todo App

🎯

ምን ምን እንጠቀማለን? // What we use

ክፍል 1-8 የተማርነውን ሁሉ እዚህ project ውስጥ እንጠቀማለን!
This project uses everything from lessons 1-8!

📚

📄 HTML — Structure (form, input, button, ul, li)
🎨 CSS — Style (Flexbox, colors, animations)
⚡ JavaScript — Logic (arrays, functions, DOM, events)
HTML for structure, CSS for beauty, JS for functionality — all together!

📋 Project Steps — እርከን በእርከን:
We'll build the app step by step:

1

HTML Structure — skeleton እንስራ

2

CSS Styling — ቀለም እናሳምር

3

JS — Add Task — task ለመጨምር

4

JS — Complete Task — ✅ ምልክት

5

JS — Delete Task — task ማስወጣት

6

Filter + Stats — ማጣሪያና ስታቲስቲክስ

📄

Step 1 — HTML Structure // አጥንት

index.html

<!DOCTYPE html>
<html lang="am">
<head>
  <meta charset="UTF-8">
  <title></span>የ Task ዝርዝር</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="app">

    <!-- Header -->
    <header>
      <h1>✅ የ Task ዝርዝር</h1>
      <p id="stats">0 tasks</p>
    </header>

    <!-- Input -->
    <div class="input-row">
      <input
        type="text"
        id="taskInput"
        placeholder="አዲስ task ጻፍ..."
      >
      <button onclick="addTask()">+ ጨምር</button>
    </div>

    <!-- Task List -->
    <ul id="taskList"></ul>

  </div>

  <script src="script.js"></script>
</body>
</html>

🎨

Step 2 — CSS Styling // ማስዋብ

style.css

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;
}

.app {
  width: 100%;
  max-width: 500px;
}

header {
  text-align: center;
  margin-bottom: 28px;
}

header h1 {
  font-size: 28px;
  color: #4ade80;
  margin-bottom: 6px;
}

.input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 12px 16px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

button {
  padding: 12px 20px;
  background: #4ade80;
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e293b;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 8px;
  list-style: none;
}

.task-item.done span {
  text-decoration: line-through;
  color: #475569;
}

⚡

Step 3-6 — JavaScript Logic // ሙሉ JS

script.js — ሙሉ ኮድ

// Tasks array — ሁሉም tasks ይቀመጣሉ
let tasks = [];

// Task ለመጨምር
function addTask() {
  const input = document.getElementById("taskInput");
  const text = input.value.trim();

  if (!text) {
    alert("Task ጻፍ!");
    return;
  }

  tasks.push({
    id: Date.now(),
    text: text,
    done: false
  });

  input.value = "";
  renderTasks();
}

// Task ✅ ወይም ❌ ለማድረግ
function toggleTask(id) {
  tasks = tasks.map(function(task) {
    if (task.id === id) {
      task.done = !task.done;
    }
    return task;
  });
  renderTasks();
}

// Task ለማስወጣት
function deleteTask(id) {
  tasks = tasks.filter(function(task) {
    return task.id !== id;
  });
  renderTasks();
}

// List ለማሳየት (Render)
function renderTasks() {
  const list = document.getElementById("taskList");
  const stats = document.getElementById("stats");

  // Stats አዘምን
  const done = tasks.filter(t => t.done).length;
  stats.innerText = done + "/" + tasks.length + " ተጠናቀቀ";

  // List አዘምን
  list.innerHTML = tasks.map(function(task) {
    return `
      <li class="task-item ${task.done ? 'done' : ''}">
        <input type="checkbox"
          ${task.done ? 'checked' : ''}
          onchange="toggleTask(${task.id})">
        <span>${task.text}</span>
        <button onclick="deleteTask(${task.id})">✕</button>
      </li>
    `;
  }).join("");
}

// Enter key ሲጫን ይጨምር
document.getElementById("taskInput")
  .addEventListener("keypress", function(e) {
    if (e.key === "Enter") addTask();
  });

🎮

ሙሉ App — ቀጥታ ሞክር! // Live Todo App

🚀 ይህ ነው ስናበቃ የምናገኘው App — ሞክረው!
This is the final result — try it out!

0

ሁሉም

0

ተጠናቀቀ

0

ቀሪ

🎯

Quiz // ምን ተማርን?

❓ Todo App ውስጥ tasks ለማስቀመጥ የትኛውን JS data structure ተጠቀምን?
What JS data structure did we use to store tasks in our Todo App?

A Object {}

B Array []

C String ""

D Number

Mini Project 🚀Todo App ከዜሮ!

Mini Project 🚀
Todo App ከዜሮ!