From c9d464f815d8c52f6a2d2aeed2540e03b5ac67b9 Mon Sep 17 00:00:00 2001 From: Sparsh Karna Date: Sun, 15 Sep 2024 23:09:01 +0530 Subject: [PATCH] Solution --- index.html | 51 +++++++++++++++++++++++++++++++++++++ index.js | 55 +++++++++++++++++++++++++++++++++++++++ style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 181 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..cd0ad3d --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + Registration Form + + + +
+

Registration Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+

Entries

+ + + + + + + + + + + +
NameEmailPasswordDobAccepted terms?
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..5dc2243 --- /dev/null +++ b/index.js @@ -0,0 +1,55 @@ +document.addEventListener('DOMContentLoaded', function() { + const form = document.getElementById('registrationForm'); + const table = document.getElementById('entriesTable').getElementsByTagName('tbody')[0]; + + loadTableData(); + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + const dob = document.getElementById('dob').value; + const terms = document.getElementById('terms').checked; + + const birthDate = new Date(dob); + const age = calculateAge(birthDate); + if (age < 18 || age > 55) { + alert('You must be between 18 and 55 years old to register.'); + return; + } + + const row = table.insertRow(); + row.innerHTML = `${name}${email}${password}${dob}${terms}`; + + saveToLocalStorage({name, email, password, dob, terms}); + + form.reset(); + }); +}); + +function calculateAge(birthDate) { + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + return age; +} + +function saveToLocalStorage(data) { + let entries = JSON.parse(localStorage.getItem('formEntries')) || []; + entries.push(data); + localStorage.setItem('formEntries', JSON.stringify(entries)); +} + +function loadTableData() { + const table = document.getElementById('entriesTable').getElementsByTagName('tbody')[0]; + const entries = JSON.parse(localStorage.getItem('formEntries')) || []; + entries.forEach(entry => { + const row = table.insertRow(); + row.innerHTML = `${entry.name}${entry.email}${entry.password}${entry.dob}${entry.terms}`; + }); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6f875a1 --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + background-color: #f0f0f0; +} +.container { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 100%; + max-width: 500px; +} +h2, h3 { + text-align: center; +} +form { + display: flex; + flex-direction: column; +} +.form-group { + display: flex; + align-items: center; + margin: 10px 0; +} +label { + flex: 1; + margin-right: 10px; +} +input[type="text"], +input[type="email"], +input[type="password"], +input[type="date"] { + flex: 2; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; +} +.checkbox-group { + display: flex; + align-items: center; + margin: 10px 0; +} +.checkbox-group input { + margin-right: 5px; +} +button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px; + border-radius: 4px; + cursor: pointer; + margin-top: 10px; +} +button:hover { + background-color: #45a049; +} +table { + width: 100%; + margin-top: 20px; + border-collapse: collapse; +} +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} +th { + background-color: #f2f2f2; +} \ No newline at end of file