Web Development Internship Project – Week 2

🗓️ Month 2: Project Phase | Week 2 Project

Welcome to Week 2 of the Naman Digital Web Development Internship project phase. This week, you’re going to level up from static sites and build your first dynamic frontend web app: a To-Do List Application using HTML, CSS, and JavaScript.

🎯 Project Title: “Interactive To-Do List App”

📌 Objective:

Create a fully functional and interactive To-Do List Web Application with features like adding tasks, deleting tasks, marking tasks as complete, and saving them in local storage.

This project will help you practice DOM manipulation, event handling, and working with browser storage using pure JavaScript.

🛠️ Tech Stack:

  • HTML5
  • CSS3
  • JavaScript (No frameworks)

🗂️ Project Folder Structure:

todo-app/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── (Optional icons or background images)

✅ Functional Requirements:

➕ Add Task

  • User can type a task and click “Add” button or press Enter
  • Task appears in a list below with a checkbox and delete icon

✅ Mark as Completed

  • Clicking the checkbox should strike-through the task
  • Toggle between completed and not completed

🗑️ Delete Task

  • Each task should have a delete button/icon
  • Clicking it removes the task from the list

💾 Save to Local Storage

  • Tasks should be saved in browser’s local storage
  • On page reload, tasks should persist

📱 Responsiveness:

  • Your app must be usable on mobile and desktop
  • Use flexbox/grid and media queries for layout

🧑‍🎨 Design Tips:

  • Use clean UI (box shadows, rounded corners)
  • Use icons from Font Awesome
  • Prefer light pastel colors or dark mode

✨ Bonus Features (Optional):

  • Edit existing tasks
  • Filter tasks (All / Completed / Pending)
  • Add due dates or priorities
  • Add theme toggle (dark/light mode)

🖼️ Inspiration & Demo Ideas:

📤 Submission Instructions:

  1. Upload your complete project to GitHub or Google Drive
  2. Share the project link using the submission form shared in the Telegram group

📅 Deadline:

Submit your project by [Insert Deadline Date]

📘 Learning Outcomes:

  • DOM manipulation in real-time
  • JavaScript events (click, input, submit)
  • Working with arrays and local storage
  • Creating dynamic user interfaces

✅ Sample Features Checklist:

FeatureRequired
Add new task✅
Mark as completed✅
Delete task✅
Local storage support✅
Responsive layout✅

🚀 Keep Building!

After completing this project, you’ll be more confident in your JavaScript skills and ready to build more complex apps like calculators, weather apps, or API integrations.

Leave a Comment