Skip to content

shrikant9907/to-do-list-app-html-css-javascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

To-Do List Application | HTML, CSS, and JavaScript

A simple and efficient To-Do List application built using HTML, CSS, and JavaScript. This application helps users manage their tasks with a user-friendly interface. It’s a beginner-friendly project that introduces fundamental web development concepts.


Features

  • Add Task: Allows users to input a task and click "Add Task" to add it to the list.
  • Complete Task: Users can click on a task to mark it as completed (strikethrough effect).
  • Delete Task: Users can remove a specific task by clicking the "Delete" button.
  • Local Storage Support: Tasks persist in the browser's local storage, ensuring the list remains intact even after refreshing the page.

Built With

  • HTML
  • CSS
  • JavaScript

How to Run the Application

  1. Create three files: index.html, style.css, and script.js.
  2. Copy and paste the appropriate code into each file.
  3. Open index.html in your web browser to view and interact with the application.

Screenshot of Each Page

Main View

Main View


Learning Objectives

This project demonstrates the following concepts:

  • DOM manipulation using JavaScript.
  • Event handling in JavaScript.
  • CSS for responsive web design.
  • Use of local storage to persist data.
  • Structuring code for small web applications.

Potential Enhancements

As you progress, you can extend this application with the following features:

  1. Search Functionality: Add a search bar to filter tasks based on user input.
  2. Task Categories: Allow users to categorize tasks (e.g., Work, Personal, etc.).
  3. Dark/Light Mode: Provide a toggle for dark and light themes.
  4. Task Prioritization: Add priority levels (e.g., High, Medium, Low) for tasks.
  5. Drag and Drop: Enable drag-and-drop functionality to rearrange tasks.
  6. Save and Export: Allow users to save and export their tasks to a file.

Created By

Shrikant Yadav
Full Stack Web Developer
LinkedIn Profile


Training Programs

We provide the following training programs in Web Design and Development:

Programs range from 3 months to 1 year. For more information on training, feel free to contact us.


Web Developer Services

We also offer Web Developer services, including custom web development, design, and consultation for various projects.


Contact Details

  • Email: [email protected]
  • Phone: +91 9907472038
  • Location: Hoshangabad (Narmadapuram), India

For services or training, contact us at:


Online/Offline Training

Looking to advance your web development career? Join our online and offline training programs available in Hoshangabad (Narmadapuram) and beyond. Learn everything from basic to advanced concepts in Full Stack and MERN Stack development with practical hands-on projects. Enroll today and start building your career!


License

This project is open source and available under the MIT License.