Scribd
Upload
6 views

CSS

The document outlines several practical exercises involving HTML and JavaScript for arithmetic operations, form creation, and event handling. Each section includes an aim, program code, output, and conclusion regarding the successful implementation of the tasks. The exercises cover basic arithmetic, form elements, and form events, demonstrating fundamental web development skills.

Uploaded by

snehatumaskar
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
6 views

CSS

The document outlines several practical exercises involving HTML and JavaScript for arithmetic operations, form creation, and event handling. Each section includes an aim, program code, output, and conclusion regarding the successful implementation of the tasks. The exercises cover basic arithmetic, form elements, and form events, demonstrating fundamental web development skills.

Uploaded by

snehatumaskar
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/ 9

Practical

Aim :- Write Simple javascript with HTML for arithmetic expression evaluation and
message printing.

Program :-

Arithmetic Operations:

<html>
<head>
<title> Arithmatic Operation </title>
<script>
var ch = parseInt(prompt("Hello!! Please Select One Of The Operation You Want To
Choose 1.Addition 2.Subtraction 3.multiplication 4.Division" ));
var a = parseInt(prompt("Enter First number"));
var b = parseInt(prompt("Enter Second number"));
switch(ch)
{
case 1:
document.write("Addition of " +a+ " and " +b+ " is " +(a+b));
break;

case 2:
document.write("Subtraction of " +a+ " and " +b+ " is " +(a-b));
break;

case 3:
document.write("Multiplication of " +a+ " and " +b+ " is " +(a*b));
break;

case 4:
document.write("Division of " +a+ " and " +b+ " is " +(a/b));
break;

default:
document.write("Invalid Number");

}
</script>
</head>
</html>
Output :-

Conclusion :-

In this practical I successfully implements the Arithmatic operation in code .

Marks Obtained Dated signature


of Teacher

Process Product Total (25)


Related (15) Related (10)
Practical No.4

Aim :- Create a webpage using Form Elements.

Program :−
<html >
<head>
<title>Sports Information Form</title>
</head>
<body>
<h1>Sports Information Form</h1>
<form name = Sports>
Player Name:
<input type="text" id="player-name" name="player-name"><br><br>

Select Sport:
<select id="sport" name="sport">
<option value="soccer">Soccer</option>
<option value="basketball">Basketball</option>
<option value="tennis">Tennis</option>
<option value="cricket">Cricket</option>
<option value="baseball">Baseball</option>
</select><br><br>

Skill Level:<br>
<input type="radio" id="beginner" name="skill-level" value="beginner">beginner
<br>
<input type="radio" id="intermediate" name="skill-level"
value="intermediate">intermediate<br>
<input type="radio" id="advanced" name="skill-level"
value="advanced">advanced<br><br>

Interested in Coaching? <br>


<input type="checkbox" id="coaching" name="coaching"
value="yes">Yes<br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>
Output :-

Conclusion :-

In this practical I successfully implements basic form elements .

Marks Obtained Dated signature


of Teacher

Process Product Total (25)


Related (15) Related (10)
Practical No. 5

Aim :- Create a webpage to implement the Form Events Part I.

Program :−

<html>

<body>

<form action="">

Full Name:

<input type="text" name="admission_fullname" placeholder="Enter your full name"


required><br><br>

Password:

<input type="password" name="admission_password" placeholder="Create a password"


required><br><br>

<input type="submit" value="Submit">

<input type="reset"><br><br>

Gender:

<input type="radio" name="admission_gender" value="male" checked> Male

<input type="radio" name="admission_gender" value="female"> Female

<input type="radio" name="admission_gender" value="other"> Other<br><br>

Preferred Course:<br>

<input type="checkbox" name="admission_course_cs" value="Computer Science">


Computer Science<br>

<input type="checkbox" name="admission_course_ece" value="Electronics and


Communication"> Electronics and Communication<br>

<input type="checkbox" name="admission_course_me" value="Mechanical Engineering">


Mechanical Engineering<br><br>

</form>

</body>

</html>
Output :-

Conclusion :-
In this practical I have successfully implement the Form elements .

Marks Obtained Dated signature


of Teacher

Process Product Total (25)


Related (15) Related (10)
Practical No. 6

Aim :- Create a webpage to implement the Form Events Part II.

Program :−
<html >

<head>

<title>Admission Form</title>

<script>

function handleSubmit(event) {

event.preventDefault(); // Prevent the default form submission

const fullname = document.querySelector('input[name="admission_fullname"]').value;

const dob = document.querySelector('input[name="admission_dob"]').value;

const password = document.querySelector('input[name="admission_password"]').value;

const gender = document.querySelector('input[name="admission_gender"]:checked').value;

const courses =
Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(el =>
el.value).join(', ');

alert(`Full Name: ${fullname}\nDate of Birth: ${dob}\nPassword: ${password}\nGender:


${gender}\nPreferred Courses: ${courses}`);

</script>

</head>

<body>

<form action="" onsubmit="handleSubmit(event)">

<label for="fullname">Full Name:</label>

<input type="text" name="admission_fullname" placeholder="Enter your full name"


required><br><br>

<label for="dob">Date of Birth:</label>

<input type="date" name="admission_dob" required><br><br>


<label for="password">Password:</label>

<input type="password" name="admission_password" placeholder="Create a password"


required><br><br>

<label>Gender:</label>

<input type="radio" name="admission_gender" value="male" checked> Male

<input type="radio" name="admission_gender" value="female"> Female

<input type="radio" name="admission_gender" value="other"> Other<br><br>

<label>Preferred Course:</label>

<input type="checkbox" name="admission_course_cs" value="Computer Science"> Computer


Science<br>

<input type="checkbox" name="admission_course_ece" value="Electronics and


Communication"> Electronics and Communication<br>

<input type="checkbox" name="admission_course_me" value="Mechanical Engineering">


Mechanical Engineering<br><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

</body>

</html>
Output :-

Conclusion :-

In this practical I successfully implements the Events on form elements .

Marks Obtained Dated signature


of Teacher

Process Product Total (25)


Related (15) Related (10)

You might also like