Skip to content

Commit a9af97b

Browse files
MaazWebDevMaazWebDev
committed
todo App
1 parent 90b7710 commit a9af97b

File tree

2 files changed

+294
-0
lines changed

2 files changed

+294
-0
lines changed

‎LocalStorage/app.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// 1 Set Item
2+
// 2 Get Item
3+
// 3 Remove Item
4+
// 4 Clear
5+
6+
// console.log(localStorage);
7+
8+
// Store String , Object , Array
9+
// Always String Is Save In Local Storage
10+
11+
// Save Data In Local Storage
12+
// localStorage.setItem('email','maaz@gmail.com')
13+
14+
15+
// Store Array Or Object
16+
17+
// let todos = ['Hp','Dell','Samsung','Lenovo']
18+
19+
// Javascript Object Notation :JSON
20+
// Convert String To Object Or Array
21+
// let stringTodo = JSON.stringify(todos)
22+
// localStorage.setItem('todos', stringTodo )
23+
24+
// Get Data From Local Storage
25+
// let email = localStorage.getItem('email')
26+
// let todos1 = localStorage.getItem('todos')
27+
28+
// Convert Array Or Object To String
29+
// todos1 = JSON.parse(todos1)
30+
// console.log(todos1);
31+
32+
33+
34+
35+
var login_container = document.getElementById('login_container')
36+
var home_container = document.getElementById('home_container')
37+
var email = document.getElementById('email')
38+
var password = document.getElementById('password')
39+
var user_email = document.getElementById('user_email')
40+
var todo_input = document.getElementById('todo_input')
41+
var list = document.getElementById('list')
42+
43+
function loginUser(){
44+
if(!email.value || !password.value) return alert('Enter Your Email Or Password')
45+
46+
localStorage.setItem('email',email.value)
47+
48+
checkIsUserLogin()
49+
}
50+
51+
function checkIsUserLogin(){
52+
var email = localStorage.getItem('email')
53+
if(email){
54+
login_container.style.display = 'none'
55+
home_container.style.display = 'block'
56+
user_email.innerText = email
57+
}else{
58+
login_container.style.display = 'block'
59+
home_container.style.display = 'none'
60+
}
61+
}
62+
63+
checkIsUserLogin()
64+
65+
function logOut(){
66+
localStorage.removeItem('email')
67+
checkIsUserLogin()
68+
}
69+
70+
function addTodo(){
71+
var email = localStorage.getItem('email')
72+
var obj = {
73+
email : email,
74+
todo : todo_input.value
75+
}
76+
console.log(obj);
77+
saveValueToLocalStorage(obj)
78+
todo_input.value = ''
79+
}
80+
81+
function saveValueToLocalStorage(obj){
82+
var todos = localStorage.getItem('todos')
83+
console.log('Todos From Local Storage',todos);
84+
85+
if(todos){
86+
todos = JSON.parse(todos)
87+
todos.push(obj)
88+
console.log(todos);
89+
90+
localStorage.setItem('todos',JSON.stringify(todos))
91+
}else{
92+
todos = [obj]
93+
console.log(todos);
94+
localStorage.setItem('todos',JSON.stringify(todos))
95+
96+
}
97+
98+
showTodo()
99+
}
100+
101+
function showTodo(){
102+
var todos = localStorage.getItem('todos')
103+
if(todos){
104+
list.innerHTML = ''
105+
todos = JSON.parse(todos)
106+
console.log(todos);
107+
108+
// get current logged-in email
109+
var currentEmail = localStorage.getItem('email')
110+
111+
todos.forEach(function(data, ind){
112+
if(data.email === currentEmail){ // only show todos of logged-in user
113+
var liElement = `
114+
<li class="class="flex justify-between items-center bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 shadow-sm">
115+
<p class="font-medium text-gray-800">${data.todo}</p>
116+
<span class="text-sm text-gray-500">${data.email}</span>
117+
</li>`;
118+
list.innerHTML += liElement
119+
}
120+
})
121+
}
122+
}
123+
124+
showTodo()

‎LocalStorage/index.html

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
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+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
9+
10+
</head>
11+
<body>
12+
<!-- <h1>Local Storage</h1>
13+
<h1>In Local Storage We Can Store Data With No Expiration Date</h1> -->
14+
15+
16+
17+
18+
19+
20+
21+
<div id="login_container">
22+
<header>
23+
<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
24+
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
25+
<a href="https://flowbite.com" class="flex items-center">
26+
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
27+
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Todo App</span>
28+
</a>
29+
<div class="flex items-center lg:order-2">
30+
<a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Get Started</a>
31+
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
32+
<span class="sr-only">Open main menu</span>
33+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
34+
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
35+
</button>
36+
</div>
37+
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
38+
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
39+
<li>
40+
<a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
41+
</li>
42+
<li>
43+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
44+
</li>
45+
<li>
46+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
47+
</li>
48+
<li>
49+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
50+
</li>
51+
<li>
52+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
53+
</li>
54+
<li>
55+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
56+
</li>
57+
</ul>
58+
</div>
59+
</div>
60+
</nav>
61+
</header>
62+
63+
<div class="min-h-screen flex items-center justify-center bg-gray-100 pt-10">
64+
<div class="w-full max-w-sm bg-white rounded-2xl shadow-lg p-8">
65+
<h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Login Form</h2>
66+
67+
<!-- Email -->
68+
<div class="mb-5">
69+
<label for="email" class="block mb-2 text-sm font-medium text-gray-700">Your Email</label>
70+
<input
71+
type="email"
72+
id="email"
73+
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3 transition"
74+
placeholder="Enter your email"
75+
required
76+
/>
77+
</div>
78+
79+
<!-- Password -->
80+
<div class="mb-5">
81+
<label for="password" class="block mb-2 text-sm font-medium text-gray-700">Your Password</label>
82+
<input
83+
type="password"
84+
id="password"
85+
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3 transition"
86+
placeholder="Enter your password"
87+
required
88+
/>
89+
</div>
90+
91+
<!-- Button -->
92+
<button
93+
type="submit"
94+
onclick="loginUser()"
95+
class="w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 text-white font-medium rounded-lg text-sm px-5 py-3 shadow-md transition duration-200"
96+
>
97+
Submit
98+
</button>
99+
</div>
100+
</div>
101+
</div>
102+
<div id="home_container">
103+
<header>
104+
<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
105+
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
106+
<a href="https://flowbite.com" class="flex items-center">
107+
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
108+
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Todo App</span>
109+
</a>
110+
<div class="flex items-center lg:order-2">
111+
<p id="user_email" class="px-3 text-white"></p>
112+
<a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" onclick="logOut()">Log Out</a>
113+
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
114+
<span class="sr-only">Open main menu</span>
115+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
116+
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
117+
</button>
118+
</div>
119+
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
120+
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
121+
<li>
122+
<a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
123+
</li>
124+
<li>
125+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
126+
</li>
127+
<li>
128+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
129+
</li>
130+
<li>
131+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
132+
</li>
133+
<li>
134+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
135+
</li>
136+
<li>
137+
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
138+
</li>
139+
</ul>
140+
</div>
141+
</div>
142+
</nav>
143+
</header>
144+
<div class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
145+
<!-- Header -->
146+
<h1 class="text-3xl font-bold text-gray-800 mb-6">Hello, Good Morning</h1>
147+
148+
<!-- Todo Input Section -->
149+
<div class="bg-white p-8 rounded-2xl shadow-lg w-full max-w-xl flex flex-col items-center justify-center space-y-4">
150+
<textarea
151+
id="todo_input"
152+
class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-700 text-center"
153+
rows="5"
154+
placeholder="Add your Todo notes..."
155+
></textarea>
156+
157+
<button onclick="addTodo()" class="bg-blue-600 hover:bg-blue-700 rounded-lg py-2 px-6 text-white font-medium shadow-md transition duration-200" type="submit"> Submit </button>
158+
</div>
159+
<ul id="list" class="mt-6 space-y-3 bg-white rounded-2xl shadow p-4 max-w-md mx-auto">
160+
161+
</ul>
162+
</div>
163+
164+
165+
166+
167+
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
168+
<script src="app.js"></script>
169+
</body>
170+
</html>

0 commit comments

Comments
 (0)