<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
max-width: 500px;
margin: 0 auto;
}
label {
display: block;
margin-top: 20px;
}
input {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-top: 5px;
}
button {
margin-top: 20px;
background-color: skyblue;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
button:hover {
background-color: black;
}
h2 {
margin-top: 50px;
text-align: center;
}
#registration-data {
max-width: 500px;
margin: 0 auto;
}
p {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
}
</style>
<body>
<h1>User Registration</h1>
<form id="registration-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" /><br />
<label for="password">Mobile Number:</label>
<input type="Number" id="password" name="Number" placeholder="Enter your Mobile Number" /><br />
<button type="submit">Submit</button>
</form>
<h2>Registration Data</h2>
<div id="registration-data"></div>
<script>
var registrationForm = document.getElementById("registration-form");
registrationForm.addEventListener("submit", function (event) {
event.preventDefault();
// Get the form data
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// Save the data to local storage
var registrationData = {
name: name,
email: email,
password: password,
};
saveUserRegistrationData(registrationData);
// Display the data in the list
displayUserRegistrationData();
// Clear the form
registrationForm.reset();
});
function saveUserRegistrationData(registrationData) {
// Get existing data from local storage, or create an empty array if there is no data yet
var existingData =
JSON.parse(localStorage.getItem("registrationData")) || [];
// Add new data to the array
existingData.push(registrationData);
// Store the updated data in local storage
localStorage.setItem(
"registrationData",
JSON.stringify(existingData)
);
}
function displayUserRegistrationData() {
// Load existing registration data from local storage and display it in the list
var existingData =
JSON.parse(localStorage.getItem("registrationData")) || [];
var dataList = document.getElementById("registration-data");
dataList.innerHTML = "";
existingData.forEach(function (registrationData) {
var newDataItem = document.createElement("p");
var newData = document.createTextNode(
registrationData.name +
" (" +
registrationData.email +
")"
);
newDataItem.appendChild(newData);
dataList.appendChild(newDataItem);
});
}
// Display the existing registration data on page load
displayUserRegistrationData();
</script>
</body>
</html>
0 Comments