first git repo (To-do list) demo

Aditya011001/readme.md

@@ -0,0 +1,23 @@
+ <!-- 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). -->

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();
+  }
+});

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);
+    }
+  }

Aditya011001/todo.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo List</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Todo List</h1>
+    <div class="input-container">
+      <input type="text" id="taskInput" placeholder="Add a new task...">
+      <button id="addTaskBtn">Add Task</button>
+    </div>
+    <ul id="taskList"></ul>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>

README.md

@@ -1 +1,25 @@
-# login-page
+
+ 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).