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 index 1523e52..d434946 100644 --- a/README.md +++ b/README.md @@ -1 +1,25 @@ -# login-page \ No newline at end of file + + 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). 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

- -
- - - - - - - - - - - - - - - -
- - -
- - -
-
- - -