Lesson-2 Project Activity (Advance Java Script)
<html>
<head><title>Student Form</title></head>
<body>
<h1>Student Information</h1>
<form name="forml">
Enter Name: <input type="text" name="t1">
<br><br>
Enter Address:
<textarea name="t2" placeholder="RESIDENTIAL ADDRESS">
</textarea>
<br><br>
Enter Telehpone Number:
<input type="tel" maxlength="10">
<br><br>
Enter Email Address
<input type="email" name="t3" pattern="[A-Z,a-z]{5}-[@]{1}-[.]{1}"
placeholder="[email protected]">
<br><br>
<input type="button" name="b1" value="Submit" onClick="chk()">
</form>
<script type="text/javascript">
function chk()
{
var x=form1.t3.value;
var atpos=x.indexOf("@");
var lastat=x.lastIndexOf("@");
var firstdot=x.indexOf(".");
var dotpos =x.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length || firstdot<atpos ||
atpos<lastat)
{
alert("Not a valid email address");
form1.t3.focus();
}
else
{
alert("Email address is accepted");
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
String functions
</title>
</head>
<body>
<center><br>
<h1>Counting No.of Vowels from the entered String</h1>
<form name="frm1">
Enter Your Name
<input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Count Vowels"
onClick="cnt()">
</form>
<script >
function cnt()
{
var s,i,ch,c;
c=0;
s=frm1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(i);
if(ch=="A" || ch=="a" || ch=="E" || ch=="e" || ch=="I" || ch=="i"
|| ch=="O"|| ch=="o" || ch=="U" || ch=="u")
c++;
}
alert("Number of Vowels in string are "+c);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
h1{font-size:30px;font-style: justify;text-align:center;}
</style>
<body>
<center>
<form name="f1">
<br><br><h1>Enter the string to check <p>it is palindrome or not!</h1>
<br>
<input type="text" name="t1">
<br>
<br>
<input type="button" name="check_palin" value="Check
String" onclick="chk_palindrome()">
</form>
</center>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length;
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len-1-i))
{
p=0;
break;
}
}
if(p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}
}
</script>
</body>
</html>
<html>
<body>
<center>
<h2>Celsius to Fahrenheit</h2>
<p>Insert a number:</p>
<p><input type="text" id="c" onkeyup="convert('C')">Degree Celsius</p>
<p><input type="text" id="f" onkeyup="convert('F')">Degree
Fahrenheit</p>
<p>Note<b>Math.round()</b>method is used,so that the result will be
returned an integer.</p>
<script >
function convert(degree)
{
var x;
if(degree=="C")
{
x=document.getElementById("c").value*9/5+32;
document.getElementById("f").value=Math.round(x);
}
else
{
x=(document.getElementById("f").value-32)*5/9;
document.getElementById("c").value=Math.round(x);
}
}
</script>
</center>
</body>
</html>
<html>
<body>
<h1>Student Grade Calculator</h1>
<form name="frm1">
Enter Marks of English
<input type="number"name="t1"><br><br>
Enter Marks of Maths
<input type="number"name="t2"><br><br>
Enter Marks of Physics
<input type="number"name="t3"><br><br>
Enter Marks of Chemistry
<input type="number"name="t4"><br><br>
Enter Marks of IT
<input type="number"name="t5"><br><br>
<input type="button" name="btnclick" value="Print Grade" onClick=
"grade()">
</form>
</body>
<script >
function grade()
{
var m1,m2,m3,m4,m5,a;
m1=frm1.t1.value;
m2=frm1.t2.value;
m3=frm1.t3.value;
m4=frm1.t4.value;
m5=frm1.t5.value;
a=(m1+m2+m3+m4+m5)/5;
alert("Average Marks of Student is"+a);
if(a>90)
alert("Grade A");
else if(a>80 && a<=90)
alert("Grade B");
else if(a>70 && a<=80)
alert("Grade C");
else if(a>60 && a<=70)
alert("Grade D");
else if(a>35 && a<=60)
alert("Grade F");
else
alert("Not Promoted");
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Date Difference Calculator</title>
<script>
function getDays(i_Date1, i_Date2) {
// Parse the first date
var str = i_Date1;
var day = str.slice(0, 2);
var month = str.slice(3, 5);
var year = str.slice(6, 10);
var dt1 = new Date(year, month - 1, day);
// Month is 0-indexed
// Parse the second date
var str2 = i_Date2;
var day1 = str2.slice(0, 2);
var month1 = str2.slice(3, 5);
var year1 = str2.slice(6, 10);
var dt2 = new Date(year1, month1 - 1, day1);
// Month is 0-indexed
// Calculate the difference in milliseconds
var one_day = 1000 * 60 * 60 * 24;
var date1_ms = dt1.getTime();
var date2_ms = dt2.getTime();
var difference_ms = date2_ms - date1_ms;
// Corrected subtraction
// Output the difference in days
document.write(Math.round(difference_ms / one_day));
}
</script>
</head>
<body>
<form name="form_task">
Date1: <input type="text" name="d1" placeholder="dd/mm/yyyy">
<br><br>
Date2: <input type="text" name="d2" placeholder="dd/mm/yyyy">
<br><br>
<input type="button" value="Submit"
onclick="getDays(form_task.d1.value, form_task.d2.value)">
</form>
</body>
</html>
