Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/innocent6303/to-do-list
🚀 To-Do List App - A simple yet stylish To-Do List built with HTML, CSS, and JavaScript. Perfect for beginners to practice essential web development skills such as DOM manipulation, localStorage, and building responsive UIs.
https://github.com/innocent6303/to-do-list
codingforbeginners css dom-manipulation frontenddevelopment html html5 javascript javascriptforbeginners localstorage responsive-web-design todolist webdevelopment
Last synced: 18 days ago
JSON representation
🚀 To-Do List App - A simple yet stylish To-Do List built with HTML, CSS, and JavaScript. Perfect for beginners to practice essential web development skills such as DOM manipulation, localStorage, and building responsive UIs.
- Host: GitHub
- URL: https://github.com/innocent6303/to-do-list
- Owner: Innocent6303
- Created: 2023-01-24T20:00:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-01T00:43:56.000Z (about 1 month ago)
- Last Synced: 2024-12-01T01:23:18.244Z (about 1 month ago)
- Topics: codingforbeginners, css, dom-manipulation, frontenddevelopment, html, html5, javascript, javascriptforbeginners, localstorage, responsive-web-design, todolist, webdevelopment
- Language: CSS
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 To-Do List Application
Welcome to the **To-Do List Application** repository! This project is a simple yet stylish to-do list created using **HTML**, **CSS**, and **JavaScript**. It’s perfect for beginners to learn about web development concepts like **DOM manipulation**, **localStorage**, and responsive design.
---
## 🌟 Features
- **Add New Tasks:** Easily add tasks to your to-do list using the input field.
- **Mark as Done:** Complete tasks by clicking the "done" button, which removes them from the list.
- **Persistent Storage:** Your tasks are saved in your browser's `localStorage`, so you won’t lose them after refreshing the page.
- **Responsive Design:** Works seamlessly on different devices and screen sizes.
---
## 🚀 Getting Started
Follow these steps to run the project:
### 1️⃣ Clone the Repository
```bash
git clone https://github.com/Innocent6303/To-do-list.git
```
#
2️⃣ Open the Project
* Navigate to the project folder.
* Open the `index.html` file in your favorite browser OR:
* Install the Live Server extension in Visual Studio Code.
* Right-click on the `index.html` file and select `Open with Live Server`.
---
## 📋 User Interface
When you open the project, you’ll see:
1. **Header:**
A title, *"To-Do List"* .
2. **Input Field:**
- A blank input box with the placeholder `New Task`.
- An **Add** button to add tasks.
3. **Task List:**
- Newly added tasks appear at the top of the list.
- Each task has a **done** button to remove it once completed.
## 🎮 How It Works
Adding a Task:
1. Type a task into the input field.
2. Click the Add button or press `Enter`.
3. The task is displayed in the list at the top.
Completing a Task:
1. Click the done button next to a task.
2. The task is removed from the list
--
## 🔍 Key Concepts Demonstrated
This project is an excellent way to learn the following:
1.DOM Manipulation:
* Dynamically adding, removing, and updating elements on the page using JavaScript.
Example:
```js
var todoElement = document.createElement("li");
var todoText = document.createTextNode(todo);
todoElement.appendChild(todoText);
listElement.appendChild(todoElement);
```
2. Event Handling:
* Adding event listeners to buttons for user interactions.
Example:
```js
buttonElement.onclick = addTodo;
```
3. Local Storage:
* Saving tasks in the browser’s `localStorage` to maintain data persistence.
Example:
```js
localStorage.setItem("list_todos", JSON.stringify(todos));
```
4. Responsive and Functional Design:
* Designing a UI that works across devices with minimal styling and optimal functionality
## 📂 Folder Structure
```js
To-do-list/
│
├── index.html # Main HTML file
├── styles.css # Styling for the application
├── script.js # JavaScript for functionality
└── README.md # Documentation
```
---
## 🎨 Screenshots
### 1️⃣ Initial Interface
### 2️⃣ Task Added
### 3️⃣ Task Marked as Done
## 📈 Future Enhancements
* Add categories for tasks.
* Allow users to edit tasks.
* Implement a dark mode toggle.
* Add animations for adding and removing tasks.
## 🤝 Contributions
Contributions are welcome! Feel free to:
* Fork this repository.
* Add new features or fix bugs.
* Submit a pull request.
## ⭐ Acknowledgments
This project is created as a fun and educational tool for beginners to:
* Learn and practice web development basics.
* Understand JavaScript concepts like `localStorage` and event handling.
## 🏆 Show Your Support
⭐ Star this repository if you found it fun and helpful!
# Happy Coding! 💻