Scribd
Upload
9 views27 pages

Practical ANS

The document contains various HTML and JavaScript code snippets for validating numbers, strings, and user inputs, performing arithmetic operations, and checking conditions such as odd/even numbers, vowels, and gender. It also includes functionalities for date checks, form controls like radio buttons, checkboxes, and dropdowns, along with user interaction prompts. Each section demonstrates different programming concepts and user interface elements in web development.

Uploaded by

arpitchristian00
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
9 views27 pages

Practical ANS

The document contains various HTML and JavaScript code snippets for validating numbers, strings, and user inputs, performing arithmetic operations, and checking conditions such as odd/even numbers, vowels, and gender. It also includes functionalities for date checks, form controls like radio buttons, checkboxes, and dropdowns, along with user interaction prompts. Each section demonstrates different programming concepts and user interface elements in web development.

Uploaded by

arpitchristian00
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
You are on page 1/ 27

1.

Number validations:

(1) Check whether the number is Positive, Negative, Zero.

<html>
<head>
<title>Check Positive, Negative or Zero Number</title>
</head>
<body>
<script>
var no = prompt("Enter the number", "");
no = parseInt(no);

if(no < 0)
document.write("You entered Negative Number.");
else if(no > 0)
document.write("You entered Positive Number.");
else
document.write("You entered Zero.");
</script>
</body>
</html>
(2) Read 2 numbers and perform the Arithmetic operations (+, -, *, /) on them, and
show the output of the operations.

<!DOCTYPE html>
<html>
<body>
<form>
1st Number : <input type="text" id="fn" /><br>
2nd Number: <input type="text" id="sn" /><br>

<input type="button" onClick="multiplyBy()" Value="Multiply" />


<input type="button" onClick="divideBy()" Value="Divide" />
<input type="button" onClick="additionBy()" Value="Addition" />
<input type="button" onClick="divisionBy()" Value="Division" />
</form>

<p>The Result is : <br>


<span id = "result"></span>
</p>

<script type="text/javascript">

function multiplyBy()
{
num1 = document.getElementById("fn").value;
num2 = document.getElementById("sn").value;
document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy()
{
num1 = document.getElementById("fn").value;
num2 = document.getElementById("sn").value;
document.getElementById("result").innerHTML = num1 / num2;
}
function additionBy()
{
num1 = parseInt(document.getElementById("fn").value);
num2 = parseInt(document.getElementById("sn").value);
document.getElementById("result").innerHTML = num1+= num2; }
function divisionBy()
{
num1 = document.getElementById("fn").value;
num2 = document.getElementById("sn").value;
document.getElementById("result").innerHTML = num1-num2;
}
</script>
</body>
</html>

2. String validations:

(2) Read 2 string and print which string is longer.

<html>
<head>
<title>JavaScript Optimum way to compare strings</title>
</head>

<body style="text-align:center;" id="body">


<h1 style="color:green;">
H.P.A.K.S
</h1> String_1:
<input type="text" id="text1" name="tname1">
<br>
<br> String_2:
<input type="text" id="text2" name="tname2">
<br>
<br>
<button onclick="gfg_Run()"> Compare </button>
<p id="GFG_DOWN" style="color:Blue;
font-size: 20px;
font-weight: bold;"> </p>

<script>
var str1 = document.getElementById("text1");
var str2 = document.getElementById("text2");
var el_down = document.getElementById("GFG_DOWN");

function gfg_Run() {
var a = str1.value;
var b = str2.value;
var ans = a.localeCompare(b);
var res = "";
if(ans == -1) {
res = '"' + a + '" comes before "' + b + '"';
} else if(ans == 0) {
res = 'Both string are same';
} else {
res = '"' + a + '" comes after "' + b + '"';
}
el_down.innerHTML = res;
}
</script>
</body>

</html>
(3) Read a character and check whether it is a Vowel or not.

<html>
<body>
<script>
var input = prompt("Enter a character:");
if (input == 'a' || input == 'A' || input == 'e' || input == 'E' || input == 'i' || input
== 'I' || input == 'o' || input == 'O' || input == 'u' || input == 'U') {
document.write("Its a vowel");
} else if ((input >= 'a' && input <= 'z') || (input >= 'A' && input <= 'Z')) {
document.write("Its a consonant");
} else {
document.write("Invalid input please enter an alphabet");
}
</script>
</body>
</html>
(4) Read a character and print Male or Female based on M or F and otherwise
‘Invalid Character’.

<html>
<body>
Enter A String ::
<input type="text" id="n1">
<br>
<input type="button" onclick="gender()" value="check">
<script>
function gender()
{
var n1=document.getElementById('n1').value;
if(n1 == "M" ) {
alert("Male");
}
else if(n1 == "F") {
alert("Female");
}
else {
alert("Invalid Character");
}
}
</script>
</body>
</html>
(5) Write a program to check Uid and Password are X and Y (X and Y will be fixed
strings of your choice)

<html>
<body>
<table>
<form>
<tr>
<td>User Name:</td>
<td><Input Type="text" id="n1"></td>
</tr>
<tr>
<td>Password:</td>
<td><Input Type="password" id="n2">
</td>
</tr>
<tr>
<td></td>
<td><button onclick="uid();">Log in</button>
</td>
</tr>
</form>
</table>
<script>
function uid()
{
var user=document.getElementById('n1').value;
var password=document.getElementById('n2').value;
if(user=="admin" || user=="FY12")
{
alert("Logged In");
}
else
{
alert("user name invalid");
}
if(password=="admin" || password=="FY12")
{
alert("Valid");
}
else
{
alert("passwd is invalid");
}
}
</script>
</body>
</html>

* Write a program tp check The Number is Odd and Even.


<html>
<head>
<script>
var num, temp;
function fun()
{
num = parseInt(document.getElementById("num").value);
if(num)
{
temp = document.getElementById("resPara");
temp.style.display = "block";
if(num%2==0)
document.getElementById("res").innerHTML = "Even";
else
document.getElementById("res").innerHTML = "Odd";
}
}
</script>
</head>
<body>

<p>Enter the Number: <input id="num"><button


onclick="fun()">Check</button></p>
<p id="resPara" style="display:none;">It is an <span id="res"></span>
Number</p>

</body>
</html>

* check number is 10,15,20 or not


<html>
<body>
<script>
var a=parseInt(prompt('enter value:'));
if(a==10)
{
document.write("a is equal to 10");
}
else if(a==15)
{
document.write("a is equal to 15");
}
else if(a==20)
{
document.write("a is equal to 20");
}
else
{
document.write("a is not equal to 10,15 and 20");
}
</script>
</body>
</html>
3.Date/Time:
(1) Print the day of the month from the system and user entered dates

<!DOCTYPE html>
<html>

<head>
<title>
print current day and time
</title>
</head>

<body>
<script type="text/javascript">
var myDate = new Date();
var myDay = myDate.getDay();

// Array of days.
var weekday = ['Sunday', 'Monday', 'Tuesday',
'Wednesday', 'Thursday', 'Friday', 'Saturday'
];
document.write("Today is : " + weekday[myDay]);
document.write("<br/>");

// get hour value.


var hours = myDate.getHours();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
var minutes = myDate.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var myTime = hours + " " + ampm + " : " + minutes +
" : " + myDate.getMilliseconds();
document.write("\tCurrent time is : " + myTime);
</script>
</body>
</html>

(2) Read user date and print whether it is past date or future date.

<!DOCTYPE HTML>
<html>

<head>
<title>
How to Check Input Date is Equal
to Today’s Date or not using
JavaScript?
</title>

<style>
body {
text-align: center;
}
h1{
color: green;
}
#geeks {
color: green;
font-size: 29px;
font-weight: bold;
}
</style>
</head>
<body >
<h1>H.P.A.K.S</h1>

<b>
Type the date in given format
and <br>check if it is same as
today's date or not.
</b>

<br><br>

Type date: <input id = "date"


placeholder= "dd/mm/yyyy"/>
<br><br>

<button onclick = "gfg();">


click here
</button>

<p id = "geeks" ></p>

<script>
var down = document.getElementById('geeks');

function gfg() {
var date =
document.getElementById('date').value;

var inpDate = new Date(date);


var currDate = new Date();

if(inpDate.setHours(0, 0, 0, 0) ==
currDate.setHours(0, 0, 0, 0))
{
down.innerHTML =
"The input date is today's date";
}
else {
down.innerHTML = "The input date is Past"

}
}
</script>
</body>
</html>
4.Forms:

(1) Create a radio control group, read user selection and display appropriate
message.

<html>
<body>
<script type="text/javascript">
function radio()
{
var n1=document.getElementById("n1");
var n2=document.getElementById("n2");
if(n1.checked)
{
alert("Male Button Is Clicked");
}
if(n2.checked)
{
alert("Female Button Is Clicked");
}
}
</script>
Gender
<input type="radio" id="n1" name="radio" onclick="radio()">
<b>Male</b>
<input type="radio" id="n2" name="radio" onclick="radio()">
<b>Female</b>
</body>
</html>
2. Create a checkbox control, read user selection and display appropriate
message.

<!DOCTYPE html>
<html>
<body>
<label>Check Which you have</label><br/>
<input type="checkbox" id="checkbox1" name="bike" value="Bike">
Bike <br/>
<input type="checkbox" id="checkbox2" name="car" value="Car"> Car
<br/>

<input type="checkbox" id="checkbox3" name="home" value="Home">


Home <br/>
<button onclick="getValue()">Get Value</button>
<p id="p1"></p>
<script>
function getValue() {
var ele=[]
var bike = document.getElementById("checkbox1")
if(bike.checked){
ele.push(bike.value);
}
var car = document.getElementById("checkbox2")
if(car.checked){
ele.push(car.value);
}
var home = document.getElementById("checkbox3")
if(home.checked){
ele.push(home.value);
}
if(ele.length>0){
document.getElementById("p1").innerHTML = ele;
}
else{
document.getElementById("p1").innerHTML = "You Dont have any
thing";
}
}
</script>
</body>
</html>

3. Create a button control, when user clicks it, display/change its label.

<html>
<head>
<script language="javascript">
function abc()
{
document.getElementById("d").innerHTML="You Click a Button";
}
</script>
<body>
<form>
<button type=button id="d" onclick="abc()">Click me??</button>
</form>

</body>
</html>
4. Create a dropdown control, read user selection and display appropriate
message.

<html>
<head>
<title>dropdown menu using select tab</title>
</head>
<script>
function favLanguage() {
var mylist = document.getElementById("myList");
document.getElementById("favourite").value =
mylist.options[mylist.selectedIndex].text;
}
</script>

<body>
<form>
<b> Select you favourite tutorial site using dropdown list </b>
<select id = "myList" onchange = " favLanguage ()" >
<option> ---Choose tutorial--- </option>
<option> JavaScript</option>
<option> Java </option>
<option> Angular </option>
<option> HTML </option>
</select>
<p> Your selected tutorial site is:
<input type = "text" id = "favourite" size = "20" </p>
</form>
</body>
</html>
5. Display an alert box giving message “Button was pressed” using ONCLICK
button event.

<html>
<head>
<title>Forms collection</title>
<script>
function clickEvent()
{

alert("Hello! How are you");


}
</script>
</head>
<body>
<input type="Submit" value="SUBMIT" onclick="clickEvent()">
</body>
</html>

6. Create “CLICK HERE TO ENTER NAME” button using on click event to accept
user name and print it with “Hello! How are you nnnn”. Where nnnn is user
entered name.
<html>
<head>
<title>Forms collection</title>
<script>
function clickEvent()
{
var a=prompt("enter your name here");
document.write("Hello! How are you,"+a);
}
</script>
</head>
<body>
<input type="Submit" value="CLICK HERE TO ENTER NAME"
onclick="clickEvent()">
<h1>hello</h1>
</body>
</html>
7. Display a prompt box giving message “Enter your name” using on load event.
Find the length of the inputted string and display the message “Length of
your name is nn” where nn is the length of the string.

<html>
<head>
<title>Forms collection</title>
<script>
function clickEvent()
{
var a=prompt("enter your name here");
document.write("Hello! How are you,"+a.length);

}
</script>
</head>
<body>
<input type="Submit" value="CLICK HERE TO ENTER NAME"
onclick="clickEvent()">
<h1>hello</h1>
</body>
</html>
8. Write an html page to find the month name from the inputted month number.
Generate an error message if the input is not an integer number.

<html>
<head>
<title>find the month</title>
<script language="Javascript">

function month()
{
var a;
a=(d.t1.value);

if(a==1)
{
d.t2.value="January";
}

else if(a==2)
{
d.t2.value="February";
}
else if(a==3)
{
d.t2.value="March";
}
else if(a==4)
{
d.t2.value="april";
}
else if(a==5)
{
d.t2.value="May";
}
else if(a==6)
{
d.t2.value="June";
}
else if(a==7)
{
d.t2.value="July";
}
else if(a==8)
{
d.t2.value="August";
}
else if(a==9)
{
d.t2.value="september";
}
else if(a==10)
{
d.t2.value="october";
}
else if(a==11)
{
d.t2.value="november";
}
else if(a==12)
{
d.t2.value="December";
}
else
{
alert=("you enter wrong");
}
}
</script>
</head>
<body>
<form name="d">
<table border="2">

<tr>
<td>Month no</td>
<td><input type="text"name="t1"></td>
</tr>

<tr>
<td>Month name</td>
<td><input type="text"name="t2"></td>
</tr>

<tr>
<td colspan="2"align="center">
<input type="button"name="btn"value="show month
name"onclick="month()">
<input type="reset"name="btn2"value="reset">
</td>
</tr>
</table>
</form>
</body>
</html>

9. Write an html page to print result according to selected choice (ADD, SUB,
MUL,DIV). Generate an error message if the inputs are not numbers.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function multiply(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=c;
}

function addition(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a+b;
document.my_cal.total.value=c;
}

function subtraction(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a-b;
document.my_cal.total.value=c;
}

function division(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a/b;
document.my_cal.total.value=c;
}

function modulus(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a%b;
document.my_cal.total.value=c;
}
</script>

<!-- Opening a HTML Form. -->


<table border=1 align="center">
<form name="my_cal">
<tr>

<!-- Here user will enter 1st number. -->


<td> Number 1: <input type="text" name="first"></td>

<br>
</tr>
<tr><td>
<!-- Here user will enter 2nd number. -->
Number 2: <input type="text" name="second">
<br>
</td></tr>
<tr>
<td align="center">
<input type="button" value="ADD" onclick="javascript:addition();">
<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD"
onclick="javascript:modulus();"></td></tr>

<br><br>
<tr><td>
<!-- Here result will be displayed. -->
Get Result: <input type="text" name="total">
</td></tr>
</table>
</form>
</body>
</html>
10. Create the following Form and perform the following validations. If there is
anything wrong with either of the inputs then generate an error message:

Validations:
a. Both fields are compulsory & it should not contain blank space.
b. User name must contain only characters.
c. Password begins with an alphabet only.
d. Length of password is minimum 8 characters and maximum 16
characters.

11. Calculate Total marks, percentage and class of the student. Directly enter
your name in the textbox. The marks must be in the range of 0-100 only.
Generate an error message if the marks entered are incorrect. (Total,
Percentage, Class are readonly text controls)
Note:
35 – 50% Pass Class, 51 – 75% Second Class, >75% First Class

<html>
<head>

<title>Student Results</title>
<script>
function getReport(){

var grade = ""; //declare a variable for grade


var result=""; //declare a variable for result

//read the marks


var m1 = document.getElementById('txt1').value;
var m2 = document.getElementById('txt2').value;
var m3 = document.getElementById('txt3').value;
var m4 = document.getElementById('txt4').value;
var m5 = document.getElementById('txt5').value;
var m6 = document.getElementById('txt6').value;

//calculate the total marks (using double notation technique)


var totalMarks = m1 - (- m2) - (- m3) - (- m4) - (- m5) - (- m6);

//get the average marks


var averageMarks = totalMarks / 6;

//find the grade and result using the ternary operator inside the switch
statement
switch(

//usage of ternary operator inside switch

(averageMarks > 60 && averageMarks <= 100) ? 1 :


(averageMarks > 50 && averageMarks < 60) ? 2 :
(averageMarks > 40 && averageMarks < 50) ? 3 : 0
)

{
case 1 :grade = "A";result="First Class";break;
case 2 :grade = "B"; result="Second Class";break;
case 3 :grade = "C"; result="Third Class";break;
case 0 :grade = "D"; result="Fail";break;
}

//display the results


document.getElementById('txtStudentName').value =
document.getElementById('txtName').value;
document.getElementById('txtStudentClass').value =
document.getElementById('txtClass').value;
document.getElementById('txtTotalMarks').value = totalMarks;
document.getElementById('txtAvgMarks').value = averageMarks;
document.getElementById('txtGrade').value = grade;
document.getElementById('txtResult').value = result;

} //end of function getReport


</script>

</head>
<body>

Name:<input type="text" id="txtName"> <br><br>


Class:<input type="text" id="txtClass"> <br/><br/>
<table border="1">
<tr><td>ORACLE</td><td><input type="text"
id="txt1"></td></tr>
<tr><td>C++</td><td><input type="text" id="txt2"></td></tr>
<tr><td>E-COMMERCE</td><td><input type="text"
id="txt3"></td></tr>
<tr><td>SAD</td><td><input type="text" id="txt4"></td></tr>
<tr><td>STATISTIC</td><td><input type="text"
id="txt5"></td></tr>
<tr><td>SE</td><td><input type="text"
id="txt6"></td></tr>
</table><br/><br/>
<input type="button" value="Get Result" onclick="getReport()">
<input type="reset" value="Reset" onclick="getReport()">
<h2>Report Card</h2>
<table border="1">
<tr><td>Name</td><td><input type="text" id="txtStudentName"
readonly></td></tr>
<tr><td>Class</td><td><input type="text" id="txtStudentClass"
readonly></td></tr>
<tr><td>Total Marks</td><td><input type="text"
id="txtTotalMarks" readonly></td></tr>
<tr><td>Average Marks</td><td><input type="text"
id="txtAvgMarks" readonly></td></tr>
<tr><td>Grade</td><td><input type="text" id="txtGrade"
readonly></td></tr>
<tr><td>Remarks</td><td><input type="text" id="txtResult"
readonly></td></tr>
</table>
</body>
</html>

You might also like