From 4870fbea281b7e31412453293af7987ea2160ca8 Mon Sep 17 00:00:00 2001 From: ADITYA GUPTA Date: Sat, 15 Mar 2025 12:01:31 +0530 Subject: [PATCH 1/2] first commit --- Aditya011001/readme.md | 23 ++++++++ Aditya011001/script.js | 55 ++++++++++++++++++ Aditya011001/style.css | 116 +++++++++++++++++++++++++++++++++++++ Aditya011001/todo.html | 20 +++++++ README.md | 1 - project.html | 127 ----------------------------------------- 6 files changed, 214 insertions(+), 128 deletions(-) create mode 100644 Aditya011001/readme.md create mode 100644 Aditya011001/script.js create mode 100644 Aditya011001/style.css create mode 100644 Aditya011001/todo.html delete mode 100644 README.md delete mode 100644 project.html diff --git a/Aditya011001/readme.md b/Aditya011001/readme.md new file mode 100644 index 0000000..5e04f27 --- /dev/null +++ b/Aditya011001/readme.md @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/Aditya011001/script.js b/Aditya011001/script.js new file mode 100644 index 0000000..a86043c --- /dev/null +++ b/Aditya011001/script.js @@ -0,0 +1,55 @@ +// Get DOM elements +const taskInput = document.getElementById('taskInput'); +const addTaskBtn = document.getElementById('addTaskBtn'); +const taskList = document.getElementById('taskList'); + +// Function to add a new task +function addTask() { + const taskText = taskInput.value.trim(); + + if (taskText !== '') { + // Create a new list item + const li = document.createElement('li'); + + // Create a checkbox + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', () => { + li.classList.toggle('completed', checkbox.checked); + }); + + // Create a span for the task text + const taskSpan = document.createElement('span'); + taskSpan.textContent = taskText; + + // Create a delete button + const deleteBtn = document.createElement('button'); + deleteBtn.textContent = 'Delete'; + deleteBtn.addEventListener('click', () => { + taskList.removeChild(li); + }); + + // Append elements to the list item + li.appendChild(checkbox); + li.appendChild(taskSpan); + li.appendChild(deleteBtn); + + // Append the list item to the task list + taskList.appendChild(li); + + // Clear the input field + taskInput.value = ''; + } else { + alert('Please enter a task!'); + } +} + +// Event listener for the "Add Task" button +addTaskBtn.addEventListener('click', addTask); + +// Optional: Allow pressing "Enter" to add a task +taskInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + addTask(); + } +}); \ No newline at end of file diff --git a/Aditya011001/style.css b/Aditya011001/style.css new file mode 100644 index 0000000..3c1493c --- /dev/null +++ b/Aditya011001/style.css @@ -0,0 +1,116 @@ +/* General Styles */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #6a11cb, #2575fc); + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #333; + } + + .container { + background: #fff; + padding: 25px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + width: 350px; + text-align: center; + } + + h1 { + margin-bottom: 20px; + font-size: 24px; + color: #333; + } + + .input-container { + display: flex; + gap: 10px; + margin-bottom: 20px; + } + + input[type="text"] { + width: 70%; + padding: 10px; + border: 2px solid #ddd; + border-radius: 8px; + font-size: 14px; + outline: none; + transition: border-color 0.3s ease; + } + + input[type="text"]:focus { + border-color: #6a11cb; + } + + button { + width: 30%; + padding: 10px; + border: none; + background: #6a11cb; + color: white; + border-radius: 8px; + font-size: 14px; + cursor: pointer; + transition: background 0.3s ease; + } + + button:hover { + background: #2575fc; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + li { + background: #f9f9f9; + padding: 10px; + margin-bottom: 10px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + animation: fadeIn 0.5s ease; + } + + li.completed { + text-decoration: line-through; + opacity: 0.7; + } + + li input[type="checkbox"] { + margin-right: 10px; + cursor: pointer; + } + + li button { + background: #ff4d4d; + border: none; + color: white; + padding: 5px 10px; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s ease; + } + + li button:hover { + background: #e60000; + } + + /* Animations */ + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } \ No newline at end of file diff --git a/Aditya011001/todo.html b/Aditya011001/todo.html new file mode 100644 index 0000000..0da5ecc --- /dev/null +++ b/Aditya011001/todo.html @@ -0,0 +1,20 @@ + + + + + + Todo List + + + +
+

Todo List

+
+ + +
+ +
+ + + \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 1523e52..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# login-page \ No newline at end of file diff --git a/project.html b/project.html deleted file mode 100644 index 80c3b22..0000000 --- a/project.html +++ /dev/null @@ -1,127 +0,0 @@ - - - - - - - Exam Registration - - - - -
-

Exam Registration Form

- -
- - - - - - - - - - - - - - - -
- - -
- - -
-
- - - From 71890b527231bd624c536fe47b7ffb56ce0295c1 Mon Sep 17 00:00:00 2001 From: Aditya Date: Sat, 15 Mar 2025 12:04:20 +0530 Subject: [PATCH 2/2] Create README.md --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..d434946 --- /dev/null +++ b/README.md @@ -0,0 +1,25 @@ + + Todo List Website + + A simple and interactive to-do list website built with HTML, CSS, and JavaScript. + This project allows users to add tasks, mark them as completed, and delete them. + The UI is modern and visually appealing, with animations and smooth transitions. + + + + Features + +Add Tasks: Easily add new tasks by typing in the input field and clicking "Add Task" or pressing Enter. +Mark as Completed: Check the checkbox next to a task to mark it as completed (strikethrough effect). +Delete Tasks: Remove tasks by clicking the "Delete" button. +Modern UI: Stylish design with a gradient background, animations, and hover effects. +Responsive Design: Works well on both desktop and mobile devices. + + + + +Technologies Used + +HTML: For the structure of the website. +CSS: For styling and animations. +JavaScript: For dynamic functionality (adding, completing, and deleting tasks).