WD - Practical 9,10,11
WD - Practical 9,10,11
Problem Statement:
Design the following static webpages using CSS border properties.
Methodology:
Write about CSS background and border.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>CSS Background and Border</title>
<style type="text/css">
*,html{ margin:0px; padding:0px }
body{ background:url('img/web_bkg.jpg') #145CA6 no-repeat right
top}
main{ width:900px;
height:1000px;
margin:0 auto;
background:url('img/main_bkg.jpg');
background-size:cover;
border:10px solid red;
border-radius: 10px;
border-image: url('img/border_img.jpg') 10 round;
//border-image: url('img/border_img.jpg') 1 stretch;
}
/linear-gradient background/
/*main{ width:900px;
height:1000px;
margin:0 auto;
//background-image: linear-gradient(red , yellow);
background-image: linear-gradient(180deg, red, yellow, green);
// background-image: linear-gradient(red, yellow, green);
//background-image: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
//background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
// background-image: repeating-linear-gradient(red, yellow 10%, green
20%);
}*/
/radial-radialnt background with text and box shadow/
/*main{
width:900px;
height:1000px;
margin:0 auto;
//background-image: radial-
gradient(blue,green,yellow,black);
//background-image: radial-gradient(red 5%, yellow 15%, green 60%);
background-image: radial-gradient(circle, #999, #888, #CCC);
text-shadow: #F04 1px 5px 8px; box-shadow: #F04 10px 0px 20px;
}*/
</style>
</head>
<body>
<main>
<h1>Welcome on my page</h1>
</main>
</body>
</html>
Practical-11
Problem Statement:
Write JavaScript to validate the following fields of the above registration page.
1. Name (Name should contains alphabets and the length should not be less than 6 characters)
2. Password (Password should not be less than 6 characters length)
Methodology:
Write about javascript &form validation
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>ABES Engineering College | Login</title>
<style type="text/css">
body{ margin:0px; padding:0px }
*,html{ margin:0px; padding:0px }
main{ width:100%; height: auto; margin:0px auto; }
table{ margin:0px auto; }
table td{ text-align:center; }
.box{ width:400px; padding:5px; }
.btn{ width:100px; padding:5px }
</style>
</head>
<body>
<main><!--login-->
<form action="" method="get">
<table border="0" cellspacing="20">
<tr>
<th>Login</th>
<td><strong>JS Validation for User Name and
Password</strong></td>
</tr>
<tr><td><label>User Name :</label></td>
<td><input type="text" placeholder="Enter User Name"
class="box" id='userInput'></td>
</tr>
<tr>
<td><label>Password :</label></td>
<td><input type="Password" placeholder="Enter Password"
id="userPassword" class="box" minlength="6" ></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn"
onclick='validateForm()'>
<input type="reset" class="btn">
</td>
</tr>
</table>
</form>
</main><!--login-->
<script type="text/javascript">
function validateForm(){
var txtInput=document.getElementById('userInput').value;
var alfaTxt=/^[a-zA-Z]+$/;
var pwd=document.getElementById('userPassword').value;
if((!txtInput.match(alfaTxt)) || txtInput.length<6)
{
alert("Please Enter Only Charcters, length of 6 ");
}
else if(pwd.length<6){
alert("Please Enter Password atleast length of 6");
}
else{
alert('Success Data');
}
}
</script>
</body>
</html>
Practical-12
Problem Statement:
Write JavaScript to validate the following fields of the above registration page.
1. E-mailid (should not contain any invalid and must follow the standard
pattern([email protected])
2. Phone Number(Phone number should contain 10 digits only)
Methodology:
Write about javascript function and event handling
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>ABES Engineering College | Login</title>
<style type="text/css">
body{ margin:0px; padding:0px }
*,html{ margin:0px; padding:0px }
main{ width:100%; height: auto; margin:0px auto; }
table{ margin:0px auto; }
table td{ text-align:center; }
.box{ width:400px; padding:5px; }
.btn{ width:100px; padding:5px }
</style>
</head>
<body>
<main><!--login-->
<form action="" method="get">
<table border="0" cellspacing="20">
<tr>
<th>Login</th>
<td><strong>JS Validation for User E-mail and
Phone</strong></td>
</tr>
<tr>
<td><label>User Name :</label></td>
<td><input type="email" placeholder="Enter your E-mail"
class="box" id='userMail'></td>
</tr>
<tr>
<td><label>Phone:</label></td>
<td><input type="text" placeholder="Enter your Number"
maxlength="10" id="userPhone" class="box"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn"
onclick='validateForm()'>
<input type="reset" class="btn">
</td>
</tr>
</table>
</form>
</main><!--login-->
<script type="text/javascript">
function validateForm(){
var mailInput=document.getElementById('userMail').value;
var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})
+$/;
var phoneInput=document.getElementById('userPhone').value;
if(!mailInput.match(mailformat))
{
alert("Please Enter Correct E-mail Id ");
}
else if(phoneInput.length<10){
alert("Please Enter Valide 10 Digit Number");
}
else{
alert('Success Data');
}
}
</script>
</body>
</html>