Jawad A.

task-1/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

task-1/src/main.js → task-1/src/main.ts

@@ -1,16 +1,17 @@
 import { TaskManager } from "./task-manager.js";
 import { TaskStore } from "./store.js";
 import { AppView } from "./views/app-view.js";
+import { FilterStatus, TaskHandlers } from "./types.js";
 
 const taskManager = new TaskManager(new TaskStore());
-let currentFilter = "all";
-let appView;
+let currentFilter: FilterStatus = "all";
+let appView: AppView;
 
 function render() {
   appView.render(taskManager.getFiltered(currentFilter), currentFilter);
 }
 
-const handlers = {
+const handlers: TaskHandlers = {
   onAdd(title, description) {
     taskManager.addTask(title, description);
     render();

task-1/src/store.js → task-1/src/store.ts

@@ -1,7 +1,9 @@
+import { Task } from "./types.js";
+
 export class TaskStore {
   STORAGE_KEY = "todo-tasks";
 
-  load() {
+  load(): Task[] {
     try {
       const raw = localStorage.getItem(this.STORAGE_KEY);
       if (!raw) return [];
@@ -11,7 +13,7 @@ export class TaskStore {
     }
   }
 
-  save(tasks) {
+  save(tasks: Task[]): void {
     localStorage.setItem(this.STORAGE_KEY, JSON.stringify(tasks));
   }
 }

task-1/src/task-manager.js → task-1/src/task-manager.ts

@@ -1,17 +1,21 @@
+import { Task, FilterStatus } from "./types.js";
+import { TaskStore } from "./store.js";
+
 export class TaskManager {
-  tasks = [];
+  tasks: Task[] = [];
+  store: TaskStore;
 
-  constructor(store) {
+  constructor(store: TaskStore) {
     this.store = store;
     this.tasks = store.load();
   }
 
-  save() {
+  save(): void {
     this.store.save(this.tasks);
   }
 
-  addTask(title, description) {
-    const newTask = {
+  addTask(title: string, description: string): void {
+    const newTask: Task = {
       id: crypto.randomUUID(),
       title,
       description,
@@ -21,26 +25,26 @@ export class TaskManager {
     this.save();
   }
 
-  deleteTask(id) {
+  deleteTask(id: string): void {
     this.tasks = this.tasks.filter((task) => task.id !== id);
     this.save();
   }
 
-  toggleTask(id) {
+  toggleTask(id: string): void {
     this.tasks = this.tasks.map((task) =>
       task.id === id ? { ...task, completed: !task.completed } : task,
     );
     this.save();
   }
 
-  editTask(id, title, description) {
+  editTask(id: string, title: string, description: string): void {
     this.tasks = this.tasks.map((task) =>
       task.id === id ? { ...task, title, description } : task,
     );
     this.save();
   }
 
-  getFiltered(status) {
+  getFiltered(status: FilterStatus): Task[] {
     switch (status) {
       case "all":
         return this.tasks;

task-1/src/types.ts

@@ -0,0 +1,16 @@
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+}
+
+export type FilterStatus = "all" | "completed" | "pending";
+
+export interface TaskHandlers {
+  onAdd(title: string, description: string): void;
+  onToggle(id: string): void;
+  onDelete(id: string): void;
+  onEdit(id: string, title: string, description: string): void;
+  onFilter(status: FilterStatus): void;
+}

task-1/src/views/app-view.js → task-1/src/views/app-view.ts

@@ -1,7 +1,10 @@
+import { FilterStatus, Task, TaskHandlers } from "../types.js";
 import { TaskListView } from "./task-list-view.js";
 
 export class AppView {
-  constructor(root, handlers) {
+  filterBar: HTMLDivElement;
+  taskListView: TaskListView;
+  constructor(root: HTMLElement, handlers: TaskHandlers) {
     root.innerHTML = String.raw`
       <h1>To-Do List</h1>
       <form class="todo-form">
@@ -17,11 +20,11 @@ export class AppView {
       <ul class="task-list"></ul>
     `;
 
-    const form = root.querySelector(".todo-form");
-    const titleInput = root.querySelector("#title-input");
-    const descInput = root.querySelector("#desc-input");
-    const taskListEl = root.querySelector(".task-list");
-    this.filterBar = root.querySelector(".filter-bar");
+    const form = root.querySelector<HTMLFormElement>(".todo-form")!;
+    const titleInput = root.querySelector<HTMLInputElement>("#title-input")!;
+    const descInput = root.querySelector<HTMLInputElement>("#desc-input")!;
+    const taskListEl = root.querySelector<HTMLUListElement>(".task-list")!;
+    this.filterBar = root.querySelector<HTMLDivElement>(".filter-bar")!;
 
     this.taskListView = new TaskListView(taskListEl, handlers);
 
@@ -33,20 +36,23 @@ export class AppView {
       form.reset();
     });
 
-    for (const btn of root.querySelectorAll(".filter-bar button")) {
+    for (const btn of root.querySelectorAll<HTMLButtonElement>(
+      ".filter-bar button",
+    )) {
       btn.addEventListener("click", () => {
-        handlers.onFilter(btn.dataset.filter);
+        handlers.onFilter(btn.dataset.filter as FilterStatus);
       });
     }
   }
 
-  render(tasks, activeFilter) {
+  render(tasks: Task[], activeFilter: FilterStatus) {
     this.taskListView.render(tasks);
     this.updateFilterButtons(activeFilter);
   }
 
-  updateFilterButtons(activeFilter) {
-    const buttons = this.filterBar.querySelectorAll("[data-filter]");
+  updateFilterButtons(activeFilter: FilterStatus) {
+    const buttons =
+      this.filterBar.querySelectorAll<HTMLButtonElement>("[data-filter]");
     for (const btn of buttons) {
       btn.classList.toggle("active", btn.dataset.filter === activeFilter);
     }

task-1/src/views/task-edit-view.ts

@@ -0,0 +1,49 @@
+import { FilterStatus, Task, TaskHandlers } from "../types.js";
+import { escapeHtml } from "./utils.js";
+
+export function enterEditMode(
+  li: HTMLLIElement,
+  task: Task,
+  handlers: TaskHandlers,
+) {
+  li.innerHTML = String.raw`
+      <input type="checkbox"${task.completed ? " checked" : ""}>
+      <div class="edit-form">
+        <input type="text" class="edit-title" value="${escapeHtml(task.title)}">
+        <input type="text" class="edit-desc" value="${escapeHtml(task.description)}">
+        <div class="edit-actions">
+          <button class="save-btn">Save</button>
+          <button class="cancel-btn">Cancel</button>
+        </div>
+      </div>
+    `;
+
+  const checkbox = li.querySelector<HTMLInputElement>(
+    "input[type='checkbox']",
+  )!;
+  const titleInput = li.querySelector<HTMLInputElement>(".edit-title")!;
+  const descInput = li.querySelector<HTMLInputElement>(".edit-desc")!;
+
+  checkbox.addEventListener("change", () => handlers.onToggle(task.id));
+
+  li.querySelector<HTMLButtonElement>(".save-btn")!.addEventListener(
+    "click",
+    () => {
+      const newTitle = titleInput.value.trim();
+      if (!newTitle) return;
+      handlers.onEdit(task.id, newTitle, descInput.value.trim());
+    },
+  );
+
+  li.querySelector<HTMLButtonElement>(".cancel-btn")!.addEventListener(
+    "click",
+    () => {
+      const activeFilter =
+        (document.querySelector<HTMLButtonElement>(".filter-bar .active")
+          ?.dataset.filter as FilterStatus) ?? "all";
+      handlers.onFilter(activeFilter);
+    },
+  );
+
+  titleInput.focus();
+}

task-1/src/views/task-list-view.js → task-1/src/views/task-list-view.ts

@@ -1,13 +1,16 @@
 import { enterEditMode } from "./task-edit-view.js";
 import { escapeHtml } from "./utils.js";
+import { Task, TaskHandlers } from "../types.js";
 
 export class TaskListView {
-  constructor(root, handlers) {
+  root: HTMLUListElement;
+  handlers: TaskHandlers;
+  constructor(root: HTMLUListElement, handlers: TaskHandlers) {
     this.root = root;
     this.handlers = handlers;
   }
 
-  render(tasks) {
+  render(tasks: Task[]): void {
     if (tasks.length === 0) {
       this.root.innerHTML = `<li class="empty-state">No tasks to show.</li>`;
       return;
@@ -31,21 +34,24 @@ export class TaskListView {
       )
       .join("");
 
-    for (const li of this.root.querySelectorAll(".task-item")) {
-      const id = li.dataset.id;
-      const task = tasks.find((t) => t.id === id);
+    for (const li of this.root.querySelectorAll<HTMLLIElement>(".task-item")) {
+      const id = (li as HTMLLIElement).dataset.id!;
+      const task = tasks.find((t) => t.id === id)!;
 
-      li.querySelector("input[type='checkbox']").addEventListener(
-        "change",
-        () => this.handlers.onToggle(id),
-      );
+      li.querySelector<HTMLInputElement>(
+        "input[type='checkbox']",
+      )!.addEventListener("change", () => this.handlers.onToggle(id));
 
-      li.querySelector(".edit-btn").addEventListener("click", () => {
-        enterEditMode(li, task, this.handlers);
-      });
+      li.querySelector<HTMLButtonElement>(".edit-btn")!.addEventListener(
+        "click",
+        () => {
+          enterEditMode(li, task, this.handlers);
+        },
+      );
 
-      li.querySelector(".delete-btn").addEventListener("click", () =>
-        this.handlers.onDelete(id),
+      li.querySelector<HTMLButtonElement>(".delete-btn")!.addEventListener(
+        "click",
+        () => this.handlers.onDelete(id),
       );
     }
   }

task-1/src/views/utils.js → task-1/src/views/utils.ts

@@ -1,4 +1,4 @@
-export function escapeHtml(str) {
+export function escapeHtml(str: string): string {
   return str
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")

task-list-ts/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

task-list-ts/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Task List</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div id="app">
+      <h1>My Tasks</h1>
+
+      <form id="task-form">
+        <input
+          type="text"
+          id="task-input"
+          placeholder="What needs to be done?"
+          required
+        />
+        <button type="submit">Add task</button>
+      </form>
+
+      <ul id="task-list"></ul>
+
+      <p id="empty-message">No tasks yet. Add one above!</p>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>