Scribd
Upload
2 views2 pages

ToDo FullStack Practice

The document outlines a workshop project for creating a Full Stack To-Do List app using HTML, CSS, JavaScript, Node.js, and Express. It details the required functionalities for both the backend server and frontend interface, including CRUD operations for task management. The project aims to ensure seamless communication between the frontend and backend while maintaining user-friendly design and functionality.

Uploaded by

nafeesaanar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

ToDo FullStack Practice

The document outlines a workshop project for creating a Full Stack To-Do List app using HTML, CSS, JavaScript, Node.js, and Express. It details the required functionalities for both the backend server and frontend interface, including CRUD operations for task management. The project aims to ensure seamless communication between the frontend and backend while maintaining user-friendly design and functionality.

Uploaded by

nafeesaanar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

University of Gujrat

Department of Computer Science · University of Gujrat · Summer 2026 · Sat & Sun · 2 hours per session
Workshop 2026 — Hayatian Computing Society

Practice Project: My To-Do List (Full Stack)


Frontend: HTML + CSS + JavaScript | Backend: [Link] + Express

The Task
Build a To-Do List app that has TWO parts working together: a frontend page the user sees,
and a backend server that stores the tasks. The user types a task and clicks Add; the frontend
sends it to the backend using fetch(). All tasks are loaded from the backend and shown on the
page, and each task can be edited or deleted. Together these four actions (add, view, edit,
delete) are the full CRUD cycle — the same pattern as the Notes app from class.

Design Sample (this is your target)

Your finished app should look and behave roughly like this mockup.

Part A — Backend (the server)


Make a small [Link] + Express server that keeps a list of tasks and offers 4 routes:

What it does Method Route

Send all tasks GET /tasks

Add a task POST /tasks

Update a task PUT /tasks/:id

Delete a task DELETE /tasks/:id


• Store tasks in a simple array in memory (no database needed to start).
• Run the server on [Link]
• Enable CORS so the frontend page is allowed to call it.

Part B — Frontend (the page)


• HTML: a heading, one input box, an Add button, and an empty list (ul) for the tasks.
• CSS: center the card, style the input and buttons, give each task row spacing and rounded
corners (use the reset * { margin:0; padding:0; box-sizing:border-box; }).
• JavaScript: loadTasks() uses fetch to GET the tasks and shows each one with an Edit and a
Delete button; addTask() sends a POST; updateTask(id) sends a PUT (use a prompt to get
the new text); deleteTask(id) sends a DELETE. Call loadTasks() when the page opens.

Frontend Hint
async function addTask() {
const text = [Link]("taskInput").value;
await fetch("[Link] {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ text })
});
loadTasks();
}

You Are Done When


• The server runs and returns tasks at /tasks.
• Adding a task saves it on the server and it stays after refreshing the page.
• Tasks load automatically and each has a working Edit and Delete button.
• Editing a task updates its text on the server (it stays changed after refresh).
• Frontend and backend talk to each other with no console errors.

You might also like