seo-asif / DOM-Manipulation-with-Vanila-JS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

DOM Manipulation with Vanila Javascript

This is a simple To-Do List application built with pure JavaScript (also known as Vanilla JS). The purpose of this project is to provide a lightweight, easy-to-use tool for managing your daily tasks.

Features

  • Add new tasks
  • Mark tasks as completed
  • Delete tasks
  • No external libraries or frameworks required

Setup

To run this project, simply download the files and open index.html in your web browser. Since it's built with only HTML, CSS, and JavaScript, no special server setup is required.

Code Overview

HTML

The HTML structure includes an input field for new tasks, a submit button for adding the new task to the to-do list, and an empty div where the tasks will be dynamically added by JavaScript.

CSS

The CSS file provides basic styling for the application. It ensures the tasks are neatly listed and visually distinct from each other.

JavaScript

The JavaScript file is where all the functionality of the application resides. It listens for the form submission event, creates new task elements, updates the task list, and handles the marking and deletion of tasks.

Usage

  1. Enter a new task in the input field.
  2. Click the "Add task" button to add the task to the list. The task will appear below any existing tasks.
  3. To mark a task as completed, click the checkbox next to the task. The task's text will be struck-through to indicate it's complete.
  4. To delete a task, click the "Delete" button next to the task. The task will be removed from the list.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Remember, this application is built with Vanilla JavaScript only, so please ensure any contributions stick with this.

License

MIT


Please feel free to use this README as a guideline and update or add any sections that you think would be necessary for your project.

About


Languages

Language:JavaScript 39.7%Language:HTML 32.9%Language:CSS 27.4%