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 a3e2a0f

Browse files
yashksaini-coderIndie-Dev147
andauthored
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)

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