-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (172 loc) · 10.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List With JavaScript No Local Storage</title>
<link rel="stylesheet" href="css/fontello.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
<link rel="stylesheet" href="css/javascript.css">
<link rel="stylesheet" href="css/output.css">
</head>
<body class="bg-[#a39bd2]">
<header class="w-full h-[300px] md:h-[200px] bg-[#7b74a3] mx-auto">
<!-- my signature -->
<figure class=" group w-[100px] h-[100px] flex flex-wrap fixed z-10 top-[10px] bottom-[40px] rounded-full cursor-pointer ">
<img class="bg-[#5d519f] relative z-10 w-full h-full object-cover rounded-full *:text-white" src="img/me.png" alt="">
<section class="group-hover:right-[-41px] group-hover:opacity-100 group-hover:visible w-[40px] h-[90px] absolute top-0 right-[70px] opacity-0 invisible duration-[.4s] ease-linear hover:right-[-45px] hover:opacity-100 hover:visible">
<a class="flex items-center justify-center w-full h-[40px] rounded-full bg-[#5d519f] text-white flex-[18px] mb-[5px] duration-[.3s] ease-linear relative hover:bg-pink hover:text-black" href="https://github.com/SabaAsgarian" target="_blank"><i class="icon-github-circled-1"></i></a>
<a class="flex items-center justify-center w-full h-[40px] rounded-full bg-[#5d519f] text-white flex-[18px] mb-[5px] duration-[.3s] ease-linear relative hover:bg-pink hover:text-black" href="https://www.linkedin.com/in/saba-asgarian-69161088?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank"><i class=" icon-linkedin-3 "></i></a>
<a class="flex items-center justify-center w-full h-[40px] rounded-full bg-[#5d519f] text-white flex-[18px] mb-[5px] duration-[.3s] ease-linear relative hover:bg-pink hover:text-black" href="https://www.instagram.com/saba_asgarian_web?igsh=M2Z2dTU3cHFmeW1o&utm_source=qr" target="_blank"><i class=" icon-instagram-1"></i></a>
<a class="flex items-center justify-center w-full h-[40px] rounded-full bg-[#5d519f] text-white flex-[18px] mb-[5px] duration-[.3s] ease-linear relative hover:bg-pink hover:text-black" href="mailto:computer.sabaa@gmail.com" target="_blank"><i class="icon-mail"></i></a>
</section>
</figure>
<!-- my signature -->
<section class="w-full h-full flex-wrap *:text-white flex justify-center items-end *:text-center md:justify-around py-[50px]">
<p class="w-full h-1/2 pt-[20px]">Developed By <a class="hover:text-[#d4ade0]" href="https://github.com/SabaAsgarian" target="_blank">Saba Asgarian</a> with Tailwind & JavaScript</p>
<ul class="w-full h-1/2 ps-[20px] flex flex-wrap *:text-[#fef6e6] text-[15px] lg:text-[24px] *:text-[15px] *:lg:text-[30px] justify-center items-center *:mx-[8px]">
<li><a class="flex py-[4px] px-[4px] hover:bg-[#d4ade0] justify-center items-center bg-[#45455f]" href="https://github.com/SabaAsgarian" target="_blank"><i class="icon-github-circled-1 "></i></a></li>
<li><a class="flex py-[4px] px-[4px] hover:bg-[#d4ade0] justify-center items-center bg-[#45455f]" href="https://www.linkedin.com/in/saba-asgarian-69161088?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank"><i class=" icon-linkedin-3"></i></a></li>
<li><a class="flex py-[4px] px-[4px] hover:bg-[#d4ade0] justify-center items-center bg-[#45455f]" href="https://www.instagram.com/saba_asgarian_web?igsh=M2Z2dTU3cHFmeW1o&utm_source=qr" target="_blank"><i class=" icon-instagram-1"></i></a></li>
<li> <a class="flex py-[4px] px-[4px] hover:bg-[#d4ade0] justify-center items-center bg-[#45455f]" href="mailto:computer.sabaa@gmail.com"><i class="icon-mail"></i></a></li>
</ul>
</section>
<span class="relative">
<a class="hover:bg-[#d4ade0] fixed right-[2%] bottom-[5%] bg-[#333333cc] flex h-[50px] w-[40px] justify-center items-center text-white text-[18px] " href="#"><i class="icon-up-open-2"></i></a>
</span>
</header>
<section class="w-full min-h-[150vh] h-auto mx-auto *:font-gh bg-[#a39bd2] *:text-[#4B4A49]">
<div class="row flex justify-center items-center ">
<section class="main w-[95%] h-[500px] md:w-[80%] lg:w-[45%] bg-[#f1f5f8] bg mt-[20%] md:mt-[15%] shadow-xl shadow-[#07658D] ">
<div class="todo bg w-full bg-[#f1f5f8] bg mt-[10%] h-auto flex flex-wrap justify-center items-center ">
<div class="h-[20%] w-full flex justify-around pt-[2%] ">
<img class="rotate rotate-[-20deg] flex py-[4px] px-[4px] justify-center items-center object-cover" src="img/icons8-laptop-50.png" alt="">
<h1 class="rotate text-[15px] lg:text-[30px] font-extrabold bg-[#00ffc4b3] py-[4px] px-[4px] flex justify-center items-center text-center " >To-Do List</h1>
</div>
<h3 class="text-[20px] w-full h-[20%] flex justify-center items-center text-center pt-[5%] pb-[3%]">~ Today I Need To ~</h3>
<div class="h-[20%] w-[95%] flex justify-center items-center">
<input class="bg-transparent " type="text" name="" id="inp" maxlength="70" placeholder="max text length is 70 character">
<button id="add" class="py-[8px] px-[8px] bg-white text-[12px] ml-[3%]">Submit</button>
<button id="update" onclick="myUpdate(this)" class="py-[8px] px-[8px] bg-white text-[12px] ml-[3%]">Update</button>
</div>
<ul id="list" class="flex flex-wrap w-[95%] justify-center items-center h-full bg-transparent "></ul>
</div>
</section>
</div>
</section>
</body>
<script>
let flag=1
let myId=''
const inp = document.getElementById('inp')
const add = document.getElementById('add')
const update = document.getElementById('update')
const list = document.getElementById('list')
const btn =document.querySelector('.todo>button')
const b =document.querySelector('ul>li>#kar>#wr>b')
// ENTER - 13
add.addEventListener('click', ()=>{
add.style.transform='rotate(0deg)'
let temp = inp.value
if(temp == ''){
alert('Please write somthing as your todo-list!!!')
}else{
const li = document.createElement('li')
let truncatedText = temp.slice(0, 70) + (temp.length > 70 ? '...' : '')
li.innerHTML = `
<div class=' w-full h-full flex justify-center items-center ml-[10%]' id="kar">
<div class="w-[70%] h-full " id="wr">
<b class="stufftodo text-[15px]" id="stufftodo">${truncatedText}</b>
</div>
<div class="w-[30%] h-full flex flex-wrap">
<input type="checkbox" onclick='mySelect(this)' id="done">
<span onclick='_delete(this)' id="delete">
<i class="icon-trash-empty"></i>
</span>
<em onclick="myEdit(this)" id="edit">
<i class="icon-pencil-3"></i>
</em>
<button id="mcopy" onclick='myCopy(this)'><i class=" icon-clipboard"></i>
</div>
</div>
`
li.setAttribute('id','li'+flag)
list.appendChild(li)
inp.value=null
inp.focus()
flag++
// Save to local storage
saveToLocalStorage();
}
})
function mySelect(item){
item.parentElement.previousElementSibling.style.textDecoration='line-through'
saveToLocalStorage(); // Update local storage after selection
}
function _delete(item) {
item.parentElement.parentElement.parentElement.style.transform='translateX(-500px)'
setTimeout(() => {
item.parentElement.parentElement.parentElement.remove()
saveToLocalStorage(); // Update local storage after deletion
}, 1000);}
function myCopy(item){
let txt=item.parentElement.previousElementSibling.innerText
navigator.clipboard.writeText(txt)
alert('The Text You Chose Has Been Copied To Your Clipboard!!!')
}
function myEdit(item) {
add.style.display = 'none';
update.style.display = 'flex';
inp.value = item.parentElement.previousElementSibling.innerText;
myId = item.parentElement.parentElement;
}
function myUpdate(item) {
add.style.display = 'flex';
update.style.display = 'none';
let temp = inp.value;
myId.querySelector('#wr > b').innerText = temp;
inp.value = '';
saveToLocalStorage(); // Update local storage after editing
}
// New function to save the current state to local storage
function saveToLocalStorage() {
const todos = [];
const items = document.querySelectorAll('#list li');
items.forEach(item => {
const text = item.querySelector('.stufftodo').innerText;
const isChecked = item.querySelector('input[type="checkbox"]').checked;
todos.push({ text, isChecked });
});
localStorage.setItem('todos', JSON.stringify(todos));
}
// New function to load todos from local storage
function loadFromLocalStorage() {
const todos = JSON.parse(localStorage.getItem('todos')) || [];
todos.forEach((todo, index) => {
const li = document.createElement('li');
li.innerHTML = `
<div class=' w-full h-full flex justify-center items-center ml-[10%]' id="kar">
<div class="w-[70%] h-full " id="wr">
<b class="stufftodo text-[15px]" id="stufftodo">${todo.text}</b>
</div>
<div class="w-[30%] h-full flex flex-wrap">
<input type="checkbox" ${todo.isChecked ? 'checked' : ''} onclick='mySelect(this)' id="done">
<span onclick='_delete(this)' id="delete">
<i class="icon-trash-empty"></i>
</span>
<em onclick="myEdit(this)" id="edit">
<i class="icon-pencil-3"></i>
</em>
<button id="mcopy" onclick='myCopy(this)'><i class=" icon-clipboard"></i>
</div>
</div>
`;
li.setAttribute('id', 'li' + (index + 1));
list.appendChild(li);
});
}
// Call loadFromLocalStorage on page load
window.onload = loadFromLocalStorage;
</script>
</html>