Skip to content

Create index.html #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lognoroy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create index.html #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
348 changes: 348 additions & 0 deletions TODO App project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,348 @@
<!DOCTYPE html>
<html lang="en">
<head>

<!-- Website Title -->
<title>MYDAY</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<!-- Meta Tags For Search Engine Optimiztion -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Font Awesome Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>

<!-- CSS Stylesheet Import Link -->
<link rel="stylesheet" type="text/css" href="css/style.css">


<style>


body{
font-family: sans-serif;
background-color: #e5e5e5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

}



/**
* ! app section Start from here
**/

.app
{
width: 300px;
height: 500px;
border: 5px solid #abcea1;
border-radius: 8px;
padding: 15px;
background-color: #fff;
overflow-y: scroll;
}
.app::-webkit-scrollbar {
width: 0 !important;
}





/**
* ! heading part section Start from here
**/


#addnew
{
background-color: rgba(171,206,161,0.35);
border-radius: 5px;
display: flex;
align-items: center;
justify-content:space-between;
padding: 5px 10px;
cursor: pointer;
}

.fa-plus
{
background-color: #abcea1;
padding: 3px;
border-radius: 3px;

}



/**
* ! task section Start from here
**/

#tasks
{
display: grid;
gap: 14px;
}



#tasks div
{
background-color: #e2eede;
border:3px solid #abcea1;
padding: 5px;
border-radius: 6px;
display:grid;
gap:4px;
}

#msg
{
color: red;
}

.options
{
display: flex;
justify-content: center;
gap: 20px;
}

.options i{
cursor: pointer;
}

</style>

</head>
<body>


<!-- Website starts-->

<!--
/**
* ! app section Start from here
**/
-->

<div class="app">

<h4>MYDAY</h4>

<div id="addnew" data-bs-toggle="modal" data-bs-target="#form" class="my-3">
<span>Add New Task</span>
<i class="fas fa-plus"></i>
</div>

<h5 class="text-center my-3">Tasks</h5>




<!--
/**
* ! modal section Start from here
**/
-->


<!-- Button trigger modal -->

<!-- Modal -->
<form class="modal fade" id="form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Task Title</p>
<input class="form-control" type="text" name="" id="textInput">
<div id="msg"></div>

<br>
<p>Due Date</p>
<input class="form-control" type="date" name="" id="dateInput">
<br>
<p>Description</p>
<textarea class="form-control" name="" id="textarea" cols="30" rows="5"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="add">Add</button>
</div>
</div>
</div>
</form>

<!--
/**
* ! modal section ends here
**/
-->



<!--
/**
* ! task section Start from here
**/
-->

<div id="tasks">
</div>

<!--
/**
* ! task section ends here
**/
-->

</div>

<!--
/**
* ! app section ends here
**/
-->


<script>

let form=document.getElementById("form");
let textInput=document.getElementById("textInput");
let dateInput=document.getElementById("dateInput");
let textarea=document.getElementById("textarea");
let msg=document.getElementById("msg");
let tasks=document.getElementById("tasks");
let add=document.getElementById("add");

form.addEventListener('submit',(e)=>
{
e.preventDefault();
formValidation();
});


let formValidation=()=>
{
if(textInput.value === "")
{
msg.innerHTML="Text cannot be blank";
}
else
{
msg.innerHTML="";
acceptData();
add.setAttribute("data-bs-dismiss","modal");
add.click();

(()=>
{
add.setAttribute("data-bs-dismiss","");
})();

}
}

let data=[];
let acceptData=()=>
{
data.push
(
{
"text":textInput.value,
"date":dateInput.value,
"description":textarea.value
}
);
localStorage.setItem("data",JSON.stringify(data));
createTask();
}

let createTask=()=>
{
tasks.innerHTML="";
data.map((x,y)=>
{
let {text,date,description}=x;
tasks.innerHTML+=
`
<div id="${y}">
<span class="fw-bold">${text}</span>
<span class="small text-secondary">${date}</span>
<p>${description}</p>
<span class="options">
<i class="fas fa-edit" onclick="editTask(this)" data-bs-toggle="modal" data-bs-target="#form"></i>
<i class="fas fa-trash-alt" onclick="deleteTask(this);createTask()"></i>
</span>
</div>
`
});
resetForm();
}

let resetForm=()=>
{
textInput.value="";
dateInput.value="";
textarea.value="";
}

let deleteTask=(e)=>
{
e.parentElement.parentElement.remove();
data.splice(e.parentElement.parentElement.id,1);
localStorage.setItem("data",JSON.stringify(data));
}

let editTask=(e)=>
{
let selectItem=e.parentElement.parentElement;
textInput.value=selectItem.children[0].innerHTML;
dateInput.value=selectItem.children[1].innerHTML;
textarea.value=selectItem.children[2].innerHTML;

selectItem.remove();
data.splice(selectItem.id,1);
localStorage.setItem("data",JSON.stringify(data));
}



(()=>
{
data= JSON.parse(localStorage.getItem("data")) || [];
createTask();

})();









</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <script src="js/script.js"></script> -->
</body>
</html>