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 @@ + + +
+ + +