diff --git a/ToDoList/sujitmahapatra/README.md b/ToDoList/sujitmahapatra/README.md new file mode 100644 index 000000000..e4c83abfa --- /dev/null +++ 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) + +

+ 👉Live Demo +

+ +## 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 new file mode 100644 index 000000000..cef3365ef --- /dev/null +++ b/ToDoList/sujitmahapatra/index.html @@ -0,0 +1,26 @@ + + + + + + + + + SM-Task Manager + + +
+

SM - Task Manager

+
+ + +
+ +
+

Made with ❤️ by Mr. Sujit

+
+ +
+ + + diff --git a/ToDoList/sujitmahapatra/script.js b/ToDoList/sujitmahapatra/script.js new file mode 100644 index 000000000..3175c2976 --- /dev/null +++ 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 = ` +
+ ${taskText} + + + +
+ `; + + 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 new file mode 100644 index 000000000..fda376c6a --- /dev/null +++ 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 new file mode 100644 index 000000000..16771e2af Binary files /dev/null and b/ToDoList/sujitmahapatra/task manager screenshot 1.png differ diff --git a/ToDoList/sujitmahapatra/task manager screenshot 2.png b/ToDoList/sujitmahapatra/task manager screenshot 2.png new file mode 100644 index 000000000..9eed89a29 Binary files /dev/null and b/ToDoList/sujitmahapatra/task manager screenshot 2.png differ