-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (108 loc) · 5.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<head>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<style>
input#name:invalid:focus {
border: 1px solid red;
}
</style>
</head>
<body class="bg-green-100">
<div class="w-full max-w-xs m-auto my-10">
<form action="" id="user-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<p class="text-2xl">User Signup Form</p>
<label for="name" class="block text-gray-700 text-sm font-bold mb-1 mt-4" >Name:</label>
<input type="text" name="name" id="name" required="true" class="form-input px-4 py-3 rounded-full border-2 mt-2"/></br>
<label for="email" class="block text-gray-700 text-sm font-bold mb-1 mt-4" >Email:</label>
<input type="email" name="email" id="email" required="true" autocomplete="off" class="form-input px-4 py-3 rounded-full border-2 mt-2"/></br>
<label for="password" class="block text-gray-700 text-sm font-bold mb-1 mt-4" >Password:</label>
<input type="password" name="password" id="password" class="form-input px-4 py-3 rounded-full border-2 mt-2"/></br>
<label for="dob" class="block text-gray-700 text-sm font-bold mb-1 mt-4" >Date of birth:</label>
<input type="date" required="true" name="dob" id="dob" class="form-input px-4 py-3 rounded-full border-2 mt-2"/></br></br>
<input type="checkbox" name="acceptterms" id="acceptterms"/>
<label for="acceptterms" class="text-gray-700 text-sm font-bold mb-1 mt-4" >Accept Terms & Conditions</label></br></br>
<button type="submit" name="submit" id="submit" class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded shadow" >Submit</button>
</form>
</div>
<div class="w-full max-w-xs m-auto my-10 ">
<p class="text-2xl">Saved Users</p>
<table id="saved-data" class = "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"></table>
</div>
</body>
<script>
let validate = (element) => {
if (element.validity.typeMismatch) {
element.setCustomValidity("The email format seems incorrect");
element.reportValidity();
} else {
element.setCustomValidity("");
element.reportValidity();
}
}
let validateDOB = (element) => {
console.log("Logging DOB")
let selectedDate = new Date(element.value)
selectedDate.setHours(0, 0, 0, 0);
let lowerDate = new Date(selectedDate)
lowerDate.setFullYear(selectedDate.getFullYear() + 18)
let upperDate = new Date(selectedDate)
upperDate.setFullYear(selectedDate.getFullYear() + 56)
let currentDate = new Date()
console.log(selectedDate)
console.log(lowerDate)
console.log(upperDate)
if (currentDate < lowerDate || currentDate >= upperDate) {
element.setCustomValidity("Sorry. You must be between 18 to 55 years of age.");
element.reportValidity();
} else {
element.setCustomValidity("");
element.reportValidity();
}
}
let saveData = (userForm) => {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
password = document.getElementById("password").value;
dob = document.getElementById("dob").value;
acceptTerms = document.getElementById("acceptterms").checked;
let user1 = {
name, email, password, dob, acceptTerms
}
let users = getData()
users.push(user1)
localStorage.setItem("users", JSON.stringify(users))
displayData();
}
let getData = () => {
let storedData = localStorage.getItem("users");
return storedData ? JSON.parse(storedData) : [];
}
let displayData = () => {
let savedData = getData();
let tableRows = savedData.map((data) => {
let nameCell = "<td class =\"border px-4 py-2\">" + data.name + "</td>";
let emailCell = "<td class =\"border px-4 py-2\">" + data.email + "</td>";
let passwordCell = "<td class =\"border px-4 py-2\">" + data.password + "</td>";
let dobCell = "<td class =\"border px-4 py-2\">" + data.dob + "</td>";
let acceptTermsCell = "<td class =\"border px-4 py-2\">" + data.acceptTerms + "</td>";
return "<tr>" + nameCell + " " + emailCell + " " + passwordCell + " " + dobCell + " " + acceptTermsCell + "</tr>";
}).join("</br>");
table = document.getElementById("saved-data");
let tableTitle = "<thead><th>Name</th><th>Email</th><th>Password</th><th>Date Of Birth</th><th>Accepted Terms</th></thead></br>";
table.innerHTML = tableTitle + tableRows
}
let email = document.getElementById("email");
email.addEventListener('input', () => validate(email));
let submit = document.getElementById("submit");
submit.addEventListener('click', () => validate(email));
submit.addEventListener('click', () => validateDOB(dateField));
let dateField = document.getElementById("dob");
dateField.addEventListener('input', () => validateDOB(dateField));
dateField.addEventListener('change', () => validateDOB(dateField));
let userForm = document.getElementById("user-form")
userForm.addEventListener('submit', () => saveData(userForm));
displayData();
</script>