Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a9af97b

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /