0% found this document useful (0 votes)
11 views8 pages

Advanced JavaScript Form Functions

IT class 12th Practicals

Uploaded by

p4rthbhilore1827
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views8 pages

Advanced JavaScript Form Functions

IT class 12th Practicals

Uploaded by

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

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="aus123@[Link]">
<br><br>
<input type="button" name="b1" value="Submit" onClick="chk()">
</form>

<script type="text/javascript">
function chk()
{
var x=[Link];
var atpos=[Link]("@");
var lastat=[Link]("@");
var firstdot=[Link](".");
var dotpos =[Link](".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=[Link] || firstdot<atpos ||
atpos<lastat)
{
alert("Not a valid email address");
[Link]();
}
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 [Link] 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=[Link];
for(i=0;i<=[Link];i++)
{
ch=[Link](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=[Link];
str_case=[Link]();
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>[Link]()</b>method is used,so that the result will be
returned an integer.</p>
<script >
function convert(degree)
{
var x;
if(degree=="C")
{
x=[Link]("c").value*9/5+32;
[Link]("f").value=[Link](x);
}
else
{
x=([Link]("f").value-32)*5/9;
[Link]("c").value=[Link](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=[Link];
m2=[Link];
m3=[Link];
m4=[Link];
m5=[Link];
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 = [Link](0, 2);
var month = [Link](3, 5);
var year = [Link](6, 10);
var dt1 = new Date(year, month - 1, day);
// Month is 0-indexed

// Parse the second date


var str2 = i_Date2;
var day1 = [Link](0, 2);
var month1 = [Link](3, 5);
var year1 = [Link](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 = [Link]();
var date2_ms = [Link]();
var difference_ms = date2_ms - date1_ms;
// Corrected subtraction

// Output the difference in days


[Link]([Link](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.[Link], form_task.[Link])">
</form>
</body>
</html>

Common questions

Powered by AI

Styling can significantly enhance or hinder user experience. For instance, using fonts and justified text alignment makes content readable and aesthetically pleasing, as seen in the styled 'Enter the string to check if it is palindrome or not!' header. However, lack of consistent styling across forms could lead to confusion or a negative user perception of the interface's coherence .

The 'grade()' function calculates the average of five subject marks. It uses a series of conditional statements to determine the grade: 'A' for averages above 90, 'B' for 80-90, 'C' for 70-80, 'D' for 60-70, 'F' for 35-60, and 'Not Promoted' for averages below 35. It alerts the average and corresponding grade .

The 'cnt()' function initializes a counter variable and iterates through each character of the string. It applies a condition to check if the character is a vowel ('A', 'E', 'I', 'O', 'U' and their lowercase counterparts). If true, it increments the counter. Finally, it alerts the total count of vowels found in the string .

The function 'chk()' performs several checks to validate the email format. It first retrieves the email string 'x' and identifies positions of '@' and '.' using index functions. It ensures there is one '@', the '.' appears after '@', and there are characters both before '@' and after the last '.'. If any condition is not met, it shows an alert for invalid email and focuses back on the email input .

The 'chk_palindrome()' function converts the input string to lowercase and iterates up to half its length, comparing each character with its counterpart from the end. If any pair does not match, it sets a flag indicating the string is not a palindrome, displaying an alert accordingly .

The 'convert' function handles conversions between Celsius and Fahrenheit based on user input fields 'c' and 'f'. It uses conditionals to check the input field receiving the change ('C' or 'F') and applies appropriate conversion formulas: Celsius to Fahrenheit as C*9/5+32, and Fahrenheit to Celsius as (F-32)*5/9. The result is then rounded with Math.round() and displayed in the opposite input field .

The email validation can be improved by using a more comprehensive regex pattern to cover various valid email formats rather than expecting a specific one using index checks. Integrating a regex like /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ can make validation more robust and accurate. Additionally, feedback beyond alerts, like inline validation messages, could enhance usability .

The form uses an input of type 'tel' with 'maxlength' set to 10, ensuring only up to 10 characters can be entered, likely designed for standard phone numbers. However, the lack of pattern validation may allow non-numeric characters or inappropriate formatting. Robust validation should include a numeric pattern to ensure actual phone numbers .

The 'getDays()' function parses the two date inputs into day, month, and year components, and creates date objects. It calculates the time in milliseconds for each date and finds their difference. Dividing the difference by the number of milliseconds in a day (1000*60*60*24) gives the day difference, which is then rounded and displayed .

Incorrect substring indices would result in wrong parsing of date components, leading to inaccurate date objects. Consequently, this would produce erroneous day differences due to incorrect calculations of date milliseconds, which could mislead users and affect any dependent processes .

You might also like