wd101/index.html at main · umeshgupta05/wd101 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">

    <!-- Form Container -->
    <div class="max-w-lg mx-auto mt-10 p-6 bg-white shadow-lg rounded-md">
        <h1 class="text-2xl font-bold text-center mb-6">Registration Form</h1>
        <form id="registrationForm" class="space-y-4">
            <div class="flex items-center space-x-4">
                <label for="name" class="w-32 font-semibold">Name</label>
                <input type="text" id="name" placeholder="Enter full name" required class="flex-1 px-4 py-2 border rounded-md">
            </div>

            <div class="flex items-center space-x-4">
                <label for="email" class="w-32 font-semibold">Email</label>
                <input type="email" id="email" placeholder="Enter email" required class="flex-1 px-4 py-2 border rounded-md">
            </div>

            <div class="flex items-center space-x-4">
                <label for="password" class="w-32 font-semibold">Password</label>
                <input type="password" id="password" placeholder="Enter password" required class="flex-1 px-4 py-2 border rounded-md">
            </div>

            <div class="flex items-center space-x-4">
                <label for="dob" class="w-32 font-semibold">Date of Birth</label>
                <input type="date" id="dob" required class="flex-1 px-4 py-2 border rounded-md">
            </div>

            <div class="flex items-center">
                <input type="checkbox" id="terms" required class="mr-2">
                <label for="terms" class="font-semibold">Accept Terms & Conditions</label>
            </div>

            <button type="submit" id="submitBtn" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-md">
                Submit
            </button>
        </form>
    </div>

    <!-- Entries Table Container -->
    <div class="max-w-2xl mx-auto mt-10 p-6 bg-white shadow-lg rounded-md">
        <h2 class="text-xl font-bold text-center mb-6">Entries</h2>
        <table id="entriesTable" class="min-w-full bg-white border">
            <thead class="bg-gray-200">
                <tr>
                    <th class="border px-4 py-2">Name</th>
                    <th class="border px-4 py-2">Email</th>
                    <th class="border px-4 py-2">Password</th>
                    <th class="border px-4 py-2">Dob</th>
                    <th class="border px-4 py-2">Accepted terms?</th>
                </tr>
            </thead>
            <tbody>
                <!-- Entries will be inserted here dynamically -->
            </tbody>
        </table>
    </div>

    <script src="index.js"></script>
</body>
</html>