PART-A
1. Design a HTML program to display two paragraphs with following specifications:
P1: display the heading called “ADVANCED WEB PROGRAMMING” and set the text
color to white and background color to blue.
P2: A paragraph with the basic elements such as bold, italic, subscript, super script,
mark and with a horizontal line and line break
<html>
<head>Program-1</head>
<body>
<h1 style="color: white; background-color: blue;"> Advanced Web programming</h1>
<p> Hi my dear <b>3 <sup>rd</sup></b> semester students, This is your <i>first</i>
Lab, <br> <mark>I welcome all of you to this session </mark> <hr /> </p>
<p> The description of the tags are as follows:<br>
Bold: Keeps the text in <b> bold</b><br>
Subscript and Superscript: P <sup>Superscript</sup>P<sub> subscript</sub><br>
Mark: Mark element is to <mark>highlight</mark> the text <br>
Italics: Is to specify <I>Italics style</I> to the text<br>
Break: Break tag is to insert a single line break<br></p>
</body>
</html>
2. Create a webpage to display a table consisting of a customer detail such as
customerID, Name, Experience and Salary.
<!DOCTYPE html>
<html>
<head> Program-2</head>
<body>
<table style="border-color: aqua;">
<caption>Customer Details</caption>
<tr><th>CustID</th><th>Name</th><th>Experience</th><th>Salary</th></tr>
<tr><td>VVCS01</td><td>Ankitha</td><td>4</td><td>25000</td></tr>
<tr><td>VVCS02</td><td>Anitha</td><td>5</td><td>30000</td></tr>
<tr><td>VVCS03</td><td>Ananth</td><td>6</td><td>35000</td></tr>
<tr><td>VVCS04</td><td>Amar</td><td>7</td><td>40000</td></tr>
</table>
</body>
</html>
3. Create a webpage to display an online shopping website with the list of items
available with the concept of ordered and unordered list.
<!DOCTYPE html>
<html>
<head>Program-3</head>
<body>
<h1>Basic Grocery List</h1>
<ol style="list-style: none;">
<li><strong>Grains and Bread</strong></li>
<ol></ol>
<li>Pasta</li>
<li>Rice</li>
<li>Bread</li>
<li>Breakfast Cereal</li>
<ul>
<li>Porridge Oats</li>
<li>Unsweetened</li>
<li> Granola</li>
</ul>
<li><strong>Oil & Fat</strong></li>
<li>Cooking Oil</li>
<li> Butter</li>
<li><strong>Dairy & Eggs</strong></li>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Yougurt</li>
</ol>
</body>
</html>
4. Design a webpage to create a form for a student to enroll for a course which includes
the following fields: Name, USN, Gender Subject interested with the drop-down
options, email, Contact Number, Address with submit and reset button.
<!DOCTYPE html>
<html>
<head>Program-4</head>
<body>
<form>
<p><label>Name</label>
<input type="text"/><br></p>
<p><label>USN</label>
<input type="text"/><br></p>
<p><label>Gender</label></p>
<p><label>Male</label>
<input type="radio" name="gender"/>
<label>Female</label>
<input type="radio" name="gender"/><br> </p>
<p><label for="subjects">Choose the Subject:</label>
<select name="sub">
<option value="Web">Web Programming</option>
<option value="Java">JAVA</option>
<option value="Python">Python</option>
<option value="C++">C++</option>
</select><br></p>
<p><label>Contact Number</label>
<input type="number"/><br></p>
<p><label>Address</label>
<textarea>Enter your Address</textarea><br></p>
<p><input type="submit" value="submit"/>
<input type="reset" value="reset" /> </p>
</form>
</body>
</html>
5. Design HTML webpage with the following CSS specifications: Show any two-font
family through text, decorate the text through underline, overline, and line through,
display the head text with shadow in red color.
<!DOCTYPE html>
<html>
<head>Program-5</head>
<body>
<h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman',
serif;text-shadow: 2px 2px;"> Advanced Web programming</h1>
<p> Hi my dear 3 <sup>rd</sup> semester students, This is your fifth Lab Program,
<br>
<u>I welcome all of you<u><i style="text-decoration: overline;text-decoration: line-
through;"> to this session </u> <hr />
</p>
</body>
</html>
6. Develop javascript code to check whether the given number is prime or not.
<!doctype html>
<html>
<head>
<script>
var num, i, chk, temp;
function checkPrime()
{
num = parseInt([Link]("num").value);
if(num)
{
chk=0;
temp = [Link]("resPara");
[Link] = "block";
for(i=2; i<num; i++)
{
if(num%2==0)
{
chk++;
break;
}
}
if(chk==0)
[Link]("res").innerHTML = "a Prime";
else
[Link]("res").innerHTML = "not a Prime";
}
}
</script>
</head>
<body>
<p>Enter the Number: <input id="num"><button
onclick="checkPrime()">Check</button></p>
<p id="resPara" style="display:none;">It is <span id="res"></span> Number</p>
</body>
</html>
7. Write a JavaScript to design a simple calculator to perform the following operations:
sum, product, difference, and quotient.
<html>
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<input id = "calc" type ="text" name = "answer"> <br> <br>
<input type = "button" value = "1" onclick = "[Link] += '1' ">
<input type = "button" value = "2" onclick = "[Link] += '2' ">
<input type = "button" value = "3" onclick = "[Link] += '3' ">
<input type = "button" value = "+" onclick = "[Link] += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "[Link] += '4' ">
<input type = "button" value = "5" onclick = "[Link] += '5' ">
<input type = "button" value = "6" onclick = "[Link] += '6' ">
<input type = "button" value = "-" onclick = "[Link] += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "[Link] += '7' ">
<input type = "button" value = "8" onclick = "[Link] += '8' ">
<input type = "button" value = "9" onclick = "[Link] += '9' ">
<input type = "button" value = "*" onclick = "[Link] += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "[Link] += '/' ">
<input type = "button" value = "0" onclick = "[Link] += '0' ">
<input type = "button" value = "." onclick = "[Link] += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the
calculator screen. -->
<input type = "button" value = "=" onclick = "[Link] =
eval([Link]) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All"
onclick = "[Link] = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
8. Develop javascript code to find the largest of three numbers.
<html>
<head>
<title>Page Title</title>
<script>
var num1 = 30;
var num2 = 70;
var num3 = 15;
var largestNum;
if (num1 > num2 && num1 > num3) {
largestNum = num1;
}
else if (num2 > num1 && num2 > num3) {
largestNum = num2;
}
else {
largestNum = num3;
}
[Link](largestNum);
</script>
</head>
<body>is the greatest </body>
</html>
NOTE: The above programs will be assessed in CIE ONLY.
PART-B
1. Develop a javascript to sort and accessing the array elements.
Input: n=5
Unsorted array elements: 10,1,-5,4,15
Sorted Array: -5,1, 4, 10, 15
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const points = [10, 1, -5, 4, 15];
alert("The actual elemets are "+ points)
var points1= [Link](function(a, b){return a-b});
alert("The sorted elements are "+ points1);
</script>
</body>
</html>
2. Create a class by the name rectangle with 2 attributes length and breadth. Include a
parameterized constructor to assign values to data members and a function to
calculate area of the rectangle. Demonstrate creation of object of class rectangle and
display its area.
Input: length=5, breadth=6
Output: Area=30
class Rectangle {
constructor(length, breadth) {
[Link] = length;
[Link] = breadth;
}
calculateArea() {
return [Link] * [Link];
}
}
//Creating an object of the Rectangle class
let myRectangle = new Rectangle(5, 10);
// Displaying the area of the rectangle
[Link]("Length:", [Link]);
[Link]("Breadth:", [Link]);
[Link]("Area:", [Link]());
3. Develop a javascript to demonstrate the working of callback and async functions.
Callback:
hello(goodbye);
function hello(callback){
[Link]("hello");
callback();
}
function goodbye(){
[Link]("bye");
}
Async:
[Link]("start");
setTimeout(() => {
[Link]("hey");
}, 2000);
[Link]("end");
4. Develop an arrow function in javascript that checks whether a year is leap year, alert
the user with true if the year is leap year and false if year is non leap year. Validate
centuries also.
Input: 2000, Output: Leap year
Input: 2100, Output: Non Leap year
Input: 2004, Output: Leap year
Input: 2006, Output: Non Leap year
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
<script>
const isLeapYear = year => {
if (year % 4 === 0) {
if (year % 100 === 0) {
return year % 400 === 0;
}
return true;
}
return false;
};
function checkLeapYear() {
const userYear = prompt("Enter a year:");
const year = parseInt(userYear);
if (!isNaN(year)) {
const result = isLeapYear(year);
alert(`Is ${year} a leap year? ${result}`);
} else {
alert("Invalid input. Please enter a valid year.");
}
}
</script>
</head>
<body>
<h1>Leap Year Checker</h1>
<button onclick="checkLeapYear()">Check Leap Year</button>
</body>
</html>
5. Develop a javascript that accepts length and breadth of rectangle as parameter of an
arrow functions. Call the function using spread and rest operator and alert the user
with a perimeter of the rectangle.
// Arrow function to calculate perimeter of rectangle
const Perimeter = (length, breadth) => 2 * (length + breadth);
// Using spread operator to pass parameters
const rectangleSpread = [10, 5];
const perimeterSpread = Perimeter(...rectangleDimensionsSpread);
[Link](`Perimeter_spread: ${perimeterSpread}`);
// Using rest operator to pass parameters
const rectangleRest = [8, 6];
const perimeterRest = Perimeter(...rectangleDimensionsRest);
[Link](`perimeter_rest: ${perimeterRest}`);
6. Develop a javascript to demonstrate the usage of optional and default parameters
in a function.
Optional parameters:
function disp(a,b,c)
{
var c = c || 10;
[Link](a + b + c);
}
disp(10,10);
Default parameters:
function hello(a,b=1)
{
[Link](a + b);
}
Hello(10);
7. Create a class by the name box with parameters length, breadth, and height.
Create a class boxweight that extends box and include a new parameter weight.
Create another class by the name boxcost that extends boxweight and has a
parameter by the name shipmentcost. Include constructors in all the classes.
Create an object of boxcost and display values of all parameters that represent
multilevel inheritance.
class Box {
constructor(length, breadth, height) {
[Link] = length;
[Link] = breadth;
[Link] = height;
}
}
class BoxWeight extends Box {
constructor(length, breadth, height, weight) {
super(length, breadth, height);
[Link] = weight;
}
}
class BoxCost extends BoxWeight {
constructor(length, breadth, height, weight, shipmentCost) {
super(length, breadth, height, weight);
[Link] = shipmentCost;
}
}
const myBoxCost = new BoxCost(10, 5, 3, 2, 20);
[Link]("Length:", [Link]);
[Link]("Breadth:", [Link]);
[Link]("Height:", [Link]);
[Link]("Weight:", [Link]);
[Link]("Shipment Cost:", [Link]);
8. Create a database with studentname and usn. Develop a javascript that accesses this
database using get methods of REST API to display the contents of database in
webpage.
[Link] file:
[
{ "studentName": "John Doe", "usn": "123456" },
{ "studentName": "Jane Doe", "usn": "789012" },
{ "studentName": "Alice Smith", "usn": "345678" }
]
[Link]
[Link]("DOMContentLoaded", function () {
const outputDiv = [Link]("output");
// Fetch data from the REST API endpoint (in this case, the local JSON file)
fetch("[Link]")
.then(response => [Link]())
.then(data => {
// Display the data in the outputDiv
[Link] = "<h2>Student Information</h2>";
[Link](student => {
[Link] += `<p><strong>Name:</strong> ${[Link]},
<strong>USN:</strong> ${[Link]}</p>`;
});
})
.catch(error => {
[Link]("Error fetching data:", error);
[Link] = "<p>Error fetching data. Please try again later.</p>";
});
});
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Database</title>
</head>
<body>
<h1>Student Database</h1>
<div id="output"></div>
<script src="[Link]"></script>
</body>
</html>