Scribd
Upload
14 views18 pages

Experiment 6-10

The document outlines multiple experiments focused on JavaScript and CSS for validating user inputs on a registration page, including name, password, email ID, and phone number. It provides code snippets for each validation type, detailing the necessary HTML structure and JavaScript functions. Additionally, it includes examples of using CSS for styling web pages and creating a To-Do List application.

Uploaded by

princeasthana0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views18 pages

Experiment 6-10

The document outlines multiple experiments focused on JavaScript and CSS for validating user inputs on a registration page, including name, password, email ID, and phone number. It provides code snippets for each validation type, detailing the necessary HTML structure and JavaScript functions. Additionally, it includes examples of using CSS for styling web pages and creating a To-Do List application.

Uploaded by

princeasthana0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

EXPERIMENT -6

OBJECTIVE: Write Java Script to validate the “name” and“ password” fields of the registration page.
Program in Java Script to validate the following fields of the above registration page.
Name(Name should contains alphabets and the length should not be less than 6 characters).
Password (Password should not be less than 6 characters length).
<!—Program for validating the user name(Name should contains alphabets and the length should not be less than
6 characters).
1) NAME VALIDATION
<html>
<head>
<title>validating a textbox</title>
<script language="java script"> function button_click()
{ var fname=f. fname.value ;var sp char = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?~";
var number="0123456789"; if(fname. length<6)
{
alert("firstnameatleast6characters");
}if(fname!=""){for(var i=0;i<fname.length ; i++)
{if(sp char.index Of(f name.charAt(i))!=
-1)
{alert("User id should not have special characters");
f.fname.value="";return false;
}
}}if (fname!="")
{
for (var i=0;i<fname.length ; i++)
{if (number. index Of(fname.char At(i))!=
-1)
{alert("User id should not have numbers");
f.fname.value="";return false;
}}
If (fname.length>=6
)alert("valid username");
}

}
</script>
<body>
<center>
<form name="f">
<table>
<h2align="center">USERNAMEVALIDATION</h2>
<tr>
<td align="right">USER NAME:</td>
<td><input type="text"name="fname"maxlength=20size=30></td>
</tr>
<br>
<tr>
<td></td>
<td><inputtype="button"value="SUBMIT"onClick="button_click()"></td></tr>
</form>
</table>
</center>
</body>
</html>
OUTPUT:

\
Experiment 6
Program for password field validation (should not be less than6 characters) (pwdvalid.html)

<html>
<head>
<title>PASSWORD VALIDATION</title>
<script language="javascript"> function pass()
{varp w=f.pw.value; var cpw=f.cpw.value; if(pw.length<6)
{

alert("PASSWORD MUST BE 6 CHARACTERS");


}
if(pw!=cpw)

{
alert("PASSWORD DON'T MATCH");
} else if(pw.length>=6)
alert("PASS WORD VALIDATION SUCCESS");
}
</script>
</head>
<body>
<form name="f">
<table align="center">
<h2 align="center">PASSWORDVALIDATION</h2>
<br>
<tr>
<td align="right">Pass Word:</td>
<tdalign="left"><inputtype="PassWord"maxlength="10"size="30"name="pw"></td>
</tr>
<tr>
<td align="right">Confirm PassWord:</td>
<tdalign="left"><inputtype="PassWord"maxlength="10"size="30"name="cpw"></td>
</tr>
<tr>
<td></td>
<td><input type="button"value="SUBMIT"on Click="pass()"/></td>
</tr>
</table></form></body></html>

Output:
EXPERIMENT -7
OBJECTIVE: Write Java Script to validate the “Email ID ” and “PhoneNumber”fields of the registration
page.
Program for E-mail id validation (should not contain any invalid and must follow the standard pattern-)
(emailvalid.html)
<html>
<head>
<title>EMAILIDVALIDATION</title>
<script language="java script"> function check()
{
if(f.txtname.value.index Of('@')==-1)
{alert("invalid");
}
else if((f.txtname.value.indexOf('@')==0)||(f.txtname.value.indexOf('.')==0)||(f.txtname.value.indexOf('@'))>
(f.txtname.value.indexOf('.')))
{ alert("invalid email id"); f.txtname.value="";} else alert("valid email id");
}
</script>
</head>
<body>
<form name="f">
<table align="center">
<h2align="center">EMAILVALIDATION</h2>
<br>
<tr>
<td align="right">Email-ID:</td>
<td align="left"><input type="text"name="txtname"size=40>
</tr>
<tr>
<td></td>
<td><input type="button"value="SUBMIT"onClick="check()"/></td>
</tr>

</table>
</form>
</body>
</html>

Output:

Program for Phone number validation (Phone number should contain 10 digits only) (phn valid.html)
<html>
<head>
<title>PHONE NUMBER VALIDATION</title>
<script language="java script"> function ph no()
{ var ph=f.ph.value; if(ph.length==10)
{if(is NaN(ph))alert("It is not a valid Phone number"); else alert("It is a valid Phone number");
}else alert("Please enter a valid phone number");
}
</script>
</head>
<body>
<form name="f">
<table align="center">
<br><br><br><br>
<h2align="center">PHONE NUMBER VALIDATION</h2>
<br>
<tr>
<td align="right">PHONE NO:</td>
<td align="left"><inputtype="text"maxlength="15"size="30"name="ph"></td>
</tr>
<tr>
<td></td>
<td><input type="button"value="SUBMIT"on Click="ph no()"/></td>
</tr>
</table>
</form>
</body>
</html>

Output:
EXPERIMENT -8
OBJECTIVE: Design a web page using CSS (Cascading Style Sheets) which includes Use of different font,
styles and background image.

Use different font,styles:


In the style definition you define how each selector should work (font,color etc.). Then,in the body of your pages
,you refer to these selectors to activate the styles. Program for creating inline style sheets
1)Inline.html
<head>
<title>inline stylesheet</title>
</head><body> normal bold:<b>web technologies</b><br> after applying inline style
<bstyle="color:red;font-size:22px;font-family:arial;text-decoration:underline">Webtechnologies</b>
</body>
</html>
Output:
Set a back ground image for both the page and single elements on the page.
Program for creating the back ground image(image.html)
<html>
<head>
<style type="text/css">body
{
background-image:url(“C:\DocumentsandSettings\AllUsers\Documents\MyPictures\Sample Pictures\
Sunset.jpg"); background-repeat: no-repeat
}
</style>
</head>
<body>
<center>
<font color=fuchsia>
<h1>Web Technologies</h1>
</center>
</body>
</html>
Output:
EXPERIMENT-9
OBJECTIVE: Using CSS Control the repetition of the image with the background-repeat
property and define styles for links.
Control the repetition of the image with the background-repeat property. As background-
repeat: repeat
Tiles the image until the entire page isfilled,just like an ordinary back ground image in plain
HTML.
Program for image repetition
<html>
<head>
<style type="text/css">body{
background-image:url("C:\DocumentsandSettings\AllUsers\Documents\MyPictures\Sample Pictures\
Winter.jpg"); background-repeat: repeat
}
</style>
</head>
<body>
<center>
<fontcolor=fuchsia>
<h1>satish</h1>
</font>
</center>
</body>
</html>
Output:
Define styles for links as A:link A:visited A:active A: hover
Defining styles using CSS(external.html)
<html>
<head>
<title>
external style sheet
</title>
<link rel="style sheet"type="text/css"href="styles.css"/>
</head>
<body bgcolor="black">
<fontcolor=white>normal bold:<b>Web technologies</b><br>after applied embedded style:
<b class="headline">Web Technologies</b><br>
<b>
<a href="login.html"class="x link">CROSSLINK</a>
<br>
<a href="login.html"class="hlink">HELPLINK</a><br><br>
<a href="login.html">anotherLINK</a>
</b>
</font>
</body>
</html>
style.css
b. headline{color:green;font-size:22px;font-family:arial;text-decoration:underline}
.x link {cursor: cross hair; color :cyan}
.h link {cursor: help ; color: purple}
A: link {text-decoration: none; color: green} /* unvisited link */ A:visited {text-decoration:
none ;color :yellow} /* visited link */ A:active {text-decoration: none; color:blue} /* selected link */
A:hover{text-decoration: underline; color: red}/*mouse over link*/

Output:
Experiment -10
Objective- Design To-Do List on which you can develop static Web pages and try to implement
all topics of html, CSS and Js within the topic.

!DOCTYPE html>
<html lang="en">
<head>
<meta char set="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
back ground-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="text"] {
width: 70%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 8px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

ul {
list-style-type: none;
padding: 0;
}

li {
padding: 8px;
border-bottom: 1px solid #ccc;
}

li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="task Input" placeholder="Add New Task">
<button on click="add Task()">Add Task</button>

<ul id="task List"></ul>


</div>
<script src="script.js"></script>
</body>
<script>
function add Task() {
var input = document. get Element By Id("task Input");
var task Text = input. value. trim();

if (task Text !== "") {


var task List = document. Get Element By Id("task List");
var new Task = document. Create Element("li");
new Task .text Content = task Text;

var delete Button = document. Create Element("button");


delete Button .text Content = "Delete";
delete Button. onclick = function() {
task List. remove Child(new Task);
};
new Task. append Child (delete Button);
task List. append Child (new Task);
input.value = "";
} else {
alert("Please enter a task!");
}
}
</script>
</html>

You might also like