Validation
Html code
<html>
<body>
<center>
<fieldset>
<legend>Registration</legend>
<form action="Database" method="get" onSubmit="return fun()">
<pre>
Name :<input type="text" name="user" size="10"><br>
Password :<input type="password" name="pwd" size="8"><br>
E-mail :<input type="text" name="email" size="15"><br>
Phone Number :<input type="text" name="ph" size="10"><br>
<input type="submit" value="Register">
</pre>
</form>
</body>
<script src="valid.js"></script>
</html>
Javascript
function fun() {
var userv = document.forms[0].user.value;
var pwdv = document.forms[0].pwd.value;
var emailv = document.forms[0].email.value;
var phv = document.forms[0].ph.value;
var userreg=new RegExp("^[a-zA-Z][a-zA-Z0-9]*$");
var emailreg=new RegExp("^[a-zA-Z][a-zA-Z0-9_.]*@[a-zA-Z][a-zA-Z0-9_.]*.[a-zA-Z][azA-Z0-
9_.]{2}.[a-zA-Z][a-zA-Z0-9_.]{2}$|^[a-zA-Z][a-zA-Z0-9_.]*@[a-zA-Z][a-zA-Z0-9_.]*.[a-zAZ][a-zA-
Z0-9_.]{3}$");
var phreg=new RegExp("^[0-9]{10}$");
var ruser = userreg.test(userv);
var remail = emailreg.test(emailv);
var rph = phreg.test(phv);
if (ruser && remail && rph && pwdv.length >= 6) {
alert("All values are valid");
return true;
} else {
if (!ruser) {
alert("Username invalid");
document.forms[0].user.focus();
}
if (!remail) {
alert("Email invalid");
document.forms[0].email.focus();
}
if (!rph) {
alert("Phone number invalid");
document.forms[0].ph.focus();
}
if (pwdv.length < 6) {
alert("Password length should be at least 6 characters");
document.forms[0].pwd.focus();
}
return false;
}
}
Timetable:
<!DOCTYPE html>
<html>
<head>
<title> Timetable </title>
</head>
<body>
<h1> Timetable</h1>
<table border="20" cellspacing="0" align="center"><tr.align ="center" height="50"
width="100" >
<td><b>Day/Period</b></td>
<td>I<br>10-11</br></td>
<td>II<br>11-12</br></td>
<td>III<br>12-1</br></td>
<td>1-2</td>
<td>IV<br>2-3</br></td>
<td>V<br>3-4</br></td>
<td>VI<br>4-5</br></td>
</tr>
<tr align="center"width="100" height="50">
<td><b> Monday</b></td>
<td>CN</td>
<td colspan='2'>DBMS</td>
<td rowspan="6"><h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan ="2">softskills</td>
<td>WAD</td>
</tr>
<tr align ="center" width="100" height="50">
<td><b>Tuesday</b> </td>
<td> WAD</td>
<td colspan="2"> AI</td>
<td>CN</td>
<td colspan="2">RDBMS</td>
</tr>
<tr align ="center" width="100" height="50">
<td><b>Wednesday</b> </td>
<td colspan="3">Study</td>
<td colspan="2">DBMS</td>
<td>CN</td>
</tr>
<tr align ="center" width="100" height="50">
<td><b>Thursday</b> </td>
<td colspan="3"> Study</td>
<td colspan="3">EVS</td>
</tr>
<tr align ="center" width="100" height="50">
<td><b>Friday</b> </td>
<td> WAD LAB</td>
<td colspan="2"> AI</td>
<td>WAD</td>
<td>CN</td>
<td>Study</td>
</tr>
</tr.align>
</table>
</body>
</html>
Calculator:
Html code:
<html>
<script type=text/javascript src=cal.js>
</script>
<body>
<table border>
<tr >
<td colspan=4><input type=text id=res size=16 onfocus="this.blur();"></td>
</tr>
<tr>
<td><input type=button id=b1 value=0 size=2 onclick=f('0')></td>
<td><input type=button id=b2 value=1 size=2 onclick=f('1')></td>
<td><input type=button id=b3 value=2 size=2 onclick=f('2')></td>
<td><input type=button id=b4 value=+ size=2 onclick=f('+')></td>
</tr>
<tr>
<td><input type=button id=b5 value=3 size=2 onclick=f('3')></td>
<td><input type=button id=b6 value=4 size=2 onclick=f('4')></td>
<td><input type=button id=b7 value=5 size=2 onclick=f('5')></td>
<td><input type=button id=b8 value=- size=2 onclick=f('-')></td>
</tr>
<tr>
<td><input type=button id=b9 value=6 size=2 onclick=f('6')></td>
<td><input type=button id=b10 value=7 size=2 onclick=f('7')></td>
<td><input type=button id=b11 value=8 size=2 onclick=f('8')></td>
<td><input type=button id=b12 value=* size=2 onclick=f('*')></td>
</tr>
<tr>
<td><input type=button id=b13 value=9 size=2 onclick=f('9')></td>
<td><input type=button id=b14 value=c size=2 onclick=f('c')></td>
<td><input type=button id=b15 value='=' size=2 onclick=f('=')></td>
<td><input type=button id=b16 value='/' size=2 onclick=f('/')></td>
</tr>
</table>
</body>
</html>
Javascript code:
function f(d)
{
if(d=='c')
{
document.getElementById('res').value="";
return;
}
res=document.getElementById('res').value;
if(res==0 && d==0)
return;
if(d=='+' || d=='-' || d=='*' || d=='/')
{
opr=d;
num=parseFloat(res);
document.getElementById('res').value=d;
return;
}
if(d=='=')
{
num1=parseFloat(res);
switch(opr)
{
case '+': ans=num+num1; break;
case '-': ans=num-num1; break;
case '*': ans=num*num1; break;
case '/': ans=parseInt(num/num1); break;
}
document.getElementById('res').value=ans;
return;
}
if(!isNaN(document.getElementById('res').value))
document.getElementById('res').value+=d;
else
document.getElementById('res').value=d;
}
Profile page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<style>
img{
width: 80px;
border-radius: 100%;
}
</style>
</head>
<body>
<header>
<h1>User Profile</h1>
</header>
<div class="profile">
<div class="profile-information">
<h3>Profile Information</h3>
<img src="images/jo.jpg" alt="profile pic" >
<p><strong>Name : </strong>John Doe</p>
<p><strong>Description : </strong>I'm a passionate software developer with a keen
interest in artificial intelligence and machine learning. Currently pursuing a degree in Computer
Science and working on exciting projects.</p>
<div>
<h3>Contact information</h3>
<ul>
<li>Email : [email protected]</li>
<li>Facebook : John Doe</li>
<li>Instagram : John_Doe_Official</li>
<li>Mobile : 9867034521</li>
</ul>
</div>
</div>
<div class="navigation">
<h3>Navigation Links</h3>
<ul>
<li><strong><a id="posts" href="#">Posts</a></strong></li>
<li><strong><a id="friends" href="#">Friends</a></strong></li>
<li><strong><a id="messages" href="#">Messages</a></strong></li>
</ul>
</div>
<div class="iframe-container" style="width: 100;">
<iframe id="iframe" src="" title="Embedded Page" style="width: 100%;"></iframe>
</div>
</div>
<script>
var postsbtn = document.getElementById("posts")
var friendsbtn = document.getElementById("friends")
var messagesbtn = document.getElementById("messages")
var iframe = document.getElementById("iframe")
postsbtn.addEventListener('click', function(){
iframe.src = "posts.html"
})
friendsbtn.addEventListener('click', function(){
iframe.src = "friends.html"
})
messagesbtn.addEventListener('click', function(){
iframe.src = "messages.html"
})
</script>
</body>
</html>
Mouse event handler:
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events with JavaScript on Image</title>
</head>
<body>
<img id="myImage" src="bravo.jpg" style="width: 400px; height: 300px; border: 1px solid
#000;"
onmouseover="onMouseOver()"
onmouseleave="onMouseLeave()"
onmousedown="onMouseDown()"
onmouseup="onMouseUp()"
ondblclick="onDoubleClick()">
<h3 id="feedback"></h3>
<script>
var fb = document.getElementById("feedback");
function onMouseOver() {
fb.innerText = "Mouse entered into Image";
}
function onMouseLeave() {
fb.innerText = "Mouse Exited the Image";
}
function onMouseDown() {
fb.innerText = "Mouse Pressed on Image";
}
function onMouseUp() {
fb.innerText = "Mouse Released on Image";
}
function onDoubleClick() {
fb.innerText = "Mouse Double Clicked on Image";
}
</script>
</body>
</html>
Quiz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application</title>
<style>
body {
font-family: Arial, sans-serif;
}
.question {
font-weight: bold;
}
.options label {
display: block;
margin-bottom: 10px;
}
.correct {
color: green;
}
.wrong {
color: red;
}
.correct-answer {
font-size: 0.8em;
color: green;
}
</style>
</head>
<body>
<div class="quiz">
<div class="question">1. What is the capital of France?</div>
<div class="options">
<label><input type="radio" name="q1" value="paris"> Paris</label>
<label><input type="radio" name="q1" value="london"> London</label>
<label><input type="radio" name="q1" value="berlin"> Berlin</label>
</div>
</div>
<div class="quiz">
<div class="question">2. What is the largest ocean on Earth?</div>
<div class="options">
<label><input type="radio" name="q2" value="pacific"> Pacific Ocean</label>
<label><input type="radio" name="q2" value="atlantic"> Atlantic Ocean</label>
<label><input type="radio" name="q2" value="indian"> Indian Ocean</label>
</div>
</div>
<div class="quiz">
<div class="question">3. Who wrote the play 'Romeo and Juliet'?</div>
<div class="options">
<label><input type="radio" name="q3" value="shakespeare"> William
Shakespeare</label>
<label><input type="radio" name="q3" value="tolstoy"> Leo Tolstoy</label>
<label><input type="radio" name="q3" value="homer"> Homer</label>
</div>
</div>
<div class="quiz">
<div class="question">4. What is the chemical symbol for water?</div>
<div class="options">
<label><input type="radio" name="q4" value="h2o"> H2O</label>
<label><input type="radio" name="q4" value="co2"> CO2</label>
<label><input type="radio" name="q4" value="n2"> N2</label>
</div>
</div>
<div class="quiz">
<div class="question">5. Which planet is known as the Red Planet?</div>
<div class="options">
<label><input type="radio" name="q5" value="mars"> Mars</label>
<label><input type="radio" name="q5" value="venus"> Venus</label>
<label><input type="radio" name="q5" value="jupiter"> Jupiter</label>
</div>
</div>
<button onclick="checkAnswers()">Submit Answers</button>
<script>
function checkAnswers() {
var correctAnswers = ["paris", "pacific", "shakespeare", "h2o", "mars"];
var questions = [
"What is the capital of France?",
"What is the largest ocean on Earth?",
"Who wrote the play 'Romeo and Juliet'?",
"What is the chemical symbol for water?",
"Which planet is known as the Red Planet?"
];
var correctCount = 0;
for (var i = 1; i <= 5; i++) {
var selectedOption = document.querySelector('input[name="q' + i + '"]:checked');
if (selectedOption) {
var answer = selectedOption.value;
if (answer === correctAnswers[i - 1]) {
selectedOption.parentElement.classList.add("correct");
correctCount++;
} else {
selectedOption.parentElement.classList.add("wrong");
var correctAnswer = correctAnswers[i - 1];
var questionIndex = i - 1;
var question = questions[questionIndex];
var parentDiv = selectedOption.parentElement.parentNode;
var correctAnswerElement = document.createElement("span");
correctAnswerElement.classList.add("correct-answer");
correctAnswerElement.textContent = "Correct answer: " + correctAnswer;
parentDiv.appendChild(correctAnswerElement);
}
}
}
alert("You got " + correctCount + " out of 5 questions correct.");
}
</script>
</body>
</html>
Hostel application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel Application Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: lightblue;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: lightpink;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center; }
label {
font-weight: bold;
}
input[type="text"], input[type="email"], select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="date"] {
width: calc(100% - 22px);
}
input[type="submit"] {
background-color: red;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>HOSTEL APPLICATION FORM</h2><hr>
<form action="#" method="post" onsubmit="printForm()">
<!-- Personal Information -->
<h3>Personal Information</h3>
<label>Name: <input type="text"></label><br> <label
for="gender">Gender:</label>
<select id="gender" name="gender">
<option>Choose</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>DOB: <input type="date"></label><br>
<label>Nationality: <input type="text"></label><br>
<label>Country: <input type="text"></label><br>
<label>Email: <input type="email"></label><br>
<hr>
<!-- Address -->
<h3>Address</h3>
<label>Permanent Address:</label><br>
<textarea name="perAddress" rows="4" required></textarea><br>
<label>City: <input type="text"></label><br>
<label>State: <input type="text"></label><br>
<label>Postal Code: <input type="text"></label><br>
<label>Country: <input type="text"></label><br>
<hr>
<!-- Education Information -->
<h3>Education Information</h3>
<label>Institution or University:</label><br>
<select>
<option>Choose</option>
<option value="Institution">INSTITUTION</option>
<option value="University">UNIVERSITY</option>
</select><br>
<label>Department:</label><br>
<select>
<option>Choose</option>
<option>COMPUTER SCIENCE</option>
<option>NANO SCIENCE</option>
</select><br>
<label>Course:</label><br>
<select>
<option>MSC CS</option>
<option>MCA</option>
</select><br>
<hr>
<h3>Year of study</h3>
<label>Student ID: <input type="text"></label><br>
<label>Enroll No: <input type="text"></label><br>
<label>Room type: <input type="text"></label><br>
<select>
<option>Choose</option>
<option>SINGLE</option>
<option>DOUBLE</option>
<option>SHARE</option>
</select><br>
<hr>
<h3>Additional Information</h3>
<label>Emergency Contact: <input type="text"></label><br>
<label>Diet Restrictions: <input type="text"></label><br>
<label>Medical Conditions: <input type="text"></label><br>
<label>Above: <input type="text"></label><br>
<label>Terms & Condition: <input type="checkbox"></label><br><br> <center>
<input type="submit" value="Submit">
</center>
</form>
</div>
<script>
function printForm() {
window.print();
return false;
}
</script>
</body>
</html>
