Merge pull request #14 from arshadpatel/myproject

Adding my project
adi-ray · Oct 24, 2023 · 98531cf · 98531cf
2 parents c00117a + b5cfd40
commit 98531cf
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/Simple To Do List/README.md b/Simple To Do List/README.md
@@ -0,0 +1,26 @@
+# 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.
diff --git a/Simple To Do List/index.html b/Simple To Do List/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple To-Do List</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div id="app">
+        <h1>Simple To-Do List</h1>
+        <input type="text" id="taskInput" placeholder="Add a new task">
+        <button id="addButton">Add</button>
+        <ul id="taskList"></ul>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Simple To Do List/script.js 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 = `
+        <span>${taskText}</span>
+        <button>Delete</button>
+    `;
+
+    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
@@ -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;
+}