Itw Assignment 12: Java Script Code

ITW ASSIGNMENT 12
Name: Aditya Adke
Roll no.: 231002
Class: SY IT
GR No.: 22010806
Div/Batch: A1
Java Script code:

function mycapitalized()
{
var x = document.getElementById("fname");
x.value=x.value.toUpperCase();
var y= document.getElementById("lname");
y.value=y.value.toUpperCase();
var z = document.getElementById("Miname");
z.value=z.value.toUpperCase();
var m = document.getElementById("Mname");
m.value=m.value.toUpperCase();
function BankDetails() {
validateControls();
}
var gender;
function validateControls() {
//Email
var email = document.getElementById("email")
if (email.value == "") {
window.alert("please enter your valid email Id");
email.focus();
return false;
}
//Mobile
var mobile = document.getElementById("mobile")

if (mobile.value == "") {
window.alert("please enter your 10 digits mobile no.");
mobile.focus();
return false;
}
//Gender
gender = document.querySelector('input[name="gender"]:checked');
if (gender === null) {
window.alert("Gender required!");
gender.focus();
return false;
}
//Dob
var dob = document.getElementById("dob")
if (dob.value == "") {
window.alert("please enter your Date of Birth");
dob.focus();
return false;
}
//Address
var address = document.getElementById("address")
if (address.value == "") {
window.alert("please enter your address details");
address.focus();
return false;
}
//City
var city = document.getElementById("city")
if (city.value == "") {
window.alert("please enter your city name");
city.focus();
return false;
}
// Pin
var pin = document.getElementById("pin")
if (pin.value == "") {
window.alert("please enter your 6 digits Area PIN");
pin.focus();
return false;
}
// State
var state = document.getElementById("state")
if (state.value == "") {
window.alert("please enter your state name");
state.focus();
return false;
}
}
CSS code:
*{box-sizing: border-box;
input[type=text], input[type=email], input[type=number], input[type=select],

input[type=date],input[type=select],input[type=password], input[type=tel]
{
width: 45%;
padding: 12px;
border: 1px solid rgb(168, 166, 166);
border-radius: 4px;
resize: vertical;
}
textarea{
width:45%;
padding: 12px;
border-radius: 4px;
resize: vertical;
}
input[type=radio],input[type=checkbox]{
width: 1%;
padding-left: 0%;
border-radius: 4px;
resize: vertical;
}
h1{
font-family: Arial;
font-size: medium;
font-style: normal;
font-weight: bold;
color: brown;
text-align: center;
text-decoration: underline;
}
label{
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #e03947;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float:left;
}
input[type=submit]:hover {
background-color: #f0b3bb;
}
.container{
border-radius: 5px;
background-color:#19bae2;
padding: 20px;
}
.col-10{
float: left;
width:10%;
margin-top: 6px;
}
.col-90{
float: left;
width: 90%;
margin-top: 6px;
}
.row:after{
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-10,.col-90,input[type=submit]{
width: 100%;
margin-top: 0;
}
}
Html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Bank Account </title>
<link rel="stylesheet" href="./bankdetails.css">
<script type="text/javascript" lang="javascript"
src="./bankdetails.js"></script>
</head>
<body>
<h1>Create Bank Account </h1>
<h3> Personal details</h3>
<div class="container">
<div class="row">
<div class="col-10">
<label for="fname">First Name:</label>
</div>
<input type="text" id="fname" name="firstname"
placeholder="Enter your first name" onblur="mycapitalized()">
</div>
</div>
<div class="row">
<label for="Miname">Middle Name:</label>
</div>
<input type="text" id="Miname" name="Middlename"
placeholder="Enter your middle name" onblur="mycapitalized()">
</div>
</div>
<div class="row">
<label for="lname">Last Name:</label>
</div>
<input type="text" id="lname" name="lastname"
placeholder="Enter your last name" onblur="mycapitalized()">
</div>
</div>
<div class="row">
<label for="Mname">Mother's Name:</label>
</div>
<input type="text" id="Mname" name="Mothername"
placeholder="Enter your Mother's name" onblur="mycapitalized()" >
</div>
</div>
<div class="row">
<label for="email">Email:</label>
</div>
<input type="email" id="email" name="email"
placeholder="it should contain @">
</div>
</div>
<div class="row">
<label for="mobile">Mobile:</label>
</div>
<input type="tel" id="mobile" name="mobile"
placeholder="only 10 digits are allowed">
</div>
</div>
<div class="row">
<label for="gender" required>Gender:</label>
</div>
<input type="radio" id="male" name="gender"
value="male"/>Male
<input type="radio" id="female" name="gender"
value="female"/>Female
</div>
</div>
<div class="row">
<label for="dob">Date Of Birth:</label>
</div>
<input type="Date" id="dob" name="dob">
</div>
</div>
<div class="row">
<label for="address">Address:</label>
</div>
<textarea name="address" id="address" cols="30"
rows="10"></textarea>
</div>
</div>
<div class="row">
<label for="city">City:</label>
</div>
<input type="text" id="city" name="city" maxlength="10">
</div>
</div>
<div class="row">
<label for="pincode">Area PIN:</label>
</div>
<input type="number" id="pin" name="pin" maxlength="6">
</div>
</div>
<div class="row">
<label for="state">State:</label>
</div>
<input type="text" id="state" name="state">
</div>
</div>
<div class="row">
<label for="accounttype" required>Acoount Type:</label>
</div>
<input type="radio" id="saving" name="accounttype"
value="saving"/>Saving
<input type="radio" id="checking" name="accounttype"
value="checking"/>Checking
</div>
</div>
<div class="row">
<input type="submit" value="Submit" onclick="BankDetails()">
</div>
</div>
</body>
</html>

Itw Assignment 12: Java Script Code

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Itw Assignment 12: Java Script Code

Uploaded by

Copyright:

Available Formats

ITW ASSIGNMENT 12

Name: Aditya Adke

Roll no.: 231002

Java Script code:

var mobile = document.getElementById("mobile")

input[type=text], input[type=email], input[type=number], input[type=select],

You might also like