Registeration-Form/script.js at main · toobagul-01/Registeration-Form · 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
const form = document.getElementById("regForm");
const modal = document.getElementById("modal");
const close = document.getElementById("close");
const viewApp = document.getElementById("viewApp");
const photoInput = document.getElementById("photo");
const photoPreview = document.getElementById("photoPreview");

// Show photo preview
photoInput.addEventListener("change", function(){
    const file = this.files[0];
    if(file){
        const reader = new FileReader();
        reader.onload = function(e){
            photoPreview.style.backgroundImage = `url('${e.target.result}')`;
            photoPreview.style.backgroundSize = "cover";
            photoPreview.style.backgroundPosition = "center";
        }
        reader.readAsDataURL(file);
    }
});


// Form submit
form.addEventListener("submit", function(e){
    e.preventDefault();

    // Password validation
    const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/;
    if(!passRegex.test(password.value)){
        alert("Password must contain uppercase, lowercase, special char & min 8 chars");
        return;
    }
    if(password.value !== cpassword.value){
        alert("Passwords do not match");
        return;
    }

    modal.style.display = "flex";
});

// Close modal
close.onclick = ()=> modal.style.display="none";

// Open new tab with full application
viewApp.onclick = ()=>{
    let gender = document.querySelector('input[name="gender"]:checked').value;
    let imgSrc = photoPreview.style.backgroundImage.slice(5, -2);

    const appWindow = window.open("", "_blank");
    appWindow.document.write(`
        <html>
        <head>
        <title>Student Application</title>
        <style>
            body{font-family:Arial; padding:20px;}
            .container{max-width:800px; margin:auto; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 10px rgba(0,0,0,0.1);}
            .photo{width:140px;height:140px;border:2px solid #ccc; object-fit:cover; float:right; margin-left:15px;}
            h2{text-align:center; margin-bottom:20px;}
            .field{margin:12px 0;}
            .field span{font-weight:bold; width:180px; display:inline-block;}
            button{padding:10px 15px;background:#6366f1;color:white;border:none;margin-top:20px; cursor:pointer;}
        </style>
        </head>
        <body>
        <div class="container">
        <h2>Student Application Details</h2>
        <img src="${imgSrc}" class="photo">
        <div class="field"><span>Name:</span>${fullname.value}</div>
        <div class="field"><span>Father Name:</span>${fathername.value}</div>
        <div class="field"><span>DOB:</span>${dob.value}</div>
        <div class="field"><span>Age:</span>${age.value}</div>
        <div class="field"><span>Gender:</span>${gender}</div>
        <div class="field"><span>CNIC:</span>${cnic.value}</div>
        <div class="field"><span>Email:</span>${email.value}</div>
        <div class="field"><span>Phone:</span>${phone.value}</div>
        <div class="field"><span>City:</span>${city.value}</div>
        <div class="field"><span>Program:</span>${program.value}</div>
        <div class="field"><span>Semester:</span>${semester.value}</div>
        <button onclick="window.print()">Download / Print PDF</button>
        </div>
        </body>
        </html>
    `);

    modal.style.display = "none";
    form.reset();
    photoPreview.style.backgroundImage = "";
};