From 461a1227c2af11c4faeb11417591dc1af33fe78e Mon Sep 17 00:00:00 2001 From: Wasiq Tariq Date: Wed, 2 Oct 2024 14:50:28 +0530 Subject: [PATCH] Add files via upload --- index.html | 26 +++++++++++++++ script.js | 23 +++++++++++++ styles.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..724a7c3 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + To-Do List App + + + +
+

My To-Do List

+
+ + +
+ + + +
+ Designed and Developed by Wasiq Tariq +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1c28d4e --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +document.getElementById('add-task').addEventListener('click', function() { + const taskInput = document.getElementById('task-input'); + const taskValue = taskInput.value.trim(); + + if (taskValue) { + const taskList = document.getElementById('task-list'); + const listItem = document.createElement('li'); + listItem.textContent = taskValue; + + // Add delete button + const deleteBtn = document.createElement('button'); + deleteBtn.textContent = 'Delete'; + deleteBtn.onclick = function() { + taskList.removeChild(listItem); + }; + + listItem.appendChild(deleteBtn); + taskList.appendChild(listItem); + taskInput.value = ''; // Clear the input + } else { + alert('Please enter a task!'); + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..2a4012a --- /dev/null +++ b/styles.css @@ -0,0 +1,98 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-image: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1920'); /* Full HD image */ + background-size: cover; /* Ensures the image covers the entire background */ + background-position: center; /* Centers the image */ + margin: 0; + padding: 0; +} + +.container { + max-width: 500px; + margin: 50px auto; + background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */ + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; +} + +.input-container { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +input { + flex: 1; + padding: 12px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +button { + padding: 12px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin-left: 10px; + transition: background-color 0.3s; +} + +button:hover { + background-color: #0056b3; +} + +ul { + list-style: none; + padding: 0; +} + +li { + padding: 15px; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + align-items: center; +} + +li button { + background-color: #dc3545; +} + +li button:hover { + background-color: #c82333; +} + +footer { + text-align: center; + margin-top: 20px; + font-size: 14px; + color: #777; +} + +@media (max-width: 600px) { + .input-container { + flex-direction: column; + } + + input { + margin-bottom: 10px; + } + + button { + width: 100%; + } +}