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 b907d3f

Browse files
Chore: Activity-2 Completed for Day-20
1 parent 3b6a8f0 commit b907d3f

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎Day20/Activity-2/index.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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>Save User Input</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+
}
58+
59+
button:hover {
60+
background-color: #0056b3;
61+
}
62+
63+
#savedData {
64+
background: #fff;
65+
padding: 20px;
66+
border-radius: 8px;
67+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
68+
width: 300px;
69+
text-align: center;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<h1>User Information Form</h1>
75+
<form id="userForm">
76+
<label for="name">Name:</label>
77+
<input type="text" id="name" name="name" required>
78+
<label for="email">Email:</label>
79+
<input type="email" id="email" name="email" required>
80+
<button type="submit">Save</button>
81+
</form>
82+
83+
<h2>Saved User Data</h2>
84+
<div id="savedData"></div>
85+
86+
<script src="script.js"></script>
87+
</body>
88+
</html>

‎Day20/Activity-2/script.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// 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.
2+
3+
document.addEventListener('DOMContentLoaded', () => {
4+
function displaySavedData() {
5+
const savedData = JSON.parse(localStorage.getItem('userData'));
6+
const savedDataDiv = document.getElementById('savedData');
7+
if (savedData) {
8+
savedDataDiv.innerHTML = `<p>Name: ${savedData.name}</p><p>Email: ${savedData.email}</p>`;
9+
} else {
10+
savedDataDiv.innerHTML = '<p>No data saved.</p>';
11+
}
12+
}
13+
14+
displaySavedData();
15+
16+
document.getElementById('userForm').addEventListener('submit', (event) => {
17+
event.preventDefault();
18+
19+
const name = document.getElementById('name').value;
20+
const email = document.getElementById('email').value;
21+
22+
const userData = { name, email };
23+
localStorage.setItem('userData', JSON.stringify(userData));
24+
25+
displaySavedData();
26+
});
27+
// Task 4: Write a script to remove an item from localStorage. Log the localStorage content before and after removal.
28+
29+
function removeItemFromLocalStorage(key) {
30+
console.log('Before removal:');
31+
console.log(localStorage.getItem(key));
32+
33+
localStorage.removeItem(key);
34+
35+
console.log('After removal:');
36+
console.log(localStorage.getItem(key));
37+
}
38+
39+
document.getElementById('removeButton').addEventListener('click', () => {
40+
removeItemFromLocalStorage('userData');
41+
displaySavedData(); // Update the displayed data after removal
42+
});
43+
});
44+

0 commit comments

Comments
(0)

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