Skip to content

Commit 178491a

Browse files
PBJIPBJI
authored
Merge pull request #813 from sujitmahapatra/master
Added my Task Manager Website (ToDoList App)
2 parents 0098ec3 + de69ee0 commit 178491a

File tree

6 files changed

+304
-0
lines changed

6 files changed

+304
-0
lines changed

‎ToDoList/sujitmahapatra/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Task Manager Web App 📝✅
2+
3+
## Overview
4+
5+
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.
6+
7+
## Screenshots
8+
9+
![Task Manager Screenshot 1](task%20manager%20screenshot%201.png)
10+
![Task Manager Screenshot 2](task%20manager%20screenshot%202.png)
11+
12+
<h1 align="center">
13+
👉<a href="https://sm-taskmanager.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
14+
</h1>
15+
16+
## Features
17+
18+
- **Task Creation:** Easily add new tasks with a user-friendly input field.
19+
- **Task Prioritization:** Prioritize your tasks to stay organized.
20+
- **Completion Tracking:** Mark tasks as completed with a single click.
21+
- **Task Removal:** Remove completed or unwanted tasks from the list.
22+
- **Responsive Design:** Enjoy a seamless experience on various devices and screen sizes.
23+
24+
## Technologies Used
25+
26+
- HTML
27+
- CSS
28+
- JavaScript
29+
30+
## Getting Started
31+
32+
### Prerequisites
33+
34+
- GitHub
35+
- A modern web browser
36+
37+
### Installation
38+
39+
1. Clone the repository to your local machine:
40+
41+
```bash
42+
git clone https://github.com/your-username/task-manager-web-app.git
43+
Open the project folder in your code editor.
44+
45+
Launch the index.html file in your web browser to start using the Task Manager.
46+
47+
Usage
48+
To add a new task, type the task description and press Enter or click the "Add Task" button.
49+
Prioritize tasks by moving the most important ones to the top.
50+
Mark tasks as completed by clicking the "Completed" button.
51+
Remove tasks by clicking the "Delete" button.
52+
Contributions
53+
Contributions are welcome! If you'd like to improve this project or fix any issues, please fork the repository and submit a pull request.
54+
55+
License
56+
This project is licensed under the MIT License.
57+
58+
Contact
59+
If you have any questions or suggestions, feel free to contact us.
60+
61+
Happy task managing! 🚀

‎ToDoList/sujitmahapatra/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
7+
8+
<link rel="stylesheet" href="styles.css">
9+
<title>SM-Task Manager</title>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<h1 class="title">SM - Task Manager</h1>
14+
<div class="task-form">
15+
<input type="text" id="task-input" placeholder="Enter a new task..." class="task-input">
16+
<button id="add-task-btn" class="add-task-btn">Add Task</button>
17+
</div>
18+
<ul id="task-list" class="task-list"></ul>
19+
<center><button id="clear-all-btn" class="clear-all-btn">Clear All</button>
20+
<p><b>Made with ❤️ by Mr. Sujit</b></p>
21+
</center>
22+
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

‎ToDoList/sujitmahapatra/script.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const taskInput = document.getElementById("task-input");
3+
const addTaskBtn = document.getElementById("add-task-btn");
4+
const taskList = document.getElementById("task-list");
5+
const clearAllBtn = document.getElementById("clear-all-btn");
6+
7+
addTaskBtn.addEventListener("click", function () {
8+
const taskText = taskInput.value.trim();
9+
if (taskText !== "") {
10+
addTask(taskText);
11+
taskInput.value = "";
12+
clearAllBtn.style.display = "inline-block"; // Show the button
13+
}
14+
});
15+
16+
function addTask(taskText) {
17+
const li = document.createElement("li");
18+
19+
li.innerHTML = `
20+
<div class="flex justify-between items-center">
21+
<span>${taskText}</span>
22+
<input type="datetime-local" class="expected-completion">
23+
<button class="complete-btn bg-green-500 hover:bg-green-600 text-white py-1 px-2 rounded">Completed</button>
24+
<button class="delete-btn bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded">Delete</button>
25+
</div>
26+
`;
27+
28+
const completeBtn = li.querySelector(".complete-btn");
29+
completeBtn.addEventListener("click", function () {
30+
li.classList.toggle("completed");
31+
});
32+
33+
const deleteBtn = li.querySelector(".delete-btn");
34+
deleteBtn.addEventListener("click", function () {
35+
li.remove();
36+
// Check the number of tasks to show/hide the "Clear All" button
37+
if (taskList.children.length === 0) {
38+
clearAllBtn.style.display = "none"; // Hide the button
39+
}
40+
});
41+
42+
// Use setTimeout to add the animation class after a slight delay
43+
setTimeout(function () {
44+
li.classList.add("task-entry");
45+
}, 10);
46+
47+
taskList.appendChild(li);
48+
}
49+
50+
taskInput.addEventListener("keyup", function (event) {
51+
if (event.key === "Enter") {
52+
addTaskBtn.click();
53+
}
54+
});
55+
56+
clearAllBtn.addEventListener("click", function () {
57+
taskList.innerHTML = ""; // Clear all tasks
58+
clearAllBtn.style.display = "none"; // Hide the button
59+
});
60+
});

‎ToDoList/sujitmahapatra/styles.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
body {
2+
background: linear-gradient(to bottom, #6b46c1, #f9a8b6);
3+
background-repeat: no-repeat; /* Prevent background repetition */
4+
background-attachment: fixed; /* Keep the background fixed */
5+
background-size: cover; /* Cover the entire background */
6+
font-family: Arial, sans-serif;
7+
color: #333;
8+
9+
/* Center the container both horizontally and vertically */
10+
display: flex;
11+
justify-content: center; /* Center horizontally */
12+
align-items: center; /* Center vertically */
13+
min-height: 100vh; /* Ensure the container takes the full viewport height */
14+
}
15+
16+
/* Container Styles */
17+
.container {
18+
width: 90%;
19+
max-width: 450px;
20+
padding: 20px;
21+
background-color: #fff;
22+
border-radius: 10px;
23+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24+
overflow-x: hidden;
25+
overflow-y: auto;
26+
max-height: 100vh; /* Set a maximum height for the container */
27+
}
28+
29+
/* Title Styles */
30+
.title {
31+
text-align: center;
32+
font-size: 24px;
33+
margin-bottom: 20px;
34+
font-weight: bold;
35+
cursor: pointer;
36+
transition: color 0.3s, transform 0.4s;
37+
font-family: "Montserrat", sans-serif;
38+
}
39+
.title:hover {
40+
color: #6b46c1;
41+
transform: scale(1.50);
42+
}
43+
/* Task Form Styles */
44+
.task-form {
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
}
49+
50+
.task-input {
51+
width: 100%;
52+
padding: 10px;
53+
border: 1px solid #ccc;
54+
border-radius: 5px;
55+
margin-bottom: 10px;
56+
font-size: 16px;
57+
}
58+
59+
.add-task-btn {
60+
background-color: #007bff;
61+
color: #fff;
62+
border: none;
63+
border-radius: 5px;
64+
padding: 10px 20px;
65+
cursor: pointer;
66+
font-size: 16px;
67+
}
68+
69+
.add-task-btn:hover {
70+
background-color: #0056b3;
71+
}
72+
73+
/* Task List Styles */
74+
.task-list {
75+
list-style: none;
76+
padding: 0;
77+
}
78+
79+
li {
80+
display: flex;
81+
justify-content: space-between;
82+
align-items: center;
83+
margin: 0;
84+
padding: 10px;
85+
background-color: #f9f9f9;
86+
border-radius: 5px;
87+
margin-bottom: 10px;
88+
font-size: 16px;
89+
}
90+
91+
.completed {
92+
text-decoration: line-through;
93+
opacity: 0.5;
94+
}
95+
96+
.delete-btn {
97+
background-color: #ff3333;
98+
color: #fff;
99+
border: none;
100+
border-radius: 5px;
101+
cursor: pointer;
102+
margin-top: 5px;
103+
padding: 5px 10px;
104+
font-size: 14px;
105+
}
106+
107+
.delete-btn:hover {
108+
background-color: #cc0000;
109+
}
110+
111+
/* Expected Completion Styles */
112+
.expected-completion {
113+
flex-grow: 1; /* Expand to fill available space */
114+
margin-right: 10px; /* Add margin to separate from other buttons */
115+
padding: 5px;
116+
border: 1px solid #ccc;
117+
border-radius: 5px;
118+
font-size: 14px;
119+
}
120+
121+
/* Completed Button Styles */
122+
.complete-btn {
123+
background-color: #33cc33;
124+
color: #fff;
125+
border: none;
126+
border-radius: 5px;
127+
padding: 5px 10px;
128+
font-size: 14px;
129+
cursor: pointer;
130+
}
131+
132+
.complete-btn:hover {
133+
background-color: #2ca02c;
134+
}
135+
/* Clear All Button Styles */
136+
.clear-all-btn {
137+
display: none; /* Hide the button by default */
138+
background-color: #ff3333;
139+
color: #fff;
140+
border: none;
141+
border-radius: 5px;
142+
padding: 10px 20px;
143+
font-size: 14px;
144+
cursor: pointer;
145+
margin-top: 10px;
146+
text-align: center;
147+
}
148+
149+
.clear-all-btn:hover {
150+
background-color: #cc0000;
151+
}
152+
153+
p{
154+
color: grey;
155+
font-size: 13px;
156+
margin-top: 20px;
157+
}

‎ToDoList/sujitmahapatra/task manager screenshot 1.png‎

61.9 KB
Loading

‎ToDoList/sujitmahapatra/task manager screenshot 2.png‎

83.3 KB
Loading

0 commit comments

Comments
 (0)