Raunak PracF Final2

48
Operators
Logical
Take two variables and store values in them
check all the logical operators and display proper
outputs.
ANS-
<html>
<body>
<script type="text/javascript">
//Take two variables and store values in them
//check all the logical operators and display proper outputs
var x=10 ;
var y=20;
var z=30;
var res1= x<y && x>z;
var res2= x<y || x>z;
var res3= !(x == y)&& !(x == z)&& !(y == z)
document.write("<h1>"+ "Logical Operators"+"</h1>");

document.write("For the number "+x+ ", " +y+" and "+z+" the value of && is
"+res1+"<br>");
document.write("For the number "+x+", " +y+"and"+z+" the value of || is
"+res2+"<br>");
document.write("For the number "+x+ ", " +y+"and"+z+" the value of !! is
"+res3+"<br>");
</script>
</body>
49
</html>
Comparison Operators
Take two variables and store values in them
check all the comparison operators and display
proper outputs
ANS-
<html>
<body>
//Take two variables and store values in them
//check all the comparison operators and display proper outputs
x=10,y=20;
document.write("<h1>Comparison Operators</h1>");
document.write("For the number " + x +" and " + y +" the value of > is " + (x
> y) + "<br>");
document.write("For the number " + x +" and " + y +" the value of < is " + (x
< y) + "<br>");
document.write("For the number " + x +" and " + y +" the value of <= is " +
(x <= y) + "<br>");
50
</script>
</body>
</html>
Arithmetic Operators
Accept two numbers in two variables and display all
mathematical operations
<html>
<body>
//Accept two numbers in two variables and display all mathematical
operations
x=10,y=20;
sum= x + y;
sub=x - y;
div=x/y;
mult=x*y;
mod=x%y;
51
document.write("The sum is "+ sum);

document.write("<BR>The sub is "+ sub);
document.write("<BR>The division is "+ div);
document.write("<BR>The multiply is "+ mult);
document.write("<BR>The modulus is "+ mod);
</script>
</body>
</html>
52
Object
<html>
<script>
car = { type: "porsche" , color:"grey" , model :"911"}
car.type= "ferrari".
document.write (car.type)
</script>
</html>
House Image
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<h1>HOUSES</h1>
<div class="cube-container">
<div class="cube initial-position">
<img class="cube-face-image image-1" src="agni.jpeg" width="300px"
height="300px">
<img class="cube-face-image image-2" src="jal.png" width="300px"
height="300px">
<img class="cube-face-image image-3" src="prithvi.jpg" width="300px"
height="300px">
<img class="cube-face-image image-4" src="vayu.jpeg" width="300px"
height="300px">
<img class="cube-face-image image-5" src="house.jpeg" width="300px"
height="300px">
<img class="cube-face-image image-6" src="lsa.tiff" width="300px"
height="300px">
</div>
</div>
<h2>Click the images below to rotate the cube</h2>
<div class="image-buttons">
53
<input type="image" style="object-fit: cover;" class="show-image-6"

src="lsa.tiff" width="113px" height="113px"></input>
<input type="image" class="show-image-1" src="agnib.jpeg" width="113px"
height="113px"></input>
<input type="image" class="show-image-2" src="jalb.png" width="113px"
<input type="image" class="show-image-3" src="prithvib.jpg" width="113px"
<input type="image" class="show-image-4" src="vayub.jpeg" width="113px"
<input type="image" class="show-image-5" src="houseb.jpeg"
width="113px" height="113px"></input>
</div>
Note: Event Variable and Advanced CSS used.
Source: https://codepen.io/GeorgePark
54
55
SMART PACKAGE FEES

<HTML>
<HEAD><TITLE>Smart Package Fee</title></head>
<body><h1><center>Smart Package Fee</center></h1>
<form name="f1" method="post"><br>
Enter Child's
Program     <input type="text" name="t1"
id="text1"><BR>
TotalFeel      &bsp;
& nbsp; & nbsp;
      <input
tvpe="text" name="+2" id="text2" disabled><BR>
<CENTER><INPUT
TYPE-"BUTTON"
NAME="B1"
ID="B"
56
VALUE="CALCULATE" onClick="displayfee()"›</CENTER> < form> «script

language="javascript" type="text/javascript">
function displayfee()
var k=document.getElementByld("text1") value;
let v= k.toUpperCase();
if (v="IIT")
{document. getElementByld("text2").value=12000
else if (v=="MEDICAL")
{document.getElementByld("text2").value=10000}
else
{document.getElementByld("text2").value=0}
<SCRIPT>
57
Playing With Datatypes
<HTML>
<TITLE>Playing with Data Types</TITLE> <BODY>
var num1=parselnt(prompt("Enter the first number")); var
num2=parseFloat(prompt("Enter the second number")
document.write("<BR>The first number is: " + num1);
document.write("<BR>The second number is: " + num21
document.write("<BR>The sum is: " + eval("num1+num2"))
document.write("<BR>The statement result is not a number is:
"+isNaN(eval("num1-num2")
// (i) What type of value will be stored in numl and num2 ?
/(ii) Give the output of the above code if the values input by the user are
20.5 and 23.5 K/SCRIPT>
</BODY>
</HTML>
Radio Checked
<HTML><head><TITLE>Stream</TITLE></head> <BODY>
58
<form name="f1" method="post"›

Click on your stream<br>
<input type="radio" id="r1" name="stream" value="science"›Science<br>
<input type="radio" id="r2" name="stream"
value="commerce">Commerce<br>
<input type="radio" id="r3" name="stream" value=
"humanities">Humanities<br>
<input type= "button" onclick="hi()" value="click"> <input type="text"
name="+1" SIZE-"30PX">
</form> <script type="text/javascript">
function hi)
if(document.f1.r1.checked==true)
f1.t1.value= "You have selected Science";
else if(document.f1.r2.checked==true)
f1.t1.value="You have selected Commerce".
else if(document. f1.r3.checked==true)
f1.t1.value="You have selected Humanities"
</SCRIPT>
</BODY>
</HTML>
Book read (JS-Events)

Lakshmipat Singhania Academy
Session 2023-24
Class:XII Subject: Web Application Week#7
Chapter 3- Web Scripting - Java Script Topic: Events
Promoting Book Reading
59
Honouring the father of the Library Movement, the late P.N. Panicker, 19th
June is being celebrated as Reading Day. The 28th National Reading Day
will be celebrated on 19th June 2023, and Reading Month will be celebrated
from 19th June to 18th July 2023.
https://cbseacademic.nic.in/web_material/Circulars/2023/68_Circular_2023.
pdf
To Do:-
Imagine, your academy is organizing loads of activities during for the above
mentioned cause.
i. Using HTML and JavaScript, create a webpage for the same with brief
introduction stating importance of book reading along with a participation
form.
ii. Apply JS/HTML events. Minimum required event numbers are mentioned.
(Mouse Event 2, KeyBoard event 1,Form Event 2, Window/ Document
Event 1). You can explore beyond it too.
iii. Proper display messages/ guided messages must be there for
showcasing the event handlings.
iv. Save your file with proper naming format.
v. Upload within given date.
<!DOCTYPE html>
<html>
<head>
<title>Book Reading Importance</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
60
h1 {
color: #333;
font-size: 24px;
}
p{
color: #666;
font-size: 16px;
line-height: 1.5;
}
form {
margin-top: 20px;
}
input[type="text"], textarea {
width: 300px;
padding: 5px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#output {
margin-top: 20px;
color: #333;
font-size: 16px;
}
</style>
61
</head>
<body>
<h1>Importance of Book Reading</h1>
<p id="introParagraph">Reading books is a great way to expand
knowledge, improve vocabulary, and stimulate the mind. It enhances
creativity and imagination, helps in personal growth, and provides a means
of relaxation and escape from daily stresses.</p>
<form id="participationForm">
<h2>Participation Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" required><br>
<label for="email">Email:</label>
<input type="text" id="email" required><br>
<label for="message">Message:</label>
<textarea id="message" required></textarea><br>
<input type="submit" id="submitButton" value="Submit">
</form>
<div id="output"></div>
<script>
// Mouse Event 1: Click event on the Submit button
var submitBtn = document.getElementById('submitButton');
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
displayMessage('Form submitted!');
});
// Mouse Event 2: Mouseover event on the introduction paragraph

62
var introParagraph = document.getElementById('introParagraph');

introParagraph.addEventListener('mouseover', function() {
displayMessage('Hovering over the importance paragraph!');
});
// Keyboard Event 1: Keypress event on the name input field

var nameInput = document.getElementById('name');
nameInput.addEventListener('keypress', function() {
displayMessage('Typing in the name field!');
});
// Form Event 1: Focus event on the email input field

var emailInput = document.getElementById('email');
emailInput.addEventListener('focus', function() {
displayMessage('Focused on the email field!');
});
// Form Event 2: Submit event on the participation form

var participationForm = document.getElementById('participationForm');
participationForm.addEventListener('submit', function(event) {
event.preventDefault();
displayMessage('Form submitted!');
});
// Window/Document Event 1: DOMContentLoaded event

window.addEventListener('DOMContentLoaded', function() {
displayMessage('Page loaded!');
});
63
function displayMessage(message) {
var output = document.getElementById('output');
output.innerHTML = message;
}
</script>
</body>
</html>
64
JS -MCQs
65
66
67
Array Object
Displaying Array
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="frt"></p>
<p id="p1"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
//To a Method
const cars = ["Toyota", "Tata", "Maruti Suzuki", "BMW"];
document.getElementById("demo").innerHTML = cars.toString();
//join
const fruit = ["Apple", "Mango", "Orange", "Banana"];
document.getElementById("frt").innerHTML = fruit.join(" * ");
//pop
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p1").innerHTML = fruits;
fruits.pop();
document.getElementById("p3").innerHTML = fruits;
//push
const frui = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p4").innerHTML = frui;
68
frui.push("Kiwi");
document.getElementById("p5").innerHTML = frui;
</script>
</body>
</html>
Array Rotation with N elements
<html>
<script>
//create an array of n elements and rotate clockwise and anticlockwise
const a=[]
var n=parseInt(prompt("enter a limit"));
var m=parseInt(prompt("Enter rotation"));
for (i=0;i<n;i++)
{
69
ete=parseInt(prompt("Enter any number"));

a.push(ete)
}
if (m>0)
{
for (i=1; i<=m; i++)
{
v=a.pop()
a.unshift(v)
}
}
else
{
for(i=1; i<=m*-1; i++)
{
v=a.shift()
a.push(v)
}
}
document.write(a)
</script> </html>
70
Array Sorting Word
<!DOCTYPE html>
<html>
<body>
<script>
// SORTING ARRAYS in words
const a = [];
var n = parseInt(prompt("Enter a limit"));
for (let i = 0; i < n; i++) {
ele = prompt("Enter any word");
a.push(ele);
}
a.sort();
document.write(a.join(", "));
</script>
</body>
</html>
71
72
Array Sorting Numbers

<html>
<script>
//Sorting numbers in an array
const a=[]
for (i=0;i<n;i++)
{
a.push(ete)
}
document.write(a.sort(function (a,b){return (a-b)}));
</script>
</html>
73
Array sum and average

<html>
<script>
//create an array of n elements calculate
sum and average and display them
const a=[]
var x=0;
for (i=0;i<n;i++)
{
a.push(ete)
x+=ete
}
avg=x/n
74
document.write("The sum is " + x + "<BR>");

document.write("The Average is"+ avg)
</script>
</html>
75
Displaying N Elements-Array
<html>
<script>
// taking limit of array and displaying elements taking from user
const a=[]
for (i=0;i<n;i++)
{
a.push(ete)
document.write("<BR>" + a[i])
}
</script>
</html>
76
77
Math Object
Q) Take a decimal number from user and display the following-
A-It's nearest integer value
B-It's greatest or equal integer value
C-It's less or equal integer value
<html>
<body>
//Take a decimal number from user and display the following-
//A-It's nearest integer value
//B-It's greatest or equal integer value
//C-It's less or equal integer value
var n1=parseFloat(prompt("Enter any number"));
rd=Math.round(n1);
ce=Math.ceil(n1);
fl=Math.floor(n1);
document.write("The nearest integer value is"+ rd);
document.write("<br>The greater or equal integer is"+ ce);
document.write("<br>The lesser or equal integer value is"+ fl);
</script>
</body>
</html>
78
Loops
For loop
<!DOCTYPE html>
<html>
<body>
<h1>list of odd numbers fromm 11 to 50</h1>
<p> For loop</p>
<script>
//WAP to get a list of odd numbers fromm 11 to 50
var i=11;
for (; i < 50; i+=2) {
document.write(i+"<BR>"); }
</script>
</body>
</html>
79
While loop
<html>
<body>
<h1>square using while loop</h1>
<script>
//WAP TO ACCEPT A NUMBER FROM THE USER AND DISPLAY THE
SQUARES OF THE NUMBERS REPETITIVELY TILL 8 ENTRIES
var k=1;
80
var i = parseInt(prompt("Enter a Num"));

while (k <= 8) {
document.write(i+"<br>");
k = k+1;
i*=i;
}
</script>
</body>
</html>
81
Do While loop
<html>
<script>
//WAP to accept age from user and display the age . and wait another year
until age=18
var age=parseInt(prompt("Enter Age"));
do
{
document.write("Your Age is " + age + "<br>")
age++;
if(age<18)
{
document.write("Wait Another Year")
}
}
while(age<18)
</script>
</html>
82
Advanced Features Of Web Design

Add Ins
CSS
CODE:
<!DOCTYPE html
PUBLIC
"-//W3C//DTD
XHTML
1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmIns="http://www.w3.org/1999/xhtm|">
 <head>
<meta content="en-in" http-equiv="Content Language" /> <meta
content="text/html; charset=utf-8" http-equiv="Content-Type" />
 < head> <body> <center>
<img alt="not supported" height="816"
src="google-logo-png-google-sva-scholarship-20.png" width="508" /><br />
WELCOME TO GOOGLE</center>

<p>Made By Raunak Nath, 12A</p> < body>
 </html>
83
DWT
CODE:-
<!DOCTYPE html PUBLIC
"_//W3C//DTD XHTML 1.0 Transitional//EN'
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmIns="http://www.w3.org/1999/xhtml"> <head>
<meta content="en-in" http-equiv="Content-Language" /> <meta
content="text/html; charset=utf-8" http-equiv="Content-Type" />
<! - #BeginEditable "doctitle" _-> <title>WELCOME TO GOOGLE</title>  < head> <body> <center> <img
alt="not
supported"
height="816"
sre="google-logo-png-google-sva-scholarship-20png" width="508" /><br />
WELCOME TO GOOGLE< center>

<p>Made By Raunak Nath, 12A</p> < body> < html>
84
Snippets
85
Examining Structure of a Website
Estimating Size of a Website

86
Sec-C-Project/
Expeditionary learning
87
STAY SAFE ONLINE

88
89
VEER GATHA
90
ICC WORLD CUP
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Cup Tickets On Sale!</title>
<style>
91
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
margin: 20px;
}
h1 {
color: #3498db;
}
p{
color: #555;
}
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin: 10px 0 5px;
color: #333;
}
92
input,
select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
margin: 10px 5px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #2980b9;
}
#message {
color: #27ae60;
margin-top: 10px;
}
</style>
</head>
<body>
93
<h1>World Cup Tickets</h1>

<p>The 2023 ICC Men's Cricket World Cup was the 13th edition of the
Cricket World Cup, a quadrennial One Day International (ODI) cricket
tournament contested by men's national teams and organised by the
International Cricket Council (ICC). The tournament was hosted by India. It
started on 5 October and concluded on 19 November 2023, with Australia
winning the tournament.</p>

<img src="cwc1.png" height=150 width=200 alt="Placeholder Image 1">
<img src="cwc2.png" height=150 width=200 alt="Placeholder Image 2">


<audio controls>
<source src="videoplayback.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>


<video controls>
<source src="videoplayback (3).mp4" height=150 width=200
type="video/mp4">
Your browser does not support the video tag.
</video>
<form id="ticketForm">
<label for="buyerName">Buyer's Name:</label>
<input type="text" id="buyerName" name="buyerName" required>
<label for="seatOption">Seat Option:</label>

<select id="seatOption" name="seatOption" required>
<option value="gold">Gold</option>
94
<option value="silver">Silver</option>
<option value="regular">Regular</option>
</select><br>
<label for="numTickets">Number of Tickets (1-5):</label>

<input type="number" id="numTickets" name="numTickets" min="1"
max="5" required><br>
<label for="ticketPrice">Ticket Price:</label>

<input type="text" id="ticketPrice" name="ticketPrice" readonly
placeholder="3000"><br>
<button type="button" onclick="calculateTicketPrice()">Calculate

Price</button>
<button type="button" onclick="clearForm()">Clear</button>
<button type="button" onclick="closeForm()">Close</button>
<p id="message"></p>
</form>
<script>
function calculateTicketPrice() {
const buyerName = document.getElementById('buyerName').value;
const seatOption = document.getElementById('seatOption').value;
const numTickets = document.getElementById('numTickets').value;
const discount = 10; // You can adjust the discount value as needed
const ticketPrice = calculatePrice(seatOption, numTickets, discount);
document.getElementById('ticketPrice').value = `₹${ticketPrice}`;
95
const message = `${buyerName}, ${numTickets} ticket(s) booked

with ${discount}% discount. Total Price: ₹${ticketPrice}`;
document.getElementById('message').innerText = message;
}
function calculatePrice(seatOption, numTickets, discount) {

const basePrice = 3000;
const seatPriceMultiplier = {
gold: 2,
silver: 1.5,
regular: 1
};
const totalPrice = basePrice * seatPriceMultiplier[seatOption] *
numTickets;
const discountedPrice = totalPrice - (totalPrice * (discount / 100));
return discountedPrice.toFixed(2);
}
function clearForm() {
document.getElementById('ticketForm').reset();
document.getElementById('ticketPrice').value = '';
document.getElementById('message').innerText = '';
}
function closeForm() {
window.close();
}
</script>
</body>
</html>
96
International CyberFair
https://lsacyberfair22.wixsite.com/my-site-2
97
98
THE
END

Raunak PracF Final2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Raunak PracF Final2

Uploaded by

Copyright:

Available Formats

48

document.write("<h1>"+ "Logical Operators"+"</h1>");

document.write("The sum is "+ sum);

<input type="image" style="object-fit: cover;" class="show-image-6"

SMART PACKAGE FEES

VALUE="CALCULATE" onClick="displayfee()"›</CENTER> < form> «script

Playing With Datatypes

<form name="f1" method="post"›

Book read (JS-Events)

// Mouse Event 2: Mouseover event on the introduction paragraph

var introParagraph = document.getElementById('introParagraph');

// Keyboard Event 1: Keypress event on the name input field

// Form Event 1: Focus event on the email input field

// Form Event 2: Submit event on the participation form

// Window/Document Event 1: DOMContentLoaded event

Array Rotation with N elements

ete=parseInt(prompt("Enter any number"));

Array Sorting Word

Array Sorting Numbers

Array sum and average

document.write("The sum is " + x + "<BR>");

var i = parseInt(prompt("Enter a Num"));

Advanced Features Of Web Design

Examining Structure of a Website

Estimating Size of a Website

STAY SAFE ONLINE

ICC WORLD CUP

<h1>World Cup Tickets</h1>

<label for="seatOption">Seat Option:</label>

<label for="numTickets">Number of Tickets (1-5):</label>

<label for="ticketPrice">Ticket Price:</label>

<button type="button" onclick="calculateTicketPrice()">Calculate

const ticketPrice = calculatePrice(seatOption, numTickets, discount);

const message = `${buyerName}, ${numTickets} ticket(s) booked

function calculatePrice(seatOption, numTickets, discount) {

You might also like