├── assets
    ├── cover logo.jpg
    ├── header logo.png
    └── saylani favicon.png
├── config.js
├── style.css
├── app.js
└── index.html


/assets/cover logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/saylani-form/HEAD/assets/cover logo.jpg


--------------------------------------------------------------------------------
/assets/header logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/saylani-form/HEAD/assets/header logo.png


--------------------------------------------------------------------------------
/assets/saylani favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/saylani-form/HEAD/assets/saylani favicon.png


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
 2 | 
 3 |  const firebaseConfig = {
 4 |     apiKey: "AIzaSyAQjlwhuwWYJ-OdhhPP4XRxEgWSfQ5d3-o",
 5 |     authDomain: "ali-raza-518df.firebaseapp.com",
 6 |     databaseURL: "https://ali-raza-518df-default-rtdb.firebaseio.com",
 7 |     projectId: "ali-raza-518df",
 8 |     storageBucket: "ali-raza-518df.appspot.com",
 9 |     messagingSenderId: "308309137877",
10 |     appId: "1:308309137877:web:ac0be37dd3c2bb9544055c",
11 |     measurementId: "G-82NM2JZS9D"
12 |   };
13 | 
14 | const app = initializeApp(firebaseConfig);
15 | 
16 | export {app};


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | .headerLogo {
  8 |     width: 100%;
  9 | }
 10 | 
 11 | .formContainer {
 12 |     display: flex;
 13 |     margin: 20px 0;
 14 | }
 15 | 
 16 | .formContainer label {
 17 |     width: 100%;
 18 | }
 19 | 
 20 | #formLabel {
 21 |     color: #0d6db7;
 22 | }
 23 | 
 24 | 
 25 | .selectInputDiv,
 26 | .inputDiv {
 27 |     width: 100%;
 28 |     margin: 10px 0;
 29 | }
 30 | 
 31 | .selectInputDiv select {
 32 |     background-color: #fff;
 33 |     color: #bfbfbf !important;
 34 |     border-color: #8dc63f;
 35 |     border-radius: 5px;
 36 |     position: relative;
 37 |     transition: all .5s;
 38 |     width: 100%;
 39 |     height: 50px;
 40 |     padding: 0 10px;
 41 | }
 42 | 
 43 | .inputDiv input {
 44 |     border: 1px solid #8dc63f;
 45 |     width: 100%;
 46 |     height: 50px;
 47 |     padding: 0 10px;
 48 |     background-color: initial;
 49 |     border-radius: 5px;
 50 |     color: #666;
 51 |     outline: 0;
 52 |     font-size: 14px;
 53 |     transition: all .5s;
 54 | }
 55 | 
 56 | .inputDiv input:focus,
 57 | .selectInputDiv select:focus-visible {
 58 |     border: 1px solid #0d6db7 !important;
 59 |     color: black;
 60 | }
 61 | 
 62 | /* Style for opened dropdown options */
 63 | .selectInputDiv select:focus,
 64 | .selectInputDiv select:active,
 65 | .selectInputDiv select:visited,
 66 | .selectInputDiv select::target-text {
 67 |     color: black !important;
 68 |     outline: 0;
 69 | }
 70 | 
 71 | 
 72 | /* Style for the dropdown options */
 73 | .selectInputDiv select option {
 74 |     background-color: #fff;
 75 |     color: #333;
 76 |     transition: background-color 0.3s;
 77 |     /* Add transition for smooth color change */
 78 | }
 79 | 
 80 | /* Style for the hovered option */
 81 | .selectInputDiv select option:hover {
 82 |     background-color: #0d6db7;
 83 |     color: #fff;
 84 |     /* Change text color on hover if needed */
 85 | }
 86 | 
 87 | .col-12 {
 88 |     margin-top: 15px;
 89 | }
 90 | 
 91 | .uploadBtnDiv,
 92 | .profilePicDiv {
 93 |     background-color: #fafafa;
 94 |     border: 1px dashed #d9d9d9;
 95 |     border-radius: 2px;
 96 |     cursor: pointer;
 97 |     height: 104px;
 98 |     margin-bottom: 8px;
 99 |     margin-right: 8px;
100 |     text-align: center;
101 |     transition: border-color .3s;
102 |     vertical-align: top;
103 |     width: 104px;
104 | }
105 | 
106 | .uploadBtnDiv:hover,
107 | .profilePicDiv:hover {
108 |     border-color: #1890ff;
109 | }
110 | 
111 | .profilePicDiv {
112 |     justify-content: center;
113 |     align-items: center;
114 |     display: none;
115 | }
116 | 
117 | #profileImg {
118 |     width: 100%;
119 |     height: 100%;
120 |     object-fit: cover;
121 | }
122 | 
123 | .uploadBtnDiv .inputDiv {
124 |     height: 100%;
125 |     margin: 0;
126 |     position: relative;
127 | }
128 | 
129 | .uploadBtnDiv span {
130 |     position: absolute;
131 |     top: 50%;
132 |     left: 50%;
133 |     transform: translate(-50%, -50%);
134 |     font-size: 14px;
135 |     width: 65px;
136 | }
137 | 
138 | .uploadBtnDiv input[type=file] {
139 |     background-color: black;
140 |     height: 100%;
141 |     display: none;
142 | }
143 | 
144 | .picRulesDiv ul {
145 |     list-style: none;
146 |     font-size: 14px;
147 | }
148 | 
149 | .rulesDiv ol {
150 |     font-size: 14px;
151 | }
152 | 
153 | .separaterLine {
154 |     margin: 24px 0;
155 |     min-width: 100%;
156 |     width: 100%;
157 |     border-top: 1px solid rgba(0, 0, 0, 0.165);
158 | }
159 | 
160 | .submitBtnDiv button {
161 |     border: none;
162 |     font-size: 14px !important;
163 |     outline: none;
164 |     padding: 10px 30px;
165 |     width: 100%;
166 | }
167 | 
168 | .submitBtnDiv {
169 |     margin-bottom: 30px;
170 | }
171 | 
172 | .submitBtn {
173 |     border-color: #0a58ca;
174 |     background-color: #0d6db7;
175 |     color: #fff;
176 | }
177 | 
178 | .submitBtn .spinner-border {
179 |     width: 20px;
180 |     height: 20px;
181 | }
182 | 
183 | @media (max-width: 425px) {
184 |     .upload-rulesDiv {
185 |         flex-direction: column;
186 |     }
187 | 
188 |     .upload-rulesDiv ul {
189 |         padding: 0;
190 |     }
191 | }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | import { app } from "./config.js";
  2 | 
  3 | import {
  4 |     getFirestore,
  5 |     collection,
  6 |     addDoc,
  7 |     setDoc,
  8 |     doc
  9 | } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 10 | 
 11 | import {
 12 |     getStorage,
 13 |     ref,
 14 |     uploadBytesResumable,
 15 |     getDownloadURL
 16 | } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-storage.js";
 17 | 
 18 | const db = getFirestore(app);
 19 | // Initialize Cloud Storage and get a reference to the service
 20 | const storage = getStorage();
 21 | 
 22 | const picInputDiv = document.querySelector("#picInputDiv");
 23 | const picInput = document.querySelector("#picInput");
 24 | const profileImg = document.querySelector("#profileImg");
 25 | const profilePicDiv = document.querySelector(".profilePicDiv");
 26 | const submitBtn = document.querySelector(".submitBtn");
 27 | const loader = document.querySelector(".spinner-border");
 28 | let imgUrl;
 29 | 
 30 | const downloadImageUrl = (file) => {
 31 |     return new Promise((resolve, reject) => {
 32 |         const profileImagesRef = ref(storage, `images/${file.name}/`);
 33 |         const uploadTask = uploadBytesResumable(profileImagesRef, file);
 34 | 
 35 |         uploadTask.on(
 36 |             'state_changed',
 37 |             (snapshot) => {
 38 |                 const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 39 |                 switch (snapshot.state) {
 40 |                     case 'paused':
 41 |                         break;
 42 |                     case 'running':
 43 |                         profilePicDiv.innerHTML = `
 44 |                         <div class="spinner-border" role="status">
 45 |                             <span class="visually-hidden">Loading...</span>
 46 |                         </div>
 47 |                         `
 48 |                         break;
 49 |                 }
 50 |             },
 51 |             (error) => {
 52 |                 reject(error);
 53 |             },
 54 |             () => {
 55 |                 getDownloadURL(uploadTask.snapshot.ref)
 56 |                     .then((downloadURL) => {
 57 |                         resolve(downloadURL);
 58 |                     })
 59 |                     .catch((error) => {
 60 |                         reject(error);
 61 |                     });
 62 |             }
 63 |         );
 64 |     });
 65 | };
 66 | 
 67 | picInputDiv.addEventListener("click", () => {
 68 |     picInput.click();
 69 | })
 70 | 
 71 | picInput.addEventListener("change", async () => {
 72 |     if (picInput.files.length > 0) {
 73 |         profilePicDiv.style.display = "flex";
 74 |         const file = picInput.files[0];
 75 |         imgUrl = await downloadImageUrl(file);
 76 |         if (imgUrl) {
 77 |             profilePicDiv.innerHTML = `
 78 |             <img src="${imgUrl}" id="profileImg">
 79 |             `
 80 |         }
 81 |     }
 82 | })
 83 | 
 84 | submitBtn.addEventListener("click", async () => {
 85 |     const selectCity = document.getElementById("select-city");
 86 |     const selectCourse = document.getElementById("select-course");
 87 |     const nameInput = document.getElementById("nameInput");
 88 |     const fatherNameInput = document.getElementById("fatherNameInput");
 89 |     const emailInput = document.getElementById("emailInput");
 90 |     const phoneInput = document.getElementById("phoneInput");
 91 |     const cnicInput = document.getElementById("cnicInput");
 92 |     const fatherCnicInput = document.getElementById("fatherCnicInput");
 93 |     const dateInput = document.getElementById("dateInput");
 94 |     const selectGender = document.getElementById("select-gender");
 95 |     const addressInput = document.getElementById("addressInput");
 96 |     const lastQualification = document.getElementById("last-qualification");
 97 |     const haveLaptop = document.getElementById("have-laptop");
 98 | 
 99 |     const city = selectCity.value;
100 |     const course = selectCourse.value;
101 |     const name = nameInput.value;
102 |     const fatherName = fatherNameInput.value;
103 |     const email = emailInput.value;
104 |     const phone = phoneInput.value;
105 |     const cnic = cnicInput.value;
106 |     let fatherCnic
107 |     if (fatherCnicInput) {
108 |         fatherCnic = fatherCnicInput.value;
109 |     } else {
110 |         fatherCnic = "";
111 |     }
112 |     const dateOfBirth = dateInput.value;
113 |     const gender = selectGender.value;
114 |     const address = addressInput.value;
115 |     const qualification = lastQualification.value;
116 |     const laptopAvailable = haveLaptop.value;
117 | 
118 |     if (!city) {
119 |         location.href = "#select-city";
120 |     } else if (!course) {
121 |         location.href = "#select-course";
122 |     } else if (!name) {
123 |         location.href = "#nameInput";
124 |     } else if (!fatherName) {
125 |         location.href = "#fatherNameInput";
126 |     } else if (!email) {
127 |         location.href = "#emailInput";
128 |     } else if (!phone) {
129 |         location.href = "#phoneInput";
130 |     } else if (!cnic) {
131 |         location.href = "#cnicInput";
132 |     } else if (!dateOfBirth) {
133 |         location.href = "#dateInput";
134 |     } else if (!gender) {
135 |         location.href = "#select-gender";
136 |     } else if (!address) {
137 |         location.href = "#addressInput";
138 |     } else if (!qualification) {
139 |         location.href = "#last-qualification";
140 |     } else if (!laptopAvailable) {
141 |         location.href = "#have-laptop";
142 |     } else if (!imgUrl) {
143 |         location.href = "#picInput"
144 |     } else {
145 |         const studentData = {
146 |             city,
147 |             course,
148 |             name,
149 |             fatherName,
150 |             email,
151 |             phone,
152 |             cnic,
153 |             fatherCnic,
154 |             dateOfBirth,
155 |             gender,
156 |             address,
157 |             qualification,
158 |             laptopAvailable,
159 |             imgUrl
160 |         }
161 |         try {
162 |             submitBtn.innerHTML = `
163 |             <div class="spinner-border" role="status">
164 |                             <span class="visually-hidden">Loading...</span>
165 |             </div>
166 |             `;
167 |             await setDoc(doc(db, "students", cnic), {
168 | 
169 |                 // })
170 |                 // await addDoc(collection(db, "students"), {
171 |                 ...studentData
172 |             });
173 |             submitBtn.innerHTML = `
174 |             Submit
175 |             `;
176 | 
177 |             Swal.fire({
178 |                 title: "Good job!",
179 |                 text: "Your form has been successfully submitted!",
180 |                 icon: "success"
181 |             });
182 | 
183 | 
184 |             selectCity.value = "";
185 |             selectCity.value = "";
186 |             nameInput.value = "";
187 |             fatherNameInput.value = "";
188 |             emailInput.value = "";
189 |             phoneInput.value = "";
190 |             cnicInput.value = "";
191 |             fatherCnicInput.value = "";
192 |             dateInput.value = "";
193 |             selectCourse.value = "";
194 |             addressInput.value = "";
195 |             lastQualification.value = "";
196 |             haveLaptop.value = "";
197 |             profilePicDiv.style.display = "none";
198 | 
199 |         } catch (e) {
200 |             Swal.fire({
201 |                 icon: 'error',
202 |                 title: 'Oops...',
203 |                 text: 'Something went wrong!',
204 |             });
205 |         }
206 |     }
207 | 
208 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="shortcut icon" href="./assets/saylani favicon.png" type="image/x-icon">
  8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  9 |     <link rel="stylesheet" href="style.css">
 10 |     <title>Saylani Welfare Int Trust</title>
 11 | </head>
 12 | 
 13 | <body class="container">
 14 |     <div class="header">
 15 |         <img src="./assets/cover logo.jpg" alt="" class="headerLogo">
 16 |     </div>
 17 |     <div class="row justify-content-center formContainer">
 18 |         <!-- select city div -->
 19 |         <div class="cityDiv col-12 col-sm-12 col-md-6 col-lg-5">
 20 |             <label id="formLabel">Select City</label>
 21 |             <div class="selectInputDiv">
 22 |                 <select name="select-city" id="select-city">
 23 |                     <option value="" disabled selected>Select city</option>
 24 |                     <option value="karachi">Karachi</option>
 25 |                     <option value="lahore">Lahore</option>
 26 |                     <option value="peshawar">Peshawar</option>
 27 |                     <option value="islamabad">Islamabad</option>
 28 |                 </select>
 29 |             </div>
 30 |         </div>
 31 |         <!-- select course -->
 32 |         <div class="courseDiv col-12 col-sm-12 col-md-6 col-lg-5">
 33 |             <label id="formLabel">Select Course or Event</label>
 34 |             <div class="selectInputDiv">
 35 |                 <select name="select-course" id="select-course">
 36 |                     <option value="" disabled selected>Select Course or Event</option>
 37 |                     <option value="web-&-mobile-app-development">Web & Mobile App Development</option>
 38 |                     <option value="graphics-designing">Graphics Designing</option>
 39 |                     <option value="video-animation">Video Animation</option>
 40 |                     <option value="techno-kids">Techno Kids</option>
 41 |                 </select>
 42 |             </div>
 43 |         </div>
 44 |         <!-- full Name Div -->
 45 |         <div class="nameDiv col-12 col-sm-12 col-md-6 col-lg-5">
 46 |             <label id="formLabel">Full Name</label>
 47 |             <div class="inputDiv">
 48 |                 <input type="text" id="nameInput" placeholder="Full Name">
 49 |             </div>
 50 |         </div>
 51 |         <!-- father Name Div -->
 52 |         <div class="fatherNameDiv col-12 col-sm-12 col-md-6 col-lg-5">
 53 |             <label id="formLabel">Father Name</label>
 54 |             <div class="inputDiv">
 55 |                 <input type="text" id="fatherNameInput" placeholder="Father Name">
 56 |             </div>
 57 |         </div>
 58 |         <!-- email Div -->
 59 |         <div class="emailDiv col-12 col-sm-12 col-md-6 col-lg-5">
 60 |             <label id="formLabel">Email</label>
 61 |             <div class="inputDiv">
 62 |                 <input type="email" id="emailInput" placeholder="Email">
 63 |             </div>
 64 |         </div>
 65 |         <!-- phone Div -->
 66 |         <div class="phoneDiv col-12 col-sm-12 col-md-6 col-lg-5">
 67 |             <label id="formLabel">Phone</label>
 68 |             <div class="inputDiv">
 69 |                 <input type="number" id="phoneInput" placeholder="03000000000" maxlength="11">
 70 |             </div>
 71 |         </div>
 72 |         <!-- cnic Div -->
 73 |         <div class="cnicDiv col-12 col-sm-12 col-md-6 col-lg-5">
 74 |             <label id="formLabel">CNIC</label>
 75 |             <div class="inputDiv">
 76 |                 <input type="number" id="cnicInput" placeholder="CNIC" maxlength="13">
 77 |             </div>
 78 |         </div>
 79 |         <!-- father cnic Div -->
 80 |         <div class="fatherCnincDiv col-12 col-sm-12 col-md-6 col-lg-5">
 81 |             <label id="formLabel">Father's CNIC (optional)</label>
 82 |             <div class="inputDiv">
 83 |                 <input type="number" id="fatherCnicInput" placeholder="Father's CNIC (optional)">
 84 |             </div>
 85 |         </div>
 86 |         <!-- date Div -->
 87 |         <div class="dateDiv col-12 col-sm-12 col-md-6 col-lg-5">
 88 |             <label id="formLabel">Date of birth</label>
 89 |             <div class="inputDiv">
 90 |                 <input type="date" id="dateInput">
 91 |             </div>
 92 |         </div>
 93 |         <!-- select gender -->
 94 |         <div class="genderDiv col-12 col-sm-12 col-md-6 col-lg-5">
 95 |             <label id="formLabel">Select gender</label>
 96 |             <div class="selectInputDiv">
 97 |                 <select name="select-gender" id="select-gender">
 98 |                     <option value="" disabled selected>Select gender</option>
 99 |                     <option value="male">Male</option>
100 |                     <option value="female">Female</option>
101 |                 </select>
102 |             </div>
103 |         </div>
104 |         <!-- address Div -->
105 |         <div class="addressDiv col-12 col-sm-12 col-md-12 col-lg-10">
106 |             <label id="formLabel">Address</label>
107 |             <div class="inputDiv">
108 |                 <input type="text" id="addressInput" placeholder="Address">
109 |             </div>
110 |         </div>
111 |         <!-- last qualification Div -->
112 |         <div class="lastQualificationDiv col-12 col-sm-12 col-md-12 col-lg-10">
113 |             <label id="formLabel">Last Qualification</label>
114 |             <div class="selectInputDiv">
115 |                 <select name="last-qualification" id="last-qualification">
116 |                     <option value="" disabled selected>Last Qualification</option>
117 |                     <option value="matric">Matric</option>
118 |                     <option value="intermediate">Intermediate</option>
119 |                     <option value="undergraduate">Undergraduate</option>
120 |                     <option value="graduate">Graduate</option>
121 |                     <option value="masters">Masters</option>
122 |                     <option value="phd">PHD</option>
123 |                     <option value="other">Other</option>
124 |                 </select>
125 |             </div>
126 |         </div>
127 |         <!-- Do you have a Laptop? Div -->
128 |         <div class="genderDiv col-12 col-sm-12 col-md-12 col-lg-10">
129 |             <label id="formLabel">Do you have a Laptop?</label>
130 |             <div class="selectInputDiv">
131 |                 <select name="have-laptop" id="have-laptop">
132 |                     <option value="" disabled selected>Do you have a Laptop?</option>
133 |                     <option value="yes">Yes</option>
134 |                     <option value="no">No</option>
135 |                 </select>
136 |             </div>
137 |         </div>
138 |         <!-- picture Div -->
139 |         <div class="pictureDiv col-12 col-sm-12 mt_20 col-md-12 col-lg-10">
140 |             <label id="formLabel">Picture</label>
141 |             <div class="upload-rulesDiv col-12 col-sm-12 mt_20 col-md-12 col-lg-10 d-flex">
142 |                 <div class="profilePicDiv">
143 |                 </div>
144 |                 <div class="uploadBtnDiv">
145 |                     <div class="inputDiv" id="picInputDiv">
146 |                         <input type="file" accept="image/*" id="picInput">
147 |                         <span>+ Upload</span>
148 |                     </div>
149 |                 </div>
150 | 
151 |                 <div class="picRulesDiv">
152 |                     <ul>
153 |                         <li>With white or blue background
154 |                         </li>
155 |                         <li>
156 |                             File size must be less than 1MB
157 |                         </li>
158 |                         <li>
159 |                             File type: jpg, jpeg, png
160 |                         </li>
161 |                         <li>
162 |                             Upload your recent passport size picture
163 |                         </li>
164 |                         <li>
165 |                             Your Face should be clearly visible without any Glasses
166 |                         </li>
167 |                     </ul>
168 |                 </div>
169 |             </div>
170 |         </div>
171 |         <!-- rulesParentDiv -->
172 |         <div class="rulesParentDiv col-12 col-sm-12 mt_20 col-md-12 col-lg-10">
173 |             <div class="separaterLine"></div>
174 |             <div class="rulesDiv">
175 |                 <ol>
176 |                     <li>I hereby, solemnly declare that the data and facts mentioned herein are true and correct to the
177 |                         best
178 |                         of my knowledge. Further, I will abide by all the established and future regulations and
179 |                         policies of
180 |                         SWIT</li>
181 |                     <li>I hereby accept the responsibilities of good conduct and guarantee that I will not be involved
182 |                         in
183 |                         any other activity, political or ethical, but learning during my stay in the program.</li>
184 |                     <li>Defiance will render my admission canceled at any point in time.</li>
185 |                     <li>Upon completion, of the course, I will complete the required project by SWIT.</li>
186 |                     <li>It's mandatory for female students to wear abaya/hijab in the class</li>
187 |                 </ol>
188 |             </div>
189 |         </div>
190 |         <!-- submitBtnDiv -->
191 |         <div class="submitBtnDiv col-12 col-sm-12 mt_20 col-md-12 col-lg-10">
192 |             <button class="submitBtn">
193 |                 Submit
194 |             </button>
195 |         </div>
196 |     </div>
197 | 
198 | 
199 | 
200 | 
201 | 
202 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
203 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
204 |     <script type="module" src="app.js"></script>
205 | </body>
206 | 
207 | </html>


--------------------------------------------------------------------------------