Build a To-Do List with Node.js, Express, and Vanilla JavaScript

CO

Built by

core-check2-1784838524666

Computer Science

Build a To-Do List with Node.js, Express, and Vanilla JavaScript

JavaScriptNode.jsExpress

Build a To-Do List with Node.js, Express, and Vanilla JavaScript

Build a small, working to-do list from scratch. You’ll use your existing HTML structure and CSS selector experience where the project needs them, then add a Node.js Express server, a tiny JSON API, and vanilla JavaScript that lets you add, complete, and delete tasks.

3 modules9 lessonsComputer ScienceJavaScriptNode.jsExpressHTMLCSSBrowser DOM APIFetch APInpm

What you learn by building this

  • Create and run a self-contained Node.js Express application
  • Serve an HTML, CSS, and JavaScript frontend from an Express server
  • Design a small REST-style API for reading and changing to-do items
  • Connect browser events and fetch requests to server-side task data
  • Handle empty input, failed requests, and visible task-count updates
  • Explain the finished project and demonstrate its core user flows

Learning Journey

1

Start the project and make the page visible

3 lessons

Create the project from an empty folder, run a minimal Express server, and build the static to-do page before introducing client-server communication.

2

Add the task API and connect the browser

3 lessons

Replace the static sample data with server-owned tasks, then connect the page to the API through focused browser JavaScript.

3

Finish the task interactions

3 lessons

Complete the core to-do behavior with update and delete routes, event handling, counts, and a final walkthrough of the finished project.

Public lesson

Create and run a minimal Express server

Tasks

{"title": "1. Create a backend folder", "steps": ["Open a terminal and create a new folder for the server:", "bash\nmkdir core-check-server\ncd core-check-server\n", "Check that the terminal is inside the new folder:", "bash\npwd\n", "On Windows, use this instead if needed:", "bash\ncd\n", "The printed path should end with core-check-server."]}

Tasks

{"title": "2. Create package.json", "steps": ["Run:", "bash\nnpm init -y\n", "This creates the project’s package file with sensible defaults.", "Check that it worked:", "bash\nls\n", "On Windows:", "bash\ndir\n", "You should see package.json."]}

Tasks

{"title": "3. Install Express", "steps": ["Run:", "bash\nnpm install express\n", "This adds Express to the project and creates a node_modules folder.", "Open package.json. Find the \"dependencies\" section and confirm that it contains Express."]}

Tasks

{"title": "4. Add a start command", "steps": ["Run:", "bash\nnpm pkg set scripts.start=\"node server.js\"\n", "Now npm start will know how to launch your server.", "Check the relevant part of package.json. You should see a script similar to:", "json\n\"scripts\": {\n \"start\": \"node server.js\"\n}\n"]}

Tasks

{"title": "5. Create server.js", "steps": ["Create a file named server.js in the same folder. Add this skeleton:", "js\nconst express = require(\"express\");\n\nconst app = express();\nconst PORT = 3000;\n\napp.get(\"/health\", (req, res) => {\n // Send a short plain-text response here.\n});\n\napp.listen(PORT, () => {\n console.log(`Server running at http://localhost:${PORT}`);\n});\n", "Complete the missing response inside the /health route. Make it return a short message such as:", "text\nok\n", "The route should send that message back to whoever visits /health."]}

Tasks

{"title": "6. Start the server", "steps": ["Save server.js, then run:", "bash\nnpm start\n", "Look at the terminal output. You should see a message containing:", "text\nhttp://localhost:3000\n", "Leave this terminal running."]}

Tasks

{"title": "7. Check the health route", "steps": ["Open this URL in your browser:", "text\nhttp://localhost:3000/health\n", "You should see the message you chose, such as:", "text\nok\n", "You can also check from a second terminal:", "bash\ncurl http://localhost:3000/health\n", "The command should print the same health message."]}

{"title": "If something goes wrong", "body": ["Cannot find module 'express': run npm install express from the folder containing package.json.", "Cannot find module ... server.js: check that server.js is in the same folder where you ran npm start.", "Port already in use: stop the other server with Ctrl+C, or change PORT to another number and use that number in the browser URL.", "The browser keeps loading: your /health route is not sending a response yet. Check the missing line inside app.get."]}

Course Outline

3 modules · 9 lessons

Start the project and make the page visible

Add the task API and connect the browser

Finish the task interactions

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.