Skip to content

Commit

Permalink
Merge branch 'main' into content
Browse files Browse the repository at this point in the history
  • Loading branch information
@MahajanPreksha
MahajanPreksha authored Oct 11, 2023
2 parents dfc0c58 + 7864827 commit b201fa6
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 16 deletions.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ <h2 class="text-center mb-4">Add your tasks below</h2>
/>
</form>

<button id="clearAllTasks" class="btn btn-danger clear_btn" onclick="clearAllTasks();">Clear All Tasks</button>

<div class="text-center">
<h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>

Expand Down
76 changes: 67 additions & 9 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ function tasksCheck() {
const children = ulElement.children;


if (children.length === 0) tasksHeading.classList.toggle("hidden")
if (children.length === 0){
tasksHeading.classList.toggle("hidden")
document.querySelector(".clear_btn").style.display = "none";
}
}

document.addEventListener("DOMContentLoaded", tasksCheck);
Expand All @@ -29,6 +32,9 @@ window.onload = () => {
enableTime: false, // If you want to enable time selection as well
dateFormat: "Y-m-d", // Adjust the date format as needed
});

loadTasksFromLocalStorage();

const form1 = document.querySelector("#addForm");
const items = document.getElementById("items");
const submit = document.getElementById("submit");
Expand Down Expand Up @@ -70,6 +76,7 @@ function addItem(e) {

displaySuccessMessage("Text edited successfully");
editItem = null;
saveTasksToLocalStorage();
return false;
}
tasksCheck()
Expand Down Expand Up @@ -101,6 +108,10 @@ function addItem(e) {
if (newItem.trim() === "") return false;
else document.getElementById("item").value = "";

if(newItem.trim() !== "") {
document.querySelector(".clear_btn").style.display = "inline";
}

const li = document.createElement("li");
li.className = "list-group-item";

Expand Down Expand Up @@ -130,13 +141,15 @@ function addItem(e) {
// Create a paragraph element to display the creation date and time
const dateTimeParagraph = document.createElement("p");
dateTimeParagraph.className = "text-muted";
dateTimeParagraph.id = 'created-at';
dateTimeParagraph.style.fontSize = "15px"; // Set font size
dateTimeParagraph.style.margin = "0 19px"; // Set margin
dateTimeParagraph.appendChild(document.createTextNode("Created: " + creationDateTime));

// Create a paragraph element for the due date
const dueDateParagraph = document.createElement("p");
dueDateParagraph.className = "text-muted";
dueDateParagraph.id = 'task-dueDate';
dueDateParagraph.style.fontSize = "15px";
dueDateParagraph.style.margin = "0 19px";
dueDateParagraph.appendChild(document.createTextNode("Due Date: "));
Expand All @@ -155,6 +168,7 @@ function addItem(e) {
li.appendChild(dueDateParagraph);

items.appendChild(li);
saveTasksToLocalStorage();
document.getElementById("dueDate").value = "";
}

Expand All @@ -169,10 +183,11 @@ function handleItemClick(e) {
if (e.target.classList.contains("edit")) {
e.preventDefault();
document.getElementById("item").value = e.target.parentElement.childNodes[1].textContent.trim();
document.getElementById("dueDateSpan").textContent = document.getElementById("dueDate").value;
const submit = document.getElementById("submit");
submit.value = "EDIT";
editItem = e;
}
saveTasksToLocalStorage();
}


Expand Down Expand Up @@ -227,7 +242,10 @@ function saveTasksToLocalStorage() {
tasks.forEach((task) => {
const taskText = task.childNodes[1].textContent;
const isCompleted = task.classList.contains("completed");
const taskObj = { text: taskText, completed: isCompleted };
const createdAt = task.querySelector('#created-at').textContent;
const dueDate = task.querySelector('#task-dueDate').textContent;

const taskObj = { text: taskText, completed: isCompleted, createdAt: createdAt, dueDate: dueDate };
tasksArray.push(taskObj);
});

Expand All @@ -238,14 +256,20 @@ function saveTasksToLocalStorage() {
function loadTasksFromLocalStorage() {
const tasks = JSON.parse(localStorage.getItem("tasks"));

if (tasks) {
if (tasks && tasks.length > 0) {
const tasksHeading = document.getElementById("heading-tasks");
tasksHeading.classList.remove("hidden");
document.querySelector(".clear_btn").style.display = "inline";
tasks.forEach((task) => {
const li = document.createElement("li");
li.className = "list-group-item";

if (task.completed){
li.className = "list-group-item completed"
}
// dispatchEvent.className = "form-check"
const completeCheckbox = document.createElement("input");
completeCheckbox.type = "checkbox";
completeCheckbox.className = "form-check-input";
completeCheckbox.className = "form-check-input task-completed";
completeCheckbox.checked = task.completed;
completeCheckbox.addEventListener("change", markAsComplete);

Expand All @@ -260,20 +284,31 @@ function loadTasksFromLocalStorage() {

// Create a click event listener for the edit button
editButton.addEventListener("click", function (e) {
handleEditClick(e);
handleItemClick(li);
});

const dateTimeParagraph = document.createElement("p");
dateTimeParagraph.className = "text-muted";
dateTimeParagraph.id = 'created-at';
dateTimeParagraph.style.fontSize = "15px";
dateTimeParagraph.style.margin = "0 19px";
dateTimeParagraph.appendChild(document.createTextNode("Created: " + new Date().toLocaleString()));
dateTimeParagraph.appendChild(document.createTextNode(task.createdAt));


// Create a paragraph element for the due date
const dueDateParagraph = document.createElement("p");
dueDateParagraph.className = "text-muted";
dueDateParagraph.id = 'task-dueDate';
dueDateParagraph.style.fontSize = "15px";
dueDateParagraph.style.margin = "0 19px";
dueDateParagraph.appendChild(document.createTextNode(task.dueDate));

li.appendChild(completeCheckbox);
li.appendChild(document.createTextNode(task.text));
li.appendChild(deleteButton);
li.appendChild(editButton);
li.appendChild(dateTimeParagraph);
li.appendChild(dueDateParagraph);

items.appendChild(li);
});
Expand Down Expand Up @@ -318,4 +353,27 @@ function toggleMode() {
path.style.fill = '#000'; // Change the fill color to black for light mode
});
}
}
}


function clearAllTasks() {

const ulElement = document.getElementById("items");


// Removes all tasks from the task list
while (ulElement.firstChild) {
ulElement.removeChild(ulElement.firstChild);
}

// Hide the button after the task list is cleared
document.querySelector(".clear_btn").style.display = "none";
console.log("task cleared");

// Hide the tasks heading since there are no tasks left

const tasksHeading = document.getElementById("heading-tasks");
tasksHeading.classList.add("hidden");

saveTasksToLocalStorage();
}
76 changes: 69 additions & 7 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,15 @@ body {
letter-spacing: 10px;
border-right: 5px solid black;
white-space: nowrap;

animation: typing 3s steps(10), cursor 0.4s step-end infinite alternate;

overflow: hidden;
animation-fill-mode: forwards;
}

@keyframes cursor {

50% {
border-color: transparent;
}
Expand All @@ -63,6 +66,7 @@ body {
}
to {
width: 36%;

}
}
.text-center {
Expand All @@ -83,8 +87,10 @@ body.light-mode {
}

body.dark-mode {

background: #0f0000; /* Dark mode background color */
background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Dark mode background image (same as light mode) */

color: #fff; /* Text color for dark mode */
}

Expand All @@ -100,6 +106,7 @@ body.dark-mode::before {
0,
0,
0.9

); /* Adjust the alpha (last) value to control darkness */
z-index: -1;
}
Expand Down Expand Up @@ -129,12 +136,35 @@ body.dark-mode::before {
height: 100%;
text-align: center;
padding: 4rem;
background: rgba(0, 0, 0, 0.2);
/* background: rgba(0, 0, 0, 0.2); */
border-radius: 2em;
backdrop-filter: blur(45px);
border: 10px solid rgba(0, 0, 0, 0.05);
/* border: 10px solid rgba(0, 0, 0, 0.05); */
background-clip: padding-box;
/* box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03); */
}

.light-mode .main {
background: rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
border: 10px solid rgba(0, 0, 0, 0.05);
}

.dark-mode .main {
background: rgba(255, 255, 255, 0.2);
box-shadow: 10px 10px 10px rgba(196, 204, 220, 0.03);
border: 10px solid rgba(255, 255, 255, 0.05);
}

.main {
position: relative;
width: 48rem;
height: 100%;
text-align: center;
padding: 4rem;
border-radius: 2em;
backdrop-filter: blur(45px);
background-clip: padding-box;
}

.main_form {
Expand All @@ -154,6 +184,7 @@ body.dark-mode::before {
font-size: 1.3rem;
margin-top: 0.4rem;
text-align: left;
color: #000;
margin-right: 20px;
border-radius: 5rem !important;
word-break: break-all;
Expand Down Expand Up @@ -185,14 +216,29 @@ body.dark-mode::before {
);
padding: 0.6rem 2rem;
border-radius: 5rem;
text-transform: uppercase;
cursor: pointer;
transition: opacity 0.3s;
border: 2px solid transparent;
}

.form_btn:hover {
opacity: 0.8;
outline: auto;
border: 3px solid rebeccapurple;
.form_btn:hover,
.clear_btn:hover {
opacity: 0.9;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.clear_btn {
color: #fff;
letter-spacing: 0.11rem;
border: none;
background: linear-gradient(to right, rgb(225, 1, 1), rgb(236, 70, 70));
padding: 0.6rem 2rem;
border-radius: 5rem;
cursor: pointer;
transition: opacity 0.3s;
margin: 1rem 0;
display: none;
}

.opacity {
Expand All @@ -206,6 +252,7 @@ body.dark-mode::before {
font-size: 1.2rem;
}


.list{
display: flex;
flex-direction:row;
Expand All @@ -215,6 +262,7 @@ body.dark-mode::before {
.main h2,
h3 {
width: 20rem;

margin: auto;
border-bottom: 2px solid #ffffff;
font-weight: 600;
Expand Down Expand Up @@ -254,10 +302,24 @@ h3 {
}

#dueDate {
outline: none;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
width: 140px;
height: 40px;
height: 50px;
margin-right: 0.8rem;
}

#dueDate:hover {
border-color: rgba(1, 110, 225);
}

#dueDate:hover::placeholder {
color: rgba(1, 110, 225);
opacity: 1;
}

.hidden {
Expand Down

0 comments on commit b201fa6

Please sign in to comment.