microlab/signup.html at main · ArfanFahad/microlab · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up for Microlab</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form action="" method="post">
            <h1 id="singup_form_header">Create a new account</h1>

            <input type="text" name="firstname" id="fname" placeholder="First name" required>
            <input type="text" name="surname" id="sname" placeholder="Surname" required>

            <br><br>

            <label for="">Date of birth</label>
            <br><br>
            <input type="date" name="dob" id="dob" required>

            <br><br>
            <label for="">Gender</label>
            <select name="gender" id="gender" required>
                <option value="" disabled selected>Select your gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
            </select>

            <br><br>
            <input type="email" name="" id="email" placeholder="email address" required>

            <br><br>
            <input type="password" name="" id="password" placeholder="New password" required>

            <br><br>
            <button type="submit">Sign Up</button>
        </form>
    </div>


    <script>

        //POST REQUEST DATA
        const form = document.querySelector('form');
        const firstname = document.getElementById('fname');
        const surname = document.getElementById('sname');
        const dob = document.getElementById('dob');
        const gender = document.getElementById('gender');
        const email = document.getElementById('email');
        const password = document.getElementById('password');


        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const form_data = {
                firstname: firstname.value,
                surname: surname.value,
                dob: dob.value,
                gender: gender.value,
                email: email.value,
                password: password.value
            }

            // Reviewing the data in browser
            console.log('Object type: ', form_data);
            let a = JSON.stringify(form_data);
            console.log('JSON Data: ', a);

            // POST request to the backend
            await fetch ('http://localhost:3000/signup', {
                method: 'POST',
                headers: { 'Content-Type':'application/json' },
                body: JSON.stringify(form_data)
            })
            .then(response=>response.json())
            .then(data=>{
                console.log('Server Response: ', data);
                firstname.value = "";
                surname.value = "";
                dob.value = "";
                gender.value = "";
                email.value = "";
                password.value = "";
            })
            .catch(error=>console.error(error.message))
        });


    </script>
</body>
</html>