Web Development WS 2 - Sahul Kumar Parida (20BCS4919)

Name – Sahul Kumar Parida
Class – 20ITA 8
UID – 20BCS4919
SUBJECT- Web Development
DATE-04/07/2021
Ques 1: -
Create a webpage which should have JavaScript program to

set the background colour of a paragraph.
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 70px;
background-color: white;
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo">
<p><b>After clicking on the above button, the background colour of the

paragraph will be changed.</b></p>
</div>
<script>
function myFunction() {
document.getElementById("demo").style.backgroundColor = "red";
</script>
</body>
</html>
Output: -
BEFORE CLICKING THE BUTTON:
AFTER CLICKING THE BUTTON:

Ques 2: -
Link a JS file into a HTML file, put an alert, calculate average
number of weeks in human lifetime, create variables to store a
string, program that tells time of the day (morning, afternoon,
night), etc.
Code: -
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>QUESTION 2</title>
</head>
<body style="background-color:lavender", align="left">
<button type="button" onclick="myfunction()">TAP HERE!</button>
<p id="demo"></p>
<script src="myscript1.js"></script>
<button type="button" onclick="distime()">TAP HERE!</button>
<p id="demo1"></p>
</body>
</html>
JAVASCRIPT CODE:
var daysInYear = 365;
var daysInWeek = 7;
var yearsInLifetime = 80;
var avgweek;
var greet;
function myfunction() {
avgweek = (daysInYear * yearsInLifetime) / daysInWeek;
document.getElementById("demo").innerHTML = avgweek;
function distime() {
greet = new Date().getHours();
if (greet > 19)
document.getElementById("demo1").innerHTML = greet + " \'Good Night\'";
else if(greet > 7 && greet < 12)
document.getElementById("demo1").innerHTML = greet + " \'Good

Morning\'";
else
document.getElementById("demo1").innerHTML = greet + " \'Good

Afternoon\'";
}
}
Output: -
Ques 3: -
Write a JavaScript program where the program takes a random
integer between 1 to 10, the user is then prompted to input a guess
number. If the user input matches with guess number, the program
will display a message "Good Work" otherwise display a message
"Not matched".
Code: -
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:white(121, 220, 233, 0.925)", align="center">
<p>program to play the game called-:"guess the number"</p>
<button type="button" onclick="game()">click on the button to start

playing</button>
<p id="demo"></p>
<script src="myscript.js"></script>
JAVASCRIPT CODE:
function game(){
alert("!!!Guess The Number!!!")
let a;
while ( a != 0){
let n = prompt("Enter Any Number: ");

if ( n < 0 ){
alert("NOT MATCHED!!!");
else if (n > 0 && n <=9){
alert("NOT MATCHED!!!");
else if( n == 10){
alert("Good work");
break;
a++;
let b = prompt("Want to Play Again (Y/N)??");
if (b == "Y" || b == "y"){
game();
else if(b == "N" || b == "N"){
alert("As Your Wish...Thanks For Playing...");
}
Output: -
Ques 4: -
Write a JavaScript program to convert temperatures to and from
Celsius, Fahrenheit.
Example: [ Formula: c/5 = (f-32)/9 [ where c = temperature in

Celsius and f = temperature in Fahrenheit]
Expected Output :60°C is 140 °F
45°F is 7.222222222222222°C
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEMPERATURE CONVERSION</title>
<style>
body{
background-color:white;
text-align: center;
font-size: 30px;
h2{
text-align: center;
</style>
</head>
<body>
<h2>TEMPERATURE CONVERSION</h2>
<h4>>>CONVERSION OF FAHRENHEIT TO CELSIUS</h4>
<p id="demo1"></p>
<script>
document.getElementById("demo1").innerHTML =
"-- 45 degree Fahrenheit is " + tocelsius(45) + " degree Celsius.";
function tocelsius(fahrenheit){
return(5/9) * (fahrenheit-32);
</script>
<br>
<h4>>>CONVERSION OF CELSIUS TO FAHRENHEIT</h4>
<p id="demo2"></p>
<script>
document.getElementById("demo2").innerHTML =
"-- 60 degree Celsius is " + tofahrenheit(60) + " degree Fahrenheit.";
function tofahrenheit(celsius){
return(celsius*9/5)+32;
</script>
</body>
</html>
Output: -
Ques 5: -
Write a JavaScript program to check the total marks of a student in
various examinations. The student will get A+ grade if the total marks
are in the range 89 to 100 inclusive, if the examination is "Final-exam."
the student will get A+ grade and total marks must be greater than or
equal to 90. Return true if the student gets A+ grade or false otherwise.
Code: -
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:white(121, 233, 196, 0.925)", align="center">
<p>JavaScript program to check the total marks of a student in various

examinations.</p>
<script src="myscript.js"></script>
</body>
</html>
JAVASCRIPT CODE:
var examination = prompt(
"Grades for exam which we need to calculate ?? \n1.) Half Yearly Exams \n2.)
Final Exams \nEnter 1 for Half Yearly Exams or 2 for Final Exams:"
);
var marks = prompt("Total Marks in Selected Exam is: ");
function grade1(num) {
let grade;
if (examination == "1" || examination == 1) {
if (num >= 89 && num <= 100) {
grade = "A+";
if (grade == "A+") {
return true;
} else {
return false;
} else if (examination == "2" || examination == 2) {
if (num >= 90) {
grade = "A+";
if (grade == "A+") {
return true;
} else {
return false;
document.write(grade1(marks));
Output: -
Ques 6: -
Write function in js that prints prime numbers, guess secret number and
print next 20 leap years.
Code: -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Program to print prime numbers, guess secret number and print next 20
leap years.</title>
</head>
<body>
<p>Program to play the game-:"Guess the Secret Number"</p>
<button type="button" onclick="game()">Click on this button to start

playing</button>
<p id="demo"></p>
<script type="text/Javascript">
function calcPrimeNumber()
{
var beginNum = parseInt(document.numbers.firstNum.value);
var endNum = parseInt(document.numbers.secondNum.value);
var primeNumbs = new Array();
var ctr = beginNum;
while(ctr<=endNum)
if(isPrime(ctr)==true)
primeNumbs[primeNumbs.length] = ctr;
ctr = ctr+1;
if (primeNumbs.length == 0)
document.getElementById('output_content').innerHTML = "There were no

prime no within the range.";
else
outputPrimeNums(primeNumbs);
function isPrime(num)
var flag = true;
for(var i=2; i<=Math.ceil(num/2); i++)

{
if((num%i)==0)
flag = false;
break;
return flag;
function outputPrimeNums(primes)
var html = "<h2>Prime Numbers</h2>";
for (i=0;i<primes.length;i++){
html += primes[i] + "<br/>";
document.getElementById('output_content').innerHTML = html;
</script>
</head>
<body>
<form name="numbers">
Beginning Number: <input type="text" name="firstNum" />
End Number: <input type="text" name="secondNum" />
<input type="button" value="Find Prime Numbers"

onclick="calcPrimeNumber()" />
</form>
<div id="output_content">
</div></body>
</body>
</html>
JAVASCRIPT CODE 1:
function game() {
alert("!!!Guess The Secret Number!!!")
let a;
while (a!= 0) {
let n = prompt("Enter Any Number: ");
if (n < 0) {
alert("Not Matched");
else if (n > 0 && n <=9) {
alert("NOT MATCHED");
else if(n == 10) {
alert("Good work");
break;
a++;
let b = prompt("Want to Play Again (Y/N)??");
if (b == "Y" || b == "y") {
game();
else if(b == "N" || b == "N"){

alert("Thanks For Playing...");
JAVASCRIPT CODE 2:
var year = prompt("please input a year to find out the next 20 leap years");
var counter = 20;
function leapyear(years, num) {
//convert years to integer
years = parseInt(years);
var origNum = num;
//add 1 to years just in case current year is leap year
years++;
//this string will hold all of the leap years
var leapYears = '';
//while num is above 0
while (num > 0) {
if (years % 4 === 0 && (years % 100 !== 0 || ( years % 100 === 0 && years %
400 === 0))) {
//if at the last year
if (num === 1) {
//add a period to end
leapYears += years + ".";

}
else {
//otherwise, add a comma and space for other years
leapYears += years + ", ";
//increase years
years++;
//decrease num
num--;
else {
//if not a multiple of 4, just add to years
years++;
//returns sentence after while loop is done
return "The next " + origNum + " leap years are " + leapYears;
//write to document the result of running leapyear
document.write(leapyear(year, counter));
Output: -
Printing next 20 leap years
Guessing the secret number

Printing the Prime Numbers
Ques 7: -
What will be the Output of the following XML Code.

<students>
<student>
<name>Rick Grimes</name>
<age>35</age>
<subject>Maths</subject>
<gender>Male</gender>
</student>
<student>
<name>Daryl Dixon </name>
<age>33</age>
<subject>Science</subject>
<gender>Male</gender>
</student>
<student>
<name>Maggie</name>
<age>36</age>
<subject>Arts</subject>
<gender>Female</gender>
</student>
</students>

OUTPUT:
TABLE STUDENT
NAME AGE SUBJECT GENDER

RICK GRIMES 35 MATHS MALE
DARYL DIXON 33 SCIENCE MALE
MAGGIE 36 ARTS FEMALE
Ques 8: -
Write the code in XML to print the following Output.

Title Author Publisher ISBN
The Moon Is a Harsh R. A. Heinlein Orb 0312863551

Mistress
Fahrenheit 451 R. Bradbury Del Rey 0345342968
The Silmarillion J.R.R. Tolkien G Allen & Unwin 0048231398
1984 G. Orwell Signet 0451524934
Frankenstein M. Shelley Bedford 031219126X
Code: -
<books>
<book>
<title>The Moon is a Harsh Mistress</title>
<Author>R.A. Heinlein</Author>
<Publisher>Orb</Publisher>
<ISBN>0312863551</ISBN>
</book>
<book>
<title>Fahrenheit 451</title>
<Author> R.Bradbury</Author>
<Publisher>DEL RAY</Publisher>
<ISBN>0345342968</ISBN>
</book>
<book>
<title>The Silmarillion</title>
<Author>J.R.R. Tolkien</Author>
<Publisher>G Allen & Unwin</Publisher>
<ISBN>0048231398</ISBN>
</book>
<book>
<title>1984</title>
<Author>G. Orwell</Author>
<Publisher>Signet</Publisher>
<ISBN>0451524934</ISBN>
</book>
<book>
<title>Frankenstein</title>
<Author>M. Shelley</Author>
<Publisher>Bedford</Publisher>
<ISBN>031219126X</ISBN>
</book>
</books>

Web Development WS 2 - Sahul Kumar Parida (20BCS4919)

Uploaded by

Copyright:

Available Formats

You might also like

Web Development WS 2 - Sahul Kumar Parida (20BCS4919)

Uploaded by

Document Information

Original Description:

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

Web Development WS 2 - Sahul Kumar Parida (20BCS4919)

Uploaded by

Copyright:

Available Formats

Name – Sahul Kumar Parida

Create a webpage which should have JavaScript program to

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<button onclick="myFunction()">Try it</button>

<p><b>After clicking on the above button, the background colour of the

AFTER CLICKING THE BUTTON:

<meta charset=utf-8 />

<body style="background-color:lavender", align="left">

<button type="button" onclick="myfunction()">TAP HERE!</button>

<button type="button" onclick="distime()">TAP HERE!</button>

var yearsInLifetime = 80;

avgweek = (daysInYear * yearsInLifetime) / daysInWeek;

greet = new Date().getHours();

if (greet > 19)

document.getElementById("demo1").innerHTML = greet + " \'Good Night\'";

else if(greet > 7 && greet < 12)

document.getElementById("demo1").innerHTML = greet + " \'Good

document.getElementById("demo1").innerHTML = greet + " \'Good

<meta charset=utf-8 />

<body style="background-color:white(121, 220, 233, 0.925)", align="center">

<p>program to play the game called-:"guess the number"</p>

<button type="button" onclick="game()">click on the button to start

alert("!!!Guess The Number!!!")

let n = prompt("Enter Any Number: ");

else if (n > 0 && n <=9){

else if( n == 10){

let b = prompt("Want to Play Again (Y/N)??");

else if(b == "N" || b == "N"){

alert("As Your Wish...Thanks For Playing...");

Example: [ Formula: c/5 = (f-32)/9 [ where c = temperature in

Expected Output :60°C is 140 °F

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h4>>>CONVERSION OF FAHRENHEIT TO CELSIUS</h4>

"-- 45 degree Fahrenheit is " + tocelsius(45) + " degree Celsius.";

<h4>>>CONVERSION OF CELSIUS TO FAHRENHEIT</h4>

"-- 60 degree Celsius is " + tofahrenheit(60) + " degree Fahrenheit.";

<meta charset=utf-8 />

<body style="background-color:white(121, 233, 196, 0.925)", align="center">

<p>JavaScript program to check the total marks of a student in various

var marks = prompt("Total Marks in Selected Exam is: ");

if (num >= 89 && num <= 100) {

} else if (examination == "2" || examination == 2) {

if (num >= 90) {

<meta name="viewport" content="width=device-width">

<p>Program to play the game-:"Guess the Secret Number"</p>

<button type="button" onclick="game()">Click on this button to start

var beginNum = parseInt(document.numbers.firstNum.value);

var endNum = parseInt(document.numbers.secondNum.value);

var primeNumbs = new Array();

var ctr = beginNum;

document.getElementById('output_content').innerHTML = "There were no

var flag = true;

for(var i=2; i<=Math.ceil(num/2); i++)

var html = "<h2>Prime Numbers</h2>";

html += primes[i] + "<br/>";