Update index.html

### Code Analysis 1. **Structure and Semantics**: - The HTML structure is mostly correct, but it lacks semantic tags like `<header>`, `<nav>`, and `<main>`, which would enhance accessibility and clarity. 2. **Form Validation**: - The JavaScript validation checks for required fields and uses a regex for email validation. However, the phone number validation could be improved to ensure it only contains digits and is exactly 10 characters long. 3. **Error Handling**: - Error handling is implemented well, with visual feedback provided to users. However, error messages should be cleared before new validations to prevent accumulation. 4. **User Feedback**: - The QR code generation lacks user feedback when successfully created, which could improve the user experience. 5. **Accessibility**: - The form includes labels for input fields, but it could benefit from additional ARIA attributes to further enhance accessibility. 6. **Code Maintenance**: - The JavaScript logic could be refactored for better organization, such as extracting common functionality into reusable functions.
Ramsey99 · Oct 16, 2024 · 8455939 · 8455939
1 parent 41db976
commit 8455939
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -12,23 +12,23 @@
 
 <body>
     <div class="main">
-        <div class="navbar">
-            <div class="menu">
+        <header class="navbar">
+            <nav class="menu">
                 <ul>
                     <li><a href="see_details.html">See Details</a></li>
                 </ul>
-            </div>
-        </div>
+            </nav>
+        </header>
 
-        <div class="content">
+        <main class="content">
             <h1>Grand <span>Event</span> <br>Celebration</h1>
             <form id="myform" action="/submit" method="post" enctype="multipart/form-data">
                 <div class="form">
                     <h2>Register Here</h2>
                     <input type="text" id="roll" name="roll" placeholder="Enter Your Class Roll" required>
                     <input type="text" id="fullname" name="fullname" placeholder="Enter Your Full Name" required>
                     <input type="email" id="email" name="email" placeholder="Enter Email Address" required>
-                    <input type="text" id="phno" name="phno" placeholder="Enter Phone Number" required>
+                    <input type="text" id="phno" name="phno" placeholder="Enter Phone Number" required pattern="\d{10}">
 
                     <div class="form-group">
                         <label for="profile">Upload Profile Picture</label>
@@ -65,7 +65,7 @@ <h2>Register Here</h2>
 
             <!-- QR Code Section -->
             <div id="qrcode"></div> <!-- This is where the QR code will be displayed -->
-        </div>
+        </main>
     </div>
 
     <script>
@@ -80,6 +80,11 @@ <h2>Register Here</h2>
             field.closest(".form").appendChild(errorElement);
         }
 
+        const clearErrors = () => {
+            document.querySelectorAll(".form .error").forEach(field => field.classList.remove("error"));
+            document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());
+        }
+
         const handleFormData = (e) => {
             e.preventDefault();
 
@@ -98,8 +103,7 @@ <h2>Register Here</h2>
             const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
 
             // Clear existing errors
-            document.querySelectorAll(".form .error").forEach(field => field.classList.remove("error"));
-            document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());
+            clearErrors();
 
             // Validation checks
             if (fullname === "") {
@@ -108,9 +112,7 @@ <h2>Register Here</h2>
             if (!emailPattern.test(email)) {
                 showError(emailInput, "Enter a valid email address");
             }
-            if (phno === "") {
-                showError(phnoInput, "Enter your phone number");
-            } else if (phno.length != 10) {
+            if (!/^\d{10}$/.test(phno)) {
                 showError(phnoInput, "Phone number should be 10 digits");
             }
             if (stream === "") {
@@ -129,8 +131,12 @@ <h2>Register Here</h2>
 
             // Generate QR code
             QRCode.toCanvas(qrCodeDiv, qrData, function (error) {
-                if (error) console.error(error);
-                console.log('QR Code generated!');
+                if (error) {
+                    console.error(error);
+                } else {
+                    console.log('QR Code generated!');
+                    alert('QR Code generated successfully!'); // Added user feedback
+                }
             });
         }