Created
March 13, 2022 16:54
-
-
Save ys251294/6682605a31bf186188e51bbc68c21ad1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Appointment</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" | |
| crossorigin="anonymous" | |
| /> | |
| </head> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| max-width: 100%; | |
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| padding: 50px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| form div input { | |
| width: 100%; | |
| height: 40px; | |
| border-radius: 8px; | |
| outline: none; | |
| border: 2px solid #c4c4c4; | |
| padding: 0 30px; | |
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| form div { | |
| position: relative; | |
| margin-bottom: 15px; | |
| } | |
| input:focus { | |
| border: 2px solid #f2796e; | |
| } | |
| form div i { | |
| position: absolute; | |
| padding: 10px; | |
| } | |
| .failure-icon, | |
| .error { | |
| color: red; | |
| } | |
| .success-icon { | |
| color: green; | |
| } | |
| .error { | |
| font-size: 14.5px; | |
| margin-top: 5px; | |
| } | |
| .success-icon, | |
| .failure-icon { | |
| right: 0; | |
| opacity: 0; | |
| } | |
| button { | |
| margin-top: 15px; | |
| width: 100%; | |
| height: 45px; | |
| background-color: #f2796e; | |
| border: 2px solid #f2796e; | |
| border-radius: 8px; | |
| color: #fff; | |
| font-size: 20px; | |
| cursor: pointer; | |
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| transition: all 0.1s ease; | |
| } | |
| button:hover { | |
| opacity: 0.8; | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <form id="form"> | |
| <div> | |
| <label for="yourname">Your Name</label> | |
| <i class="fas fa-user"></i> | |
| <input | |
| type="text" | |
| name="yourname" | |
| id="yourname" | |
| placeholder="'The Roots' Dental Clinic" | |
| /> | |
| <i class="fas fa-exclamation-circle failure-icon"></i> | |
| <i class="far fa-check-circle success-icon"></i> | |
| <div class="error"></div> | |
| <div> | |
| <label for="mobileno">Mobile No</label> | |
| <i class="fas fa-mobile"></i> | |
| <input | |
| type="number" | |
| name="mobileno" | |
| id="mobileno" | |
| placeholder="8595516572" | |
| /> | |
| <i class="fas fa-exclamation-circle failure-icon"></i> | |
| <i class="far fa-check-circle success-icon"></i> | |
| <div class="error"></div> | |
| </div> | |
| <div> | |
| <label for="email">Email</label> | |
| <i class="far fa-envelope"></i> | |
| <input | |
| type="email" | |
| name="email" | |
| id="email" | |
| placeholder="therootsdentalclinic@gmail.com" | |
| /> | |
| <i class="fas fa-exclamation-circle failure-icon"></i> | |
| <i class="far fa-check-circle success-icon"></i> | |
| <div class="error"></div> | |
| </div> | |
| </div> | |
| <button id="btn" type="submit">Schedule Appointment</button> | |
| </form> | |
| </div> | |
| <script type="text/javascript"> | |
| let id = (id) => document.getElementById(id); | |
| let classes = (classes) => document.getElementsByClassName(classes); | |
| let yourname = id("yourname"), | |
| email = id("email"), | |
| mobileno = id("mobileno"), | |
| form = id("form"), | |
| errorMsg = classes("error"), | |
| successIcon = classes("success-icon"), | |
| failureIcon = classes("failure-icon"); | |
| let engine = (id, serial, message) => { | |
| if (id.value.trim() === "") { | |
| errorMsg[serial].innerHTML = message; | |
| id.style.border = "2px solid red"; | |
| // icons | |
| failureIcon[serial].style.opacity = "1"; | |
| successIcon[serial].style.opacity = "0"; | |
| } else { | |
| errorMsg[serial].innerHTML = ""; | |
| id.style.border = "2px solid green"; | |
| // icons | |
| failureIcon[serial].style.opacity = "0"; | |
| successIcon[serial].style.opacity = "1"; | |
| } | |
| }; | |
| form.addEventListener("submit", (e) => { | |
| e.preventDefault(); | |
| engine(yourname, 0, "yourname cannot be blank"); | |
| engine(mobileno, 1, "Mobile No cannot be blank"); | |
| // engine(email, 2, "Email cannot be blank"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment