JavaScript Assignments

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)

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">&times;</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 without any input

Output with validation Error Message

  1. When Sign up is clicked without any input data
    When Sign up is clicked without any input data
  2. When Sign up is clicked with wrong Email ID
    When Sign up is clicked with wrong Email ID
  3. When Sign up is clicked with wrong Date of Birth
    When Sign up is clicked with wrong Date of Birth

Output with Success Message

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:

calculator

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.