added basic validation to html files

dokoede · Sep 17, 2019 · 3a65e81 · 3a65e81
1 parent 3d79826
commit 3a65e81
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -17,10 +17,10 @@
     <form class="form" action="" id="loginform">
       <h1><strong>Login to Your Account</strong></h1><br> <!-- @mogbonjubola -->
       <label for="email"><strong>E-mail</strong></label> <!-- @mogbonjubola -->
-      <input type="text" name="email" id="email" placeholder="Enter Your Email" />
+      <input type="text" name="email" id="email" placeholder="Enter Your Email"  required/>
       <br />
       <label for="password"><strong>Password</strong></label>
-      <input type="password" name="password" id="password" placeholder="Enter Your Password" />
+      <input type="password" name="password" id="password" placeholder="Enter Your Password" required/>
       <div id="checkitems">
           <div class="div-1">
             <input type="checkbox" name="Remember Me" id="Remember"/><p id="remember-me">Remember Me</p>

diff --git a/signup.css b/signup.css
@@ -48,7 +48,8 @@ input {
 
 #email,
 #password,
-#phone {
+#phone,
+#name {
   height: 30px;
   border-radius: 15px;
   border: 1px solid darkgreen;

diff --git a/signup.html b/signup.html
@@ -14,11 +14,14 @@
 <body>
   <div class="container">
     <form class="form" action="#" id="form">
-      <h1><strong>Create Your Account</strong></h1><br> <!-- @mogbonjubola -->
-      <label for="email"><strong>Name</strong></label>
-      <input type="text" name="Text" id="email" placeholder="Enter Your Name" />
+      <h1><strong>Create Your Account</strong></h1><br>
+
+      <label for="name"><strong>Name</strong></label>
+      <input type="text" name="name" id="name" placeholder="Enter Your Name" maxlength="40" required />
+
+
       <label for="email"><strong>E-mail</strong></label>
-      <input type="text" name="email" id="email" placeholder="Enter Your Email" />
+      <input type="email" name="email" id="email" placeholder="Enter Your Email" required />
       <br />
 
 
@@ -30,15 +33,15 @@ <h1><strong>Create Your Account</strong></h1><br> <!-- @mogbonjubola -->
       </div>
 
       <label for="password"><strong>Password</strong></label>
-      <input type="password" id="password" placeholder="Enter Your Password" />
+      <input type="password" id="password" placeholder="Enter Your Password" required />
 
       <label for="phone"><strong>Phone</strong></label>
-      <input type="tel" id="phone" placeholder="Enter Your phone" />
+      <input type="tel" id="phone" placeholder="Enter Your phone" required />
 
 
 
       <div id="btns" class="btns">
-        <button class="btn register" type="button" value="Register">Sign
+        <button class="btn register" type="submit" value="Register">Sign
           Up</button>
         <button onClick="location.href='index.html'" class="btn login" type="button" value="Login">Login</button>
       </div>

diff --git a/style.css b/style.css
@@ -11,7 +11,7 @@ body {
   background-color: #b8b7b7e7;
   /* Janetsomehow */
   color: #4f4f4f;
-  font-size: 100%;
+  /* font-size: 100%; */
 }
 
 .container {
@@ -64,7 +64,7 @@ form.form input#password {
   /*Angela */
   border-collapse: collapse;
   outline: 0;
-  box-shadow: 0 0 10px darkgreen; 
+  box-shadow: 0 0 10px darkgreen;
 }
 
 #password:focus {
@@ -151,18 +151,21 @@ form.form div#btns button.btn.register {
 form.form div#btns button.btn.login {
   background: rgb(32, 109, 32);
   color: white;
-  border: 1px solid rgb(32, 109, 32); /*taofeeq_deru*/
+  border: 1px solid rgb(32, 109, 32);
+  /*taofeeq_deru*/
 }
 
 form.form div#btns button.btn.login:hover {
   background: rgb(4, 66, 4);
-  cursor: pointer; /*taofeeq_deru*/
+  cursor: pointer;
+  /*taofeeq_deru*/
 }
 
 form.form div#btns button.btn.register:hover {
   background: rgb(4, 66, 4);
   color: white;
-  cursor: pointer; /*taofeeq_deru*/
+  cursor: pointer;
+  /*taofeeq_deru*/
 }
 
 /* thigns to do */
@@ -181,79 +184,97 @@ form.form div#btns button.btn.register:hover {
   background-size: cover;
 }
 
-.side2 img{
+.side2 img {
   /*taofeeq_deru*/
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
-  height: 600px; 
+  height: 600px;
   width: 450px;
 }
 
 /*responsiveness by taofeeq_deru*/
-@media screen and (max-width: 800px){ /*for screens snmaller than 800px*/
-  .container{
+@media screen and (max-width: 800px) {
+
+  /*for screens snmaller than 800px*/
+  .container {
     display: grid;
     width: 700px;
     grid-template-columns: 350px 350px;
     grid-template-rows: 500px;
     margin: 30px auto;
   }
-  .side2 img{
+
+  .side2 img {
     width: 350px;
     height: 500px;
   }
-  .form div#btns button.btn{
+
+  .form div#btns button.btn {
     padding: 10px 30px;
   }
 }
 
-@media screen and (max-width: 480px){ /*for screens smaller than 480px*/
-  body{
+@media screen and (max-width: 480px) {
+
+  /*for screens smaller than 480px*/
+  body {
     background: url("https://res.cloudinary.com/dthwqcdxe/image/upload/v1568650329/login_image_2_c9pbxa.jpg");
   }
-  .container{
+
+  .container {
     display: grid;
     width: 400px;
     grid-template-columns: 300px;
     grid-template-rows: 500px;
     margin: 50px auto;
   }
-  .side2{
+
+  .side2 {
     display: none;
   }
-  .form{
+
+  .form {
     border-radius: 20px;
   }
 }
 
-@media screen and (max-width: 380px){ /*for screens less than 380px*/
-  .container{
+@media screen and (max-width: 380px) {
+
+  /*for screens less than 380px*/
+  .container {
     display: grid;
     width: 300px;
     grid-template-columns: 300px;
     grid-template-rows: 500px;
   }
 }
 
-@media screen and (max-width: 350px){ /*for screens less than 350px*/
-  body{
+@media screen and (max-width: 350px) {
+
+  /*for screens less than 350px*/
+  body {
     font-size: 70%;
   }
-  .container{
+
+  .container {
     display: grid;
     width: 280px;
     grid-template-columns: 280px;
     grid-template-rows: 420px;
   }
-  #checkitems{
+
+  #checkitems {
     display: flex;
     flex-direction: column-reverse;
     margin-top: 20px;
   }
-  #Remember, #remember-me{
+
+  #Remember,
+  #remember-me {
     margin-top: 20px;
   }
-  #btns{
+
+  #btns {
     margin-top: -40px;
   }
-}
+}