Practice

To Do List
IshanviChauhan · Feb 24, 2025 · 7aae5de · 7aae5de
1 parent d3f74c4
commit 7aae5de
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 131 deletions.
diff --git a/Practice/imageCarousel.html b/Practice/imageCarousel.html
diff --git a/Practice/imageCarouselStyle.css b/Practice/imageCarouselStyle.css
diff --git a/Practice/toDoList.html b/Practice/toDoList.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To-Do List</title>
+    <link rel="stylesheet" href="toDoListStyle.css">
+    <script src="toDoList.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <h1>📝 To-Do List</h1>
+
+        <div class="input-container">
+            <input type="text" id="taskInput" placeholder="Enter a new task..." required>
+            <button id="addTask"><i class="fas fa-plus"></i> Add Task</button>
+        </div>
+
+        <input type="text" id="searchInput" placeholder="🔍 Search tasks">
+
+        <ul id="taskList"></ul>
+
+        <button id="clearAll"><i class="fas fa-trash"></i> Clear All</button>
+    </div>
+</body>
+</html>
diff --git a/Practice/toDoList.js b/Practice/toDoList.js
@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const taskInput = document.getElementById("taskInput");
+    const addTaskButton = document.getElementById("addTask");
+    const taskList = document.getElementById("taskList");
+    const clearAllButton = document.getElementById("clearAll");
+    const searchInput = document.getElementById("searchInput");
+
+    // Add Task Functionality
+    addTaskButton.addEventListener("click", () => {
+        const taskText = taskInput.value.trim();
+        if (taskText !== "") {
+            addTask(taskText);
+            taskInput.value = "";
+        }
+    });
+
+    function addTask(text) {
+        const li = document.createElement("li");
+        li.innerHTML = `
+            <span>${text}</span>
+            <button onclick="removeTask(this)"><i class="fas fa-times"></i></button>
+        `;
+        taskList.appendChild(li);
+    }
+
+    // Remove Task
+    window.removeTask = function(button) {
+        button.parentElement.remove();
+    };
+
+    // Clear All Tasks
+    clearAllButton.addEventListener("click", () => {
+        taskList.innerHTML = "";
+    });
+
+    // Live Search
+    searchInput.addEventListener("input", () => {
+        const filter = searchInput.value.toLowerCase();
+        const tasks = taskList.getElementsByTagName("li");
+        Array.from(tasks).forEach(task => {
+            const text = task.textContent.toLowerCase();
+            task.style.display = text.includes(filter) ? "flex" : "none";
+        });
+    });
+});
diff --git a/Practice/toDoListStyle.css b/Practice/toDoListStyle.css
@@ -0,0 +1,155 @@
+/* Import Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background: linear-gradient(135deg, #1e1e2f, #131321);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 20px;
+}
+
+/* Glassmorphism container */
+.container {
+    background: rgba(255, 255, 255, 0.132);
+    backdrop-filter: blur(15px);
+    border-radius: 15px;
+    padding: 25px;
+    text-align: center;
+    width: 600px;
+    box-shadow: 0px 4px 15px rgba(137, 137, 137, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+h1 {
+    color: #fff;
+    margin-bottom: 30px;
+    font-size: 24px;
+}
+
+.input-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 30px;
+}
+
+input {
+    flex: 1;
+    padding: 12px;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+button {
+    padding: 12px 15px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    transition: 0.3s;
+}
+
+/* Modern button styles */
+#addTask {
+    background: #e63946;
+    color: white;
+}
+
+#addTask:hover {
+    background: #d62828;
+}
+
+#clearAll {
+    background: #e63946;
+    color: white;
+    width: 100%;
+    margin-top: 20px;
+}
+
+#clearAll:hover {
+    background: #d62828;
+}
+
+#searchInput{
+    margin-bottom: 20px;
+}
+
+/* Stylish Task List */
+ul {
+    list-style: none;
+    margin-top: 15px;
+    text-align: left;
+    padding: 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+ul li {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 15px 2px 15px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    transition: 0.3s;
+}
+
+ul li:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Task delete button */
+ul li button {
+    background: none;
+    border: none;
+    color: #ff6b6b;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+#taskList::-webkit-scrollbar {
+    width: 8px; /* Slim and modern */
+}
+
+#taskList::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05); /* Even more transparent track */
+    border-radius: 10px;
+}
+
+#taskList::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #ff4d4d, #e63946); /* Softer red gradient */
+    border-radius: 10px;
+    transition: background 0.3s;
+}
+
+#taskList::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #e63946, #c92a2a); /* Slightly darker on hover */
+}
+
+/* Smooth scrolling behavior */
+#taskList {
+    scrollbar-width: thin;
+    scrollbar-color: #e63946 rgba(255, 255, 255, 0.05);
+}