Skip to content

Commit a3e2a0f

Browse files
yashksaini-coderIndie-Dev147
yashksaini-coder
and
Indie-Dev147
authored
Merge pull request #33 from yashksaini-coder/backup
Activity-20 completed Co-authored-by: Garv Saini <garvkumarsaini@gmail.com>
2 parents eda1e39 + ddde8fe commit a3e2a0f

File tree

8 files changed

+211
-11
lines changed

8 files changed

+211
-11
lines changed

‎Day20/Activity-4/index.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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>SessionStorage Example</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f4f4f4;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
min-height: 100vh;
18+
}
19+
20+
h1, h2 {
21+
color: #333;
22+
}
23+
24+
form {
25+
background: #fff;
26+
padding: 20px;
27+
border-radius: 8px;
28+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
29+
width: 300px;
30+
margin-bottom: 20px;
31+
}
32+
33+
label {
34+
display: block;
35+
margin-bottom: 8px;
36+
font-weight: bold;
37+
}
38+
39+
input {
40+
width: calc(100% - 20px);
41+
padding: 10px;
42+
margin-bottom: 10px;
43+
border: 1px solid #ddd;
44+
border-radius: 4px;
45+
box-sizing: border-box;
46+
}
47+
48+
button {
49+
background-color: #007bff;
50+
color: #fff;
51+
border: none;
52+
padding: 10px 15px;
53+
border-radius: 4px;
54+
cursor: pointer;
55+
width: 100%;
56+
font-size: 16px;
57+
margin-bottom: 10px;
58+
}
59+
60+
button:hover {
61+
background-color: #0056b3;
62+
}
63+
64+
#savedData {
65+
background: #fff;
66+
padding: 20px;
67+
border-radius: 8px;
68+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
69+
width: 300px;
70+
text-align: center;
71+
}
72+
73+
#deleteData {
74+
background-color: #ff0000;
75+
color: #fff;
76+
border: none;
77+
padding: 10px 15px 20px 15px;
78+
border-radius: 4px;
79+
cursor: pointer;
80+
width: 300px;
81+
font-size: 16px;
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<h1>User Information Form</h1>
87+
<form id="userForm">
88+
<label for="name">Name:</label>
89+
<input type="text" id="name" name="name" required>
90+
<label for="email">Email:</label>
91+
<input type="email" id="email" name="email" required>
92+
<button type="submit">Save Data</button>
93+
</form>
94+
95+
<h2>Saved User Data</h2>
96+
<div id="savedData"></div>
97+
<br>
98+
<button id="deleteData">Delete Data</button>
99+
100+
<script src="script.js"></script>
101+
</body>
102+
</html>

‎Day20/Activity-4/script.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Task 7: Save data to sessionStorage on form submission
2+
document.addEventListener('DOMContentLoaded', () => {
3+
const form = document.getElementById('userForm');
4+
const savedData = document.getElementById('savedData');
5+
const deleteButton = document.getElementById('deleteData');
6+
7+
// Retrieve and display data on page load
8+
const savedName = sessionStorage.getItem('name');
9+
const savedEmail = sessionStorage.getItem('email');
10+
11+
if (savedName && savedEmail) {
12+
savedData.innerHTML = `<p>Name: ${savedName}</p><p>Email: ${savedEmail}</p>`;
13+
} else {
14+
savedData.innerHTML = '<p>No data saved yet.</p>';
15+
}
16+
17+
// Save data to sessionStorage on form submission
18+
form.addEventListener('submit', (event) => {
19+
event.preventDefault();
20+
const name = form.name.value;
21+
const email = form.email.value;
22+
23+
sessionStorage.setItem('name', name);
24+
sessionStorage.setItem('email', email);
25+
26+
savedData.innerHTML = `<p>Name: ${name}</p><p>Email: ${email}</p>`;
27+
});
28+
29+
// Task 8: Delete data from sessionStorage on button click
30+
deleteButton.addEventListener('click', () => {
31+
console.log('Before removal:', JSON.stringify(sessionStorage, null, 2));
32+
sessionStorage.removeItem('name');
33+
sessionStorage.removeItem('email');
34+
console.log('After removal:', JSON.stringify(sessionStorage, null, 2));
35+
36+
savedData.innerHTML = '<p>Data deleted.</p>';
37+
});
38+
});

‎Day20/Task.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,28 @@ Welcome to Day 20! Today, we're diving into the world of web storage with **Loca
66

77
### Activity 1: Understanding LocalStorage 📚
88

9-
- [ ] **Task 1:** Write a script to save a string value to `localStorage` and retrieve it. Log the retrieved value.
10-
- [ ] **Task 2:** Write a script to save an object to `localStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
9+
- [X] **Task 1:** Write a script to save a string value to `localStorage` and retrieve it. Log the retrieved value.
10+
- [X] **Task 2:** Write a script to save an object to `localStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
1111

1212
### Activity 2: Using LocalStorage 🛠️
1313

14-
- [ ] **Task 3:** Create a simple form that saves user input (e.g., name and email) to `localStorage` when submitted. Retrieve and display the saved data on page load.
15-
- [ ] **Task 4:** Write a script to remove an item from `localStorage`. Log the `localStorage` content before and after removal.
14+
- [X] **Task 3:** Create a simple form that saves user input (e.g., name and email) to `localStorage` when submitted. Retrieve and display the saved data on page load.
15+
- [X] **Task 4:** Write a script to remove an item from `localStorage`. Log the `localStorage` content before and after removal.
1616

1717
### Activity 3: Understanding SessionStorage 🧠
1818

19-
- [ ] **Task 5:** Write a script to save a string value to `sessionStorage` and retrieve it. Log the retrieved value.
20-
- [ ] **Task 6:** Write a script to save an object to `sessionStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
19+
- [X] **Task 5:** Write a script to save a string value to `sessionStorage` and retrieve it. Log the retrieved value.
20+
- [X] **Task 6:** Write a script to save an object to `sessionStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
2121

2222
### Activity 4: Using SessionStorage 🔄
2323

24-
- [ ] **Task 7:** Create a simple form that saves user input (e.g., name and email) to `sessionStorage` when submitted. Retrieve and display the saved data on page load.
25-
- [ ] **Task 8:** Write a script to remove an item from `sessionStorage`. Log the `sessionStorage` content before and after removal.
24+
- [X] **Task 7:** Create a simple form that saves user input (e.g., name and email) to `sessionStorage` when submitted. Retrieve and display the saved data on page load.
25+
- [X] **Task 8:** Write a script to remove an item from `sessionStorage`. Log the `sessionStorage` content before and after removal.
2626

2727
### Activity 5: Comparing LocalStorage and SessionStorage ⚖️
2828

29-
- [ ] **Task 9:** Write a function that accepts a key and a value, and saves the value to both `localStorage` and `sessionStorage`. Retrieve and log the values from both storage mechanisms.
30-
- [ ] **Task 10:** Write a function that clears all data from both `localStorage` and `sessionStorage`. Verify that both storages are empty.
29+
- [X] **Task 9:** Write a function that accepts a key and a value, and saves the value to both `localStorage` and `sessionStorage`. Retrieve and log the values from both storage mechanisms.
30+
- [X] **Task 10:** Write a function that clears all data from both `localStorage` and `sessionStorage`. Verify that both storages are empty.
3131

3232
## Feature Request 🎯
3333

‎Day20/index.js

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,72 @@ console.log("\nTask Completed!");
3434
console.log("-------------------------------------------------");
3535
console.log("Activity 3: ");
3636

37+
const sessionStorage = new LocalStorage('./session');
3738

39+
// Task 5: Write a script to save a string value to sessionStorage and retrieve it. Log the retrieved value.
40+
const stringValue = "Hello, Node.js!";
41+
sessionStorage.setItem('greeting', stringValue);
42+
43+
// Retrieve and log the string value from sessionStorage
44+
const retrievedString2 = sessionStorage.getItem('greeting');
45+
console.log('Retrieved string from sessionStorage:', retrievedString2);
46+
47+
// Task 6: Write a script to save an object to sessionStorage by converting it to a JSON string. Retrieve and parse the object, then log it.
48+
49+
// Task 6: Save an object to sessionStorage by converting it to a JSON string
50+
const userObject = {
51+
name: "Yash K. Saini",
52+
email: "yashkumarsaini101@gmail.com",
53+
age: 20
54+
};
55+
56+
// Convert object to JSON string and save to sessionStorage
57+
sessionStorage.setItem('user', JSON.stringify(userObject));
58+
59+
// Retrieve and parse the object from sessionStorage
60+
const retrievedObjectJSON = sessionStorage.getItem('user');
61+
const retrievedObject2 = JSON.parse(retrievedObjectJSON);
62+
63+
console.log('Retrieved object from sessionStorage:', retrievedObject2);
3864

3965
console.log("-------------------------------------------------");
4066
console.log("Activity 4: ");
4167

42-
68+
// Task 7: Create a simple form that saves user input (e.g., name and email) to sessionStorage when submitted. Retrieve and display the saved data on page load.
69+
// Task 8: Write a script to remove an item from sessionStorage. Log the sessionStorage content before and after removal.
70+
console.log("\nTask Completed!");
4371

4472
console.log("-------------------------------------------------");
4573
console.log("Activity 5: ");
4674

75+
function saveToStorage(key, value) {
76+
// Save to localStorage
77+
localStorage.setItem(key, value);
78+
// Save to sessionStorage
79+
sessionStorage.setItem(key, value);
80+
81+
// Retrieve and log the values from both storage mechanisms
82+
const localStorageValue = localStorage.getItem(key);
83+
const sessionStorageValue = sessionStorage.getItem(key);
84+
85+
console.log(`Value from localStorage: ${localStorageValue}`);
86+
console.log(`Value from sessionStorage: ${sessionStorageValue}`);
87+
}
88+
89+
// Example usage
90+
saveToStorage('username', 'Yash K. Saini');
91+
92+
function clearAllStorage() {
93+
// Clear all data from localStorage
94+
localStorage.clear();
95+
// Clear all data from sessionStorage
96+
sessionStorage.clear();
97+
98+
// Verify that both storages are empty
99+
console.log('localStorage after clear:', JSON.stringify(localStorage, null, 2));
100+
console.log('sessionStorage after clear:', JSON.stringify(sessionStorage, null, 2));
101+
}
47102

103+
// clearAllStorage(); This will clear all the data from both localStorage and sessionStorage
48104

49105
console.log("-------------------------------------------------");

‎Day20/scratch/username

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Yash K. Saini

‎Day20/session/greeting

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Hello, Node.js!

‎Day20/session/user

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"Yash K. Saini","email":"yashkumarsaini101@gmail.com","age":20}

‎Day20/session/username

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Yash K. Saini

0 commit comments

Comments
 (0)