Assignment 1: Create a Sign-up form, with following validation:
- All fields are mandatory
- The Email Id must be valid
- The Phone number must be valid
- The Date of Birth must be in such a way that it is greater than 18
- The two passwords must match (password and confirm password)
Table of Contents
HTML Code
<!DOCTYPE html> <html> <head> <link href="styles/style.css" rel="stylesheet" type="text/css"> <script src="scripts/index.js"></script> </head> <body> <form style="border:1px solid #000"> <div class="container"> <h1>Sign Up</h1> <p>All fields are mandatory! </p> <hr> <div> <div class="top-row"> <div class="field-wrap"> <input type="text" placeholder="First Name" required> <input type="text" placeholder="Last Name" required> </div> </div> <div class="top-row"> <div class="field-wrap"> <input type="email" placeholder="Enter Email ID" required autocomplete="off"> <input id="idNumber" type="number" placeholder="Enter Phone Number" required> </div> </div> <div class="top-row"> <div class="field-wrap"> <input id="psd1" type="password" placeholder="Enter Password" name="psw" required> <input id="psd2" type="password" placeholder="Confirm Password" name="psw-repeat" required> </div> </div> <div class="top-row"> <div class="field-wrap"> <label for="start">Enter your Date of Birth: </label> <input type="date" id="start" name="trip-start" value="2018-07-22" min="1900-01-01" max="2001-12-31"> </div> </div> <div class="clearfix"> <button type="button" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn" onclick="onSignup()">Sign Up</button> </div> </div> </form> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <p>You are Registered successfully!</p> </div> </div> </body> </html>
CSS Code
.field-wrap { position:relative; margin-bottom:40px; } .top-row { &:after { content: ""; display: table; clear: both; } > div { float:left; width:48%; margin-right:4%; &:last-child { margin:0; } } } h1,p{ text-align: center; } body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box} /* Full-width input fields */ input[type=text], [type=email], [type=number], [type=date], input[type=password] { width: 500px; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } input[type=text]:focus, [type=email]:focus, [type=number]:focus, [type=date]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } /* Extra styles for the cancel button */ .cancelbtn { padding: 14px 20px; background-color: #f44336; } /* Float cancel and signup buttons and add an equal width */ .cancelbtn, .signupbtn { float: left; width: 50%; } /* Add padding to container elements */ .container { padding: 16px; } /* Clear floats */ .clearfix::after { content: ""; clear: both; display: table; } /* Change styles for cancel button and signup button on extra small screens */ @media screen and (max-width: 300px) { .cancelbtn, .signupbtn { width: 100%; } } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
JavaScript Code
function onSignup(){ var number, pwd1, pwd2; number = document.getElementById("idNumber"); pwd1 = document.getElementById("psd1"); pwd2 = document.getElementById("psd2"); if(number.value.length !== 10) alert("Wrong Mobile Number!"); else {if (pwd1 !== pwd2) alert("Password Do not match!"); else { // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // When the user clicks the button, open the modal modal.style.display = "block"; } } }
Output
Output without any input
Output with validation Error Message
- When Sign up is clicked without any input data
- When Sign up is clicked with wrong Email ID
- When Sign up is clicked with wrong Date of Birth
Output with Success Message
Assignment 2: Create a calculator, with the following validation:
- On click of c e. clear, the input box must get empty
- On division of any number by 0 must produce error message
- If result is too big or small to show, produce valid message
The calculator must look something like shown below:
0 Comments