Commit f7c175f5 authored by sparshtripathi's avatar sparshtripathi
Browse files

added local storage.

parent 6eef7001
......@@ -41,6 +41,7 @@
<div class="todohead">
<h1 class="animate__animated animate__fadeIn" id="title" style="font-family: 'Zen Tokyo Zoo';">TO-DO
LIST</h1>
</div>
</header>
<div class="formdiv">
......
......@@ -4,17 +4,51 @@ let ultasks = document.querySelector('.ultasks');
let listitem;
let header = document.getElementById('header');
let clearbtn = document.querySelector('.clearbtn');
let savedTasks;
addtasktxt.focus();
let starredCount = 2000;
let defaultTasks = [["Click text to edit task.", 0], ["Tick to complete task", 1], ["Trash to delete task.", 0], ["Star to pin to top", 0]];
let taskInfo;
let defaultTasks = [{
taskText: "Click text to edit task.",
taskId: Math.random(),
isChecked: false,
isStarred: false
}, {
taskText: "Tick to complete task.",
taskId: Math.random(),
isChecked: true,
isStarred: false
}, {
taskText: "Trash to delete task.",
taskId: Math.random(),
isChecked: false,
isStarred: false
}, {
taskText: "Star to pin to top.",
taskId: Math.random(),
isChecked: false,
isStarred: false
}];
defaultTasks.reverse();
let localTasks = localStorage.getItem("tasks");
let taskStorage = defaultTasks;
taskStorage = localTasks ? (JSON.parse(localTasks)) : defaultTasks;
taskStorage.forEach(e => {
addTask(e.taskText, 1, e.isChecked, true);
});
function pushToLocal() {
localStorage.setItem('tasks', JSON.stringify(taskStorage));
}
$(window).scroll(function () {
if (window.matchMedia("(max-width: 1000px)").matches) {
console.log('small');
if ($(window).scrollTop() >= header.offsetHeight - 20) {
$('#content').addClass('fix-search');
} else {
......@@ -23,7 +57,6 @@ $(window).scroll(function () {
}
else {
console.log('big');
if ($(window).scrollTop() >= header.offsetHeight - 18) {
$('#content').addClass('fix-search');
} else {
......@@ -35,8 +68,7 @@ $(window).scroll(function () {
clearbtn.addEventListener('click', function () {
const taskitems = document.querySelectorAll('ul li');
ultasks.classList.remove("animate__slideInUp");
ultasks.classList.add("animate__animated");
ultasks.classList.remove("animate__fadeIn");
ultasks.classList.add("animate__bounceOutRight");
setTimeout(function () {
......@@ -45,27 +77,38 @@ clearbtn.addEventListener('click', function () {
ultasks.classList.remove("animate__bounceOutRight");
}
}, 900);
});
window.localStorage.clear();
taskStorage = [];
});
function addTask(value = addtasktxt.value, noAnimation, isChecked) {
function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
if (value) {
listtxt = document.createElement('div');
taskInfo = {
taskText: value,
taskId: Math.random(),
isChecked: Checked ? true : false,
isStarred: false
};
if (!isInit) {
taskStorage.push(taskInfo);
savedTasks = localStorage.setItem('tasks', JSON.stringify(taskStorage));
}
listitem = document.createElement('li');
listtxt = document.createElement('div');
listitem = document.createElement('li');
listitem.appendChild(listtxt);
listtxt.appendChild(document.createTextNode(value));
ultasks.append(listitem);
listtxt.classList.add("listxt");
if (noAnimation) {
listitem.classList.add('added');
if (isChecked) {
if (Checked) {
listitem.classList.remove('added');
listitem.classList.add("done");
}
......@@ -75,10 +118,7 @@ function addTask(value = addtasktxt.value, noAnimation, isChecked) {
listitem.classList.add("animate__animated");
listitem.classList.add("animate__fadeInLeft");
listitem.classList.add("animate__faster");
setTimeout(function () { listitem.classList.remove("animate__animated"); listitem.classList.remove("animate__fadeInLeft"); listitem.classList.remove("animate__faster"); }, 500);
}
console.log('hello')
listitem.addEventListener('click', onItemClick);
completediv = document.createElement('div');
......@@ -115,27 +155,43 @@ function onItemClick(event) {
console.log(event);
let classList = event.target.classList;
let item = event.target.closest('li');
if (classList.contains('completebtn') || classList.contains('fa-check')) {
event.target.closest('li').classList.toggle('done');
event.target.closest('li').classList.toggle('added');
item.classList.remove("animate__animated");
item.classList.remove("animate__fadeInLeft");
item.classList.remove("animate__faster");
item.classList.toggle('done');
item.classList.toggle('added');
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isChecked = true;
}
});
pushToLocal();
}
else {
if (classList.contains('removebtn') || classList.contains('fa-trash')) {
//event.target.closest('li').classList.remove('added');
//event.target.closest('li').classList.add('delete');
//console.log('test');
event.target.closest('li').classList.add("animate__animated");
event.target.closest('li').classList.add("animate__fadeOutRight");
event.target.closest('li').classList.add("animate__faster");
// if (event.target.closest('li').classList.contains('delete')) {
// setTimeout(function () { event.target.closest('li').remove() }, 300);
// }
item.classList.add("animate__animated");
item.classList.add("animate__fadeOutRight");
item.classList.add("animate__faster");
taskStorage.forEach(e => {
if (event.target.closest('li').textContent === e.taskText) {
index = taskStorage.indexOf(e);
taskStorage.splice(index, 1);
pushToLocal();
}
})
setTimeout(function () {
event.target.closest('li').remove()
item.remove()
}, 500);
}
let i_element = event.target.closest('i');
......@@ -144,20 +200,24 @@ function onItemClick(event) {
if (event.target.closest('li')) {
starredCount--;
event.target.closest('li').style.order = starredCount;
console.log(starredCount);
item.style.order = starredCount;
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isStarred = true;
}
});
pushToLocal();
}
}
else if (classList.contains('fas')) {
i_element.classList = "far fa-star";
event.target.closest('li').style.order = 0;
item.style.order = 0;
}
}
}
addtaskbtn.addEventListener('click', function (e) {
e.preventDefault();
addTask();
......@@ -165,11 +225,11 @@ addtaskbtn.addEventListener('click', function (e) {
function defaultSetup() {
let noAnimation = true;
console.log(defaultTasks.length);
for (let j = defaultTasks.length; j >= 0; --j) {
addTask(defaultTasks[j-1][0], noAnimation, defaultTasks[j - 1][1]);
for (let j = defaultTasks.length; j > 0; --j) {
addTask(defaultTasks[j - 1][0], noAnimation, defaultTasks[j - 1][1]);
}
}
defaultSetup();
......@@ -14,6 +14,7 @@ body::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 50px;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
body {
......@@ -39,6 +40,11 @@ body {
}
} */
.data-netlify-identity-menu {
color: white;
font-size: 10px;
}
.content {
display: flexbox;
flex-direction: row;
......@@ -97,7 +103,7 @@ form {
padding-left: 5px;
padding-right: 5px;
}
.fix-search form{
.fix-search form {
top: 5px;
}
.listxt {
......@@ -179,6 +185,7 @@ input:focus {
height: 100%;
background-color: white;
color: black;
cursor: pointer;
}
.tasklist h1 {
......@@ -227,6 +234,10 @@ input:focus {
margin-left: 30px;
}
.listxt {
letter-spacing: 0.1px;
}
li.added {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
......@@ -315,8 +326,7 @@ li.done div:first-of-type {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
.fix-search .clearbtn{
.fix-search .clearbtn {
visibility: hidden;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment