thinkswell · PBJI · Oct 10, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/ToDoList/sujitmahapatra/README.md b/ToDoList/sujitmahapatra/README.md
@@ -0,0 +1,61 @@
+# Task Manager Web App 📝✅
+
+## Overview
+
+Welcome to the Task Manager Web App repository! This project provides a responsive web-based task manager that allows users to create, manage, prioritize, and track tasks efficiently.
+
+## Screenshots
+
+![Task Manager Screenshot 1](task%20manager%20screenshot%201.png)
+![Task Manager Screenshot 2](task%20manager%20screenshot%202.png)
+
+<h1 align="center">
+  👉<a href="https://sm-taskmanager.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+</h1>
+
+## Features
+
+- **Task Creation:** Easily add new tasks with a user-friendly input field.
+- **Task Prioritization:** Prioritize your tasks to stay organized.
+- **Completion Tracking:** Mark tasks as completed with a single click.
+- **Task Removal:** Remove completed or unwanted tasks from the list.
+- **Responsive Design:** Enjoy a seamless experience on various devices and screen sizes.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Getting Started
+
+### Prerequisites
+
+- GitHub
+- A modern web browser
+
+### Installation
+
+1. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/your-username/task-manager-web-app.git
+Open the project folder in your code editor.
+
+Launch the index.html file in your web browser to start using the Task Manager.
+
+Usage
+To add a new task, type the task description and press Enter or click the "Add Task" button.
+Prioritize tasks by moving the most important ones to the top.
+Mark tasks as completed by clicking the "Completed" button.
+Remove tasks by clicking the "Delete" button.
+Contributions
+Contributions are welcome! If you'd like to improve this project or fix any issues, please fork the repository and submit a pull request.
+
+License
+This project is licensed under the MIT License.
+
+Contact
+If you have any questions or suggestions, feel free to contact us.
+
+Happy task managing! 🚀
diff --git a/ToDoList/sujitmahapatra/index.html b/ToDoList/sujitmahapatra/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+
+    <link rel="stylesheet" href="styles.css">
+    <title>SM-Task Manager</title>
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">SM - Task Manager</h1>
+        <div class="task-form">
+            <input type="text" id="task-input" placeholder="Enter a new task..." class="task-input">
+            <button id="add-task-btn" class="add-task-btn">Add Task</button>
+        </div>
+        <ul id="task-list" class="task-list"></ul>
+      <center><button id="clear-all-btn" class="clear-all-btn">Clear All</button>
+        <p><b>Made with ❤️ by Mr. Sujit</b></p>
+      </center>
+
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/ToDoList/sujitmahapatra/script.js b/ToDoList/sujitmahapatra/script.js
@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const taskInput = document.getElementById("task-input");
+    const addTaskBtn = document.getElementById("add-task-btn");
+    const taskList = document.getElementById("task-list");
+    const clearAllBtn = document.getElementById("clear-all-btn");
+
+    addTaskBtn.addEventListener("click", function () {
+        const taskText = taskInput.value.trim();
+        if (taskText !== "") {
+            addTask(taskText);
+            taskInput.value = "";
+            clearAllBtn.style.display = "inline-block"; // Show the button
+        }
+    });
+
+    function addTask(taskText) {
+        const li = document.createElement("li");
+
+        li.innerHTML = `
+            <div class="flex justify-between items-center">
+                <span>${taskText}</span>
+                <input type="datetime-local" class="expected-completion">
+                <button class="complete-btn bg-green-500 hover:bg-green-600 text-white py-1 px-2 rounded">Completed</button>
+                <button class="delete-btn bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded">Delete</button>
+            </div>
+        `;
+
+        const completeBtn = li.querySelector(".complete-btn");
+        completeBtn.addEventListener("click", function () {
+            li.classList.toggle("completed");
+        });
+
+        const deleteBtn = li.querySelector(".delete-btn");
+        deleteBtn.addEventListener("click", function () {
+            li.remove();
+            // Check the number of tasks to show/hide the "Clear All" button
+            if (taskList.children.length === 0) {
+                clearAllBtn.style.display = "none"; // Hide the button
+            }
+        });
+
+        // Use setTimeout to add the animation class after a slight delay
+        setTimeout(function () {
+            li.classList.add("task-entry");
+        }, 10);
+
+        taskList.appendChild(li);
+    }
+
+    taskInput.addEventListener("keyup", function (event) {
+        if (event.key === "Enter") {
+            addTaskBtn.click();
+        }
+    });
+
+    clearAllBtn.addEventListener("click", function () {
+        taskList.innerHTML = ""; // Clear all tasks
+        clearAllBtn.style.display = "none"; // Hide the button
+    });
+});
diff --git a/ToDoList/sujitmahapatra/styles.css b/ToDoList/sujitmahapatra/styles.css
@@ -0,0 +1,157 @@
+body {
+    background: linear-gradient(to bottom, #6b46c1, #f9a8b6);
+    background-repeat: no-repeat; /* Prevent background repetition */
+    background-attachment: fixed; /* Keep the background fixed */
+    background-size: cover; /* Cover the entire background */
+    font-family: Arial, sans-serif;
+    color: #333;
+
+    /* Center the container both horizontally and vertically */
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    min-height: 100vh; /* Ensure the container takes the full viewport height */
+}
+
+/* Container Styles */
+.container {
+    width: 90%;
+    max-width: 450px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  overflow-x: hidden;  
+  overflow-y: auto;
+    max-height: 100vh; /* Set a maximum height for the container */
+}
+
+/* Title Styles */
+.title {
+    text-align: center;
+    font-size: 24px;
+    margin-bottom: 20px;
+    font-weight: bold;
+    cursor: pointer; 
+    transition: color 0.3s, transform 0.4s;
+    font-family: "Montserrat", sans-serif;
+}
+.title:hover {
+    color: #6b46c1;
+  transform: scale(1.50);
+}
+/* Task Form Styles */
+.task-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.task-input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+.add-task-btn {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.add-task-btn:hover {
+    background-color: #0056b3;
+}
+
+/* Task List Styles */
+.task-list {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+.completed {
+    text-decoration: line-through;
+    opacity: 0.5;
+}
+
+.delete-btn {
+    background-color: #ff3333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 5px;
+    padding: 5px 10px;
+    font-size: 14px;
+}
+
+.delete-btn:hover {
+    background-color: #cc0000;
+}
+
+/* Expected Completion Styles */
+.expected-completion {
+    flex-grow: 1; /* Expand to fill available space */
+    margin-right: 10px; /* Add margin to separate from other buttons */
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+/* Completed Button Styles */
+.complete-btn {
+    background-color: #33cc33;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.complete-btn:hover {
+    background-color: #2ca02c;
+}
+/* Clear All Button Styles */
+.clear-all-btn {
+    display: none; /* Hide the button by default */
+    background-color: #ff3333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-top: 10px;
+    text-align: center;
+}
+
+.clear-all-btn:hover {
+    background-color: #cc0000;
+}
+
+p{
+  color: grey;
+  font-size: 13px;
+  margin-top: 20px;
+}
diff --git a/ToDoList/sujitmahapatra/task manager screenshot 1.png b/ToDoList/sujitmahapatra/task manager screenshot 1.png
diff --git a/ToDoList/sujitmahapatra/task manager screenshot 2.png b/ToDoList/sujitmahapatra/task manager screenshot 2.png