From 0ef4c12d29f67994f0dcddc0918a238e9b3791b7 Mon Sep 17 00:00:00 2001 From: Arshad Mahemood Patel Date: Sun, 22 Oct 2023 20:21:56 +0530 Subject: [PATCH 1/2] Adding my project --- Simple To Do List/README.md | 42 ++++++++++++++++++++++++++++++++++ Simple To Do List/index.html | 18 +++++++++++++++ Simple To Do List/script.js | 30 ++++++++++++++++++++++++ Simple To Do List/style.css | 44 ++++++++++++++++++++++++++++++++++++ 4 files changed, 134 insertions(+) create mode 100644 Simple To Do List/README.md create mode 100644 Simple To Do List/index.html create mode 100644 Simple To Do List/script.js create mode 100644 Simple To Do List/style.css diff --git a/Simple To Do List/README.md b/Simple To Do List/README.md new file mode 100644 index 0000000..38814f9 --- /dev/null +++ b/Simple To Do List/README.md @@ -0,0 +1,42 @@ +# Simple To-Do List + +A basic to-do list web application created using HTML, CSS, and JavaScript. + +## Overview + +This is a simple web-based to-do list application that allows you to add and remove tasks. Users can add tasks by typing them in the input field and pressing the "Add" button or hitting the Enter key. Tasks can be deleted by clicking the "Delete" button next to each task. + +## Features + +- Add tasks +- Delete tasks +- User-friendly interface + +## Usage + +1. Open the `index.html` file in your web browser. +2. Enter a task in the input field. +3. Click the "Add" button or press Enter to add the task to the list. +4. To remove a task, click the "Delete" button next to the task. + +## Files + +- `index.html`: The main HTML file containing the structure of the to-do list. +- `style.css`: The CSS file for styling the web page. +- `script.js`: The JavaScript file that provides the functionality of adding and removing tasks. + +## License + +Feel free to fork, modify, and use it as a starting point for your own projects. + +## Author + +[Arshad M. Patel](https://github.com/arshadpatel) + +## Contact + +For any questions or suggestions, feel free to contact me at [Arshad M. Patel](https://www.linkedin.com/in/arshad-patel/) + +## Acknowledgments + +- Thanks to the open-source community for inspiration and contributions. diff --git a/Simple To Do List/index.html b/Simple To Do List/index.html new file mode 100644 index 0000000..ec2a328 --- /dev/null +++ b/Simple To Do List/index.html @@ -0,0 +1,18 @@ + + + + + + Simple To-Do List + + + +
+

Simple To-Do List

+ + + +
+ + + diff --git a/Simple To Do List/script.js b/Simple To Do List/script.js new file mode 100644 index 0000000..52812c0 --- /dev/null +++ b/Simple To Do List/script.js @@ -0,0 +1,30 @@ +const taskInput = document.getElementById("taskInput"); +const addButton = document.getElementById("addButton"); +const taskList = document.getElementById("taskList"); + +function addTask() { + const taskText = taskInput.value.trim(); + if (taskText === "") return; + + const taskItem = document.createElement("li"); + taskItem.className = "taskItem"; + taskItem.innerHTML = ` + ${taskText} + + `; + + taskList.appendChild(taskItem); + taskInput.value = ""; + + taskItem.querySelector("button").addEventListener("click", () => { + taskList.removeChild(taskItem); + }); +} + +addButton.addEventListener("click", addTask); + +taskInput.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + addTask(); + } +}); diff --git a/Simple To Do List/style.css b/Simple To Do List/style.css new file mode 100644 index 0000000..5129080 --- /dev/null +++ b/Simple To Do List/style.css @@ -0,0 +1,44 @@ +body { + font-family: Arial, sans-serif; +} + +#app { + text-align: center; +} + +#taskInput { + width: 70%; + padding: 10px; + font-size: 16px; +} + +#addButton { + padding: 10px 20px; + font-size: 16px; + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; +} + +#taskList { + list-style: none; + padding: 0; + text-align: left; +} + +.taskItem { + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid #ccc; + margin: 10px 0; + padding: 10px; +} + +.taskItem button { + background-color: #f44336; + color: white; + border: none; + cursor: pointer; +} From b5cfd405966c0b37bdc2344f00cef6c10f52bc98 Mon Sep 17 00:00:00 2001 From: Aditya Ray <96347576+adi-ray@users.noreply.github.com> Date: Tue, 24 Oct 2023 19:55:06 +0530 Subject: [PATCH 2/2] Update README.md --- Simple To Do List/README.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/Simple To Do List/README.md b/Simple To Do List/README.md index 38814f9..10f4a98 100644 --- a/Simple To Do List/README.md +++ b/Simple To Do List/README.md @@ -24,19 +24,3 @@ This is a simple web-based to-do list application that allows you to add and rem - `index.html`: The main HTML file containing the structure of the to-do list. - `style.css`: The CSS file for styling the web page. - `script.js`: The JavaScript file that provides the functionality of adding and removing tasks. - -## License - -Feel free to fork, modify, and use it as a starting point for your own projects. - -## Author - -[Arshad M. Patel](https://github.com/arshadpatel) - -## Contact - -For any questions or suggestions, feel free to contact me at [Arshad M. Patel](https://www.linkedin.com/in/arshad-patel/) - -## Acknowledgments - -- Thanks to the open-source community for inspiration and contributions.