Scribd
Upload
5 views

csspr

The document outlines several practical exercises involving HTML and JavaScript for arithmetic operations, form creation, and event handling. Each practical includes code snippets for implementing basic functionalities such as addition, subtraction, and form elements with user interactions. The document concludes with a reflection on the successful implementation of these tasks.

Uploaded by

snehatumaskar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

csspr

The document outlines several practical exercises involving HTML and JavaScript for arithmetic operations, form creation, and event handling. Each practical includes code snippets for implementing basic functionalities such as addition, subtraction, and form elements with user interactions. The document concludes with a reflection on the successful implementation of these tasks.

Uploaded by

snehatumaskar
Copyright
© © All Rights Reserved
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>

<body>

<form action="" onsubmit="displayInfo(); return false;" onreset="alert('Form has been reset');">

Full Name:

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

onfocus="this.style.backgroundColor='lightyellow';"

onblur="this.style.backgroundColor='';"

onselect="alert('Text selected!');"><br><br>

Password:

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


required

onfocus="this.style.backgroundColor='lightyellow';"

onblur="this.style.backgroundColor='';"><br><br>

Gender:

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

onchange="alert('You selected Male');"> Male

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

onchange="alert('You selected Female');"> Female

<input type="radio" name="admission_gender" value="other"

onchange="alert('You selected Other');"> Other<br><br>

Preferred Course:<br>

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

onchange="alert('Computer Science selected');"> Computer Science<br>

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

onchange="alert('Electronics and Communication selected');"> Electronics and


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

onchange="alert('Mechanical Engineering selected');"> Mechanical Engineering<br><br>

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

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

</form>

<script>

function displayInfo() {

const fullname = document.getElementsByName("admission_fullname")[0].value;

const password = document.getElementsByName("admission_password")[0].value;

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

let courses = [];

const courseCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');

courseCheckboxes.forEach(checkbox => {

courses.push(checkbox.value);

});

alert("Student Information:\n\n" +

"Full Name: " + fullname + "\n" +

"Password: " + password + "\n" +

"Gender: " + gender + "\n" +

"Preferred Course(s): " + (courses.length > 0 ? courses.join(", ") : "None"));

</script>

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