Adding responsiveness and optimized script

geekSamarth · Jul 26, 2023 · 5e90ac3 · 5e90ac3
1 parent 4d05b1b
commit 5e90ac3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -46,18 +46,14 @@ <h1>Learn to code by watching others</h1>
             >
           </div>
           <div class="form_control">
-            <input
-              type="text"
-              placeholder="Email Address "
-              id="emailAddress"
-            />
+            <input type="text" placeholder="Email Address " id="emailAddress" />
             <img src="./images/icon-error.svg" alt="" class="icons-error" />
             <small class="errorText"
               >Lorem ipsum dolor sit, amet consectetur</small
             >
           </div>
           <div class="form_control">
-            <input type="password" placeholder="Password" id="formPassword">
+            <input type="password" placeholder="Password" id="formPassword" />
             <img src="./images/icon-error.svg" alt="" class="icons-error" />
             <small class="errorText"
               >Lorem ipsum dolor sit, amet consectetur</small

diff --git a/main.js b/main.js
@@ -28,9 +28,9 @@ const checkInputs = () => {
   }
   if (emailValue === "") {
     checkError(email, "Looks like it is not an email");
-  }else if(!isEmail(emailValue)){
-    checkError(email,"Email is not valid")
-  }else {
+  } else if (!isEmail(emailValue)) {
+    checkError(email, "Email is not valid");
+  } else {
     setSuccess(email);
   }
   if (passwordValue === "") {
@@ -50,6 +50,6 @@ const setSuccess = (input) => {
   let formControl = input.parentElement;
   formControl.className = "form_control";
 };
-const isEmail = (email)=>{
-    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i.test(email);
-}
+const isEmail = (email) => {
+  return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i.test(email);
+};
diff --git a/style.css b/style.css
@@ -20,6 +20,7 @@
     background-color: var(--primary-color);
     background-image: url('./images/bg-intro-desktop.png');
     background-repeat: no-repeat;
+    background-size: cover;
     gap: 70px;
 }
 .introductory_passage{
@@ -140,25 +141,27 @@ input:focus{
 }
 /* adding media queries for responsiveness */
 
-@media screen and (max-width:500px){
+@media screen and (max-width:540px){
     .intro_wrapper{
         background-image: url('./images/bg-intro-mobile.png');
         flex-direction: column;
         gap: 40px;
     }
     .introductory_passage{
         padding:0 12px;
-
+        margin-top: 80px;
     }
     .introductory_passage h1{
-        margin-top: 80px;
         font-size: 24px;
         text-align: center;
     }
     .introductory_passage p{
         text-align: center;
         line-height: 1.7;
     }
+    .signup_form{
+        margin-bottom: 50px;
+    }
     .pricing{
         padding: 18px 15px;
         font-size: 15px;
@@ -167,3 +170,4 @@ input:focus{
         padding:0 10px;
     }
 }
+