Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yousefkhalaf0/small-todo-website-using-js

This To-Do List App, built with HTML5, CSS3, and JavaScript, was a lab task in my JavaScript course at ITI. It features task management, real-time validation, and search functionality, showcasing DOM manipulation and event handling in JavaScript. 🚀
https://github.com/yousefkhalaf0/small-todo-website-using-js

css frontend html js todo website

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/yousefkhalaf0/small-todo-website-using-js
Owner: yousefkhalaf0
Created: 2025-01-21T20:42:58.000Z (18 days ago)
Default Branch: main
Last Pushed: 2025-01-21T20:50:25.000Z (18 days ago)
Last Synced: 2025-01-21T21:32:41.458Z (18 days ago)
Topics: css, frontend, html, js, todo, website
Language: JavaScript
Homepage:
Size: 0 Bytes
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# **To-Do List App**

This is a simple **To-Do List App** built with **HTML5**, **CSS3**, and **JavaScript**. It was developed as part of a lab task in the **JavaScript course** during my **Frontend and Cross-Platform Mobile Development** track at **ITI (Information Technology Institute)**.

### **Features**
- **Add Tasks**: Add tasks with a title (minimum 6 characters) and description (minimum 20 characters).
- **Edit Tasks**: Update existing tasks.
- **Mark as Complete**: Mark tasks as completed (turns green).
- **Delete Tasks**: Remove tasks from the list.
- **Search Functionality**: Search for tasks by title.
- **Form Validation**: Real-time validation for task titles and descriptions.

### **Technologies Used**
- **HTML5**: For structuring the app.
- **CSS3**: For styling the app.
- **JavaScript**: For dynamic functionality and interactivity.

### **How to Use**
1. Clone the repository or download the files.
2. Open the `index.html` file in your browser.
3. Add, edit, complete, or delete tasks as needed.

### **Screenshots**
To-Do List App Screenshot: ![image](https://github.com/user-attachments/assets/744fbee9-3540-4fe0-abf3-3f2aaad7e87c) ![image](https://github.com/user-attachments/assets/bb26fb0f-e140-4a36-9986-428f4326c834) ![image](https://github.com/user-attachments/assets/b26bf8e4-56b1-4d12-aac8-36f9320a8638)