Presidency School of Computer Science and Engineering

Lab Manual

Course Code CSE3150

Course Name FRONT END FULL STACK DEVELOPMENT

Credit Structure 2-0-2-3

Year / Semester III/VI

Prepared by Team of ICs

 Vision of Presidency School of Computer Science and Engineering
To be a value based, practice-driven School of Computer Science and Engineering,
committed to developing globally-competent Engineers, dedicated to developing cutting-
edge technology to enhance the quality of life.
Mission of Presidency School of Computer Science and Engineering

 Cultivate a practice-driven environment with a contemporary Learning-pedagogy,

integrating theory and practice.
 Attract and nurture world-class faculty to excel in Teaching and Research, in the field of Core
Engineering.
 Establish state-of-the-art facilities for effective Teaching and Learning-experiences.
 Promote Interdisciplinary Studies to nurture talent and impart relevant skill-sets for global
impact.
 Instil Entrepreneurial and Leadership Skills to address Social, Environmental, and
Community-needs.

PROGRAM OUTCOMES

PO1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems. (M)
PO2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences. (H)
PO3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations. (H)
PO4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
PO5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations (M)
PO6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to
the professional engineering practice.
PO7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.
PO8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
PO9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings. (M)
PO10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive
clear instructions. (L)
PO11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
PO12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change. (M)
PROGRAM SPECIFIC OUTCOMES :
PSO 01. Disciplinary knowledge: Capable of demonstrating proficiency in analyzing and solving
problems related to web development projects.
PSO 02. Problem Solving: Identify, formulate and apply appropriate techniques in the areas
related to Bootstrap, HTML5, CSS3, JavaScript, Ajax, and jQuery.
 PSO 03. Design/development of websites: Design and Develop various activities of web sites utilizing
Node.js, NPM, and other relevant tools in the Angular.js and React.js ecosystems . COURSE
DESCRIPTION:

This intermediate course enables students to perform front-end full stack development, with emphasis
on employability skills. The course covers key technologies and architectures that enable the student to
design and implement front-end. On successful completion of this course, the student shall be able to
pursue a career in full-stack development. The students shall develop strong problem-solving skills as
part of this course.

COURSE OBJECTIVES

The objective of the course is to familiarize the learners with the concepts of Front-end Full Stack
Development and attain Employability through Experiential Learning techniques.

CO
CO BLOOMS LEVEL
Number
CO 1 Design and develop static web pages using HTML5 Apply
elements and CSS3
CO 2 Develop responsive web pages using CSS, JavaScript and Apply
bootstrap
CO 3 Demonstrate the concepts of Angular.js to develop a web Apply
front-end.
CO 4 Understand and Apply Agile methodologies and Scrum Apply
fundamentals to effectively manage and execute software
development projects.

MAPPING OF C.O. WITH P.O.

CO PO Mapping ARTICULATION MATRIX

CO. PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PO13
No
CO1 M H H - M - - - M L - M -
CO2 M H H - M - - - M L - M -
CO3 M H H - M - - - M L - M -
CO4 M H H - M - - - M L - M -

CO PSO Mapping ARTICULATION MATRIX

CO. No PSO1 PSO2 PSO3

CO1 M M M
CO2 M M M
CO3 H M M
CO4 M M M

Assessment Component

Course
SL. Assessment
Contents outcome Marks Weightage Tentative Dates
No type
Number

CA1 Module1 CO1

CO1 5 2.5%
1 (Surprise
Test-1)
Mid Term Module 1, 2 CO1, CO2 25(Th+ 25%
2 Exam +25(P)

CA2 Module2 CO2 10 5%

2 (Quiz/Assign
ment)

CA3 Module3,4 CO3,CO4 5 2.5%

4 (Certification
)
CA4 All Modules CO1,CO2, 5 2.5%
(Lab CO3,CO4 &
5 Continuous CO5
Assessment-
Record)

6 CA5 CA5 Module4

Module4 CO4
CO4 10 5%
(Seminar)
(Seminar)
CA6 All Modules CO1,CO2, 15 7.5%
(Mini (Including CO3,CO4
7 Project) & CO5
React/Angula
r)
End Term Module 1, 2, CO1, CO2, 50(Th)+ 50%
8
Exam 3, 4 CO3, CO4 50(P)
Course Code: CSE3150
Course Title: Front End Full Stack Development

Lab sheet-1
Introduction: Familiarization of HTML and CSS
Make an HTML page and use all the following html tags and CSS elements.
(Refer online tutorials if needed)
HTML

<!DOCTYPE html>: Declaration of HTML5 document type.

<html>: Root element of an HTML page.

<head>: Contains meta-information about the HTML document.

<title>: Sets the title of the HTML document.

<body>: Contains the content of the HTML document.

<h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.

<p>: Paragraph.

<br>: Line break.

<hr>: Horizontal rule (line).

<a>: Anchor, used for hyperlinks.

<img>: Image.

<ul>: Unordered list.

<li>: List item within an unordered or ordered list.

<ol>: Ordered list.

<li>: List item within an unordered or ordered list.

<table>: Table.

<tr>: Table row.

<td>: Table cell (data).

<th>: Table header cell.

<div>: Generic container or division.

<span>: Inline container.

<strong>: Strong importance, typically displayed as bold.

<em>: Emphasis, typically displayed as italic.

<b>: Bold text.

<i>: Italic text.

<u>: Underlined text.

<s> or <strike>: Strikethrough text.

<sub>: Subscript.

<sup>: Superscript.

<blockquote>: Block quotation.

<cite>: Citation.

<code>: Inline code.

<pre>: Preformatted text.

<address>: Contact information for the author or owner of a document.

<abbr>: Abbreviation or acronym.

<del>: Deleted text.

<ins>: Inserted text.

CSS
Color:

color: Sets the text color.

background-color: Sets the background color.

Typography:

font-family: Defines the font family.

font-size: Sets the font size.

font-weight: Specifies the font weight (e.g., bold).

font-style: Specifies the font style (e.g., italic).

Text:

text-align: Aligns text (left, right, center, justify).

text-decoration: Adds decoration to text (e.g., underline).

line-height: Sets the height of a line of text.

Spacing:

margin: Sets the margin outside an element.

padding: Sets the padding inside an element.

Borders:

border: Sets the border properties (width, style, color).

border-radius: Defines the radius of rounded corners.

Layout:

width: Sets the width of an element.

height: Sets the height of an element.

display: Defines the display behavior of an element (e.g., block, inline).

Try Internal CSS, external CSS and embedded CSS

Lab sheet-2
Experiment on HTML, CSS

Expand the following html structure to include your own biodata. Use HTML5
tags and CSS to make it attractive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shashikumar B Portfolio</title>
<style>body {
font-family:'Courier New', Courier, monospace;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #4c4b4b;
width: 100%;
margin: auto;
background: rgb(230, 230, 255);
border-radius: 10px;
text-align: center;
}
#canvas{
display: flex;
}
#pro{
background-color: #ead7e5;
}
h2,h3 {
color: #2c3e50;
}
.nav a {
margin: 0 15px;
text-decoration: none;
font-weight: bold;
color: #2c3e50;
}
footer{
background-color: #ade1f4;
box-shadow: 0 0 5px skyblue;
}
a:hover{
color: rgb(240, 241, 246);
}
.project-item {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
height: 180px;
width: 50%;
margin-left: 10px;
margin-right: 10px;
background-color: #b2f1ef;
background: linear-gradient(rgb(172, 224, 245),rgb(88, 202, 240));
box-shadow: 0 0 6px black;
}
.certification-item {
list-style: none;
padding: 5px ;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 15px;
transform: translate(390px,10px);
padding-top:10px ;
}
#home{
transform: translate(130px,50px);
}
#ss{
display: flex;
}
.nav {
margin-bottom: 20px;
transform: translate(400px,150px);
}
a{
text-decoration: none;
}
.nav a {
position: relative;
z-index: 10;
}
header{
background-color: #ccc9f1;
box-shadow: 0 0 5px skyblue;
}
#body{
background-color: #c6eae8;

}
#certification{
width: 50%;
margin-left: 370px;
height: 150px;
background: linear-gradient(rgb(172, 224, 245),rgb(88, 202, 240));
transform: translate(10px,-15px);
border-radius: 5px;
box-shadow: 0 0 6px black;
}
#certification:hover{
transform: scale(1.05);
}
#h3{
transform: translate(-90px,100px);
}
.project-item:hover{
transform:scale(1.05) ;
}
</style>
</head>
<body>
<header>
<div id="ss">
<img src="hacker.jpg" alt="Profile Image" class="profile-img">
<nav class="nav">
<a href="home.html">Home</a>
<a href="projects.html">Projects</a>
<a href="about.html">About</a>
<a href="certification.html">Certifications</a>
</nav>
<h2 id="home">Shashikumar B</h2>
<h3 id="h3">[Cyber Security,Web Devloper]</h3>
</div>
<p>Welcome to my portfolio! I am passionate about web development, ethical hacking, and
cybersecurity.</p>
</header>
<div>
<div id="pro">
<h2 id="projects">Projects</h2>
<div id="canvas">
<div class="project-item 1">
<h3>Spotify Clone</h3>
<p>A music streaming web app inspired by Spotify.</p>
<p><strong>Tech Stack:</strong> React, Node.js, MongoDB</p>
<p><strong>Features:</strong> Music playback, playlists, user authentication.</p>
<a href="#" target="_blank">&#128279; View Project</a>
</div>
<div class="project-item">
<h3>Netflix Clone</h3>
<p>A replica of Netflix with real-time movie updates.</p>
<p><strong>Tech Stack:</strong> React, Firebase, TMDB API</p>
<p><strong>Features:</strong> Movie browsing, authentication.</p>
<a href="#" target="_blank">&#128279; View Project</a>
</div>
</div>
<div id="certification">
<h2 id="certifications"> Certifications</h2>
<li class="certification-item"> 1.Fullstack Web Development</li>
<li class="certification-item">2.Certified Cyber Technician</li>
<li class="certification-item">3.Certified Ethical Hacker</li>
</div>
</div>
</div>
<footer>
<p>Contact me:</p>

<p>📧 [email protected] | 📞 +91 7019452527</p>

<p>Follow me: Facebook | Twitter | Instagram | LinkedIn</p>

</footer>
</body>
</html>
Output:
Lab sheet-3
Develop an interactive webpage using HTML5 and CSS3
Problem Statement: You have been tasked with designing a webpage for a new restaurant that will be
opening soon. The webpage should showcase the restaurant's ambiance and cuisine using attractive visual
elements.
Note: To create an appealing webpage for the restaurant, you can use various CSS3 features such as
colors, text styles, transforms, and gradients. Here's a sample webpage design using these features:
Images and paragraphs can be taken from internet source

Code:index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a{
text-decoration: none;
margin: 10px;
border: 1px solid rgb(148, 136, 136);
border-radius: 5px;
padding: 2px;
padding-left: 4px;
padding-right: 4px;
}
nav a:hover{
background-color: #a93535;
}
header{
background: linear-gradient(rgb(14, 11, 11),rgb(143, 136, 136));
height:100px ;
padding: 20px;
}
h1{
color: white;

}
#h1{
color: black;
text-align: center;
font-size: 30px;
}
p{
text-align: center;
color: rgb(231, 161, 75);
font-size: 20px;
line-height: 10px;
}
nav a{
color: aliceblue;

}
img{
width: 500px;
height: 450px;
}
main,section{
padding: 20px;
}
#menu{
display: flex;
justify-content: space-around;
}
div img{
height: 300px;
width: 450px;
}
#item3:hover{
transform: scale(1.05);
}
#item2:hover{
transform: scale(1.05);
}
#item1:hover{
transform: scale(1.05);
}
.shash{
text-align: center;
}
section{
background-color: #c6b2b2;
}
img{
border-radius: 5px;
}
#item1,#item2,#item3{
box-shadow: 0px 0px 10px black;
}
center img{
box-shadow: 0px 0px 10px black;
}
footer{
background-color: #deb7b7;

padding: 20px;
}
#footimg{
height: 40px;
width: 40px;
}
select{
transform: translateX(1400px);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<center>
<h1>Welcome to My Restaurant</h1>
<nav>
<a href="Home.html" id="a">Home</a>
<div class="dropdown">
<a href="Menu.html" id="a">Menu</a>
<div class="dropdown-content">
<a href="starters.html">Starters</a>
<a href="maincourse.html">Main Course</a>
<a href="desserts.html">Desserts</a>
<a href="drinks.html">Drinks</a>
</div>
</div>
<a href="ContactUs.html" id="a">Restaurant</a>
</nav>
</center>
</header>
<main>
<section>
<h1 id="h1">About Us</h1>
<p>My Restaurant </p>
<center>
<img src="download.jpg" alt="hotel">
</center>
</section>
<div>
<h1 id="h1">MENU</h1>
<div id="menu">
<div id="item1">
<div class="img">
<img src="download (1).jpg" alt="biryani">
</div>
<h2 class="shash">Chicken Biryani</h2>
<p>its </p>
</div>
<div id="item2">
<div class="img">
<img src="download (2).jpg" alt="chicken">
</div>
<h2 class="shash">Chicken Curry</h2>
<p>its</p>
</div>
<div id="item3">
<div class="img">
<img src="download (3).jpg" alt="chicken Tikka">
</div>
<h2 class="shash">Chicken Tikka</h2>
<p>its</p>
</div>
</div>
</div>
</main>
<footer>
<p>[Your Company Name] 2025. All Rights Reserved.</p>
<p>[Your Restaurant Name] | Bringing Excellence in Restaurant Management</p>
<p>Address: [1234 Street Name, City, Country]</p>
<p>Phone: [+123-456-7890]</p>
<p>Email: [[email protected]]</p>
<p><a href="#"><img src="Instagram-128.webp" alt="Instagram"
id="footimg"></a>&nbsp;&nbsp;&nbsp;&nbsp; <a
href="#"><img src="395_Youtube_logo-128.webp" alt="youtube" id="footimg"></a></p>
</footer>
</body>
</html>
OUTPUT:
Lab sheet-4

Web Forms 2.0

Problem Statement:
Design a web form for signing up with the following fields:

• Name: a required text input field for the user's name

• Date of Birth: a required date input field for the user's date of birth

• Age: a range input field for the user's age, with a minimum value of 18 and a maximum value of

100

• Email: a required email input field for the user's email address

• Website: an optional URL input field for the user's website

• Sign Up button: a submit button for submitting the form

The form also can include some JavaScript code that adds some functionality to the form:

Conditional logic to show or hide fields based on the user's age. If the user is under 18, the age range

input field, email input field, and website input field will be hidden. If the user is between 18 and 25, the

age range input field and email input field will be shown, but the website input field will be hidden. If the

user is over 25, all fields will be shown.

Inline validation for required fields. If a required field is left blank, a message will be displayed asking the

user to fill out the field. A helper function to calculate the user's age based on their date of birth.

Solution

<form>
Name:<input type="text" id="name" required>
Date of Birth:<input type="date" id="dob" required>
<div id="age-range">
<label for="age">Age:</label>
<input type="range" min="1" max="60"id="age"></div>
<div id="email-group">
<label for="email">Email:</label>
<input type="email" id="email" required></div>
<div id="website-group">
<label for="website">Website:</label>
<input type="url" id="website"></div>
<button type="submit">Sign Up</button></form>
<script>
// conditional logic to show or hide fields based on user input
const ageRange = document.getElementById("age-range");
const emailGroup = document.getElementById("email-group");
const websiteGroup = document.getElementById("website-group");
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
document.getElementById("dob").
addEventListener("change",
function() {
const age = calculateAge(this.value);
if (age < 18) {
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
} else if (age >= 18 && age <= 25) {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "none";
} else {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "block";
}
ageRange.querySelector('input').
value=age;
});
// inline validation
document.querySelectorAll
("input[required]").
forEach(input => {
input.addEventListener("invalid",
function() {
this.setCustomValidity("Please fill out this field.");
});
input.addEventListener("input",
function() {
this.setCustomValidity("");
});
});
// helper function to calculate age from date of birth
function calculateAge(birthday) {
const today = new Date();
const birthDate = new Date(birthday);
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate()
< birthDate.getDate())) {
age--;
}return age;}</script>
Output:
Lab sheet-5
Lab sheet-5A (Basic JavaScript Exercises)

Problem Statement:
Ravi is trying to write a program in JavaScript to calculate the Fibonacci series of a given number and the
square of a given number series as the assignment is given by class teacher, help Ravi to develop and
demonstrate a HTML file that includes JavaScript script for the following problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
a) <html>
<head>
<title>Fibonacci Series</title>
</head>
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num=prompt("Enter a number : \n", "");
if(num != null && num > 0 )
{
document.write("<h1>The first "+num+" numbers in the fibonacci series </h1>");
if(num==1)
document.write("<h2> "+ fib1 + "</h2>");
else
{
document.write("<h2>" + fib1 + "</h2>");
document.write("<h2>" + fib2 + "</h2>");
}
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h2> " + fib + "</h2>");
fib1=fib2;
fib2=fib;
}
}
else
alert("Invalid Input");
</script>
</body>
</html>

b) <!DOCTYPE html>
<html>
<head>
<title>Number and its squares</title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Enter a number : \n", "");
var msgstr;
if(num > 0 && num !=null){
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " ^ 2 = " + i*i + "\n";
}
alert(msgstr);
}
else
alert("Invalid Input");
</script>
</body>
</html>
Lab sheet-5B (Creating a Canvas Drawing Application with HTMlL5
and JavaScript)
Problem Statement:
The problem statement: To create a canvas drawing application that allows users to draw on the canvas by
clicking and dragging the mouse. To achieve this, use HTML5 code that includes a canvas element with
an event attribute that listens for mousedown, mousemove, and mouseup events. These events shoud
trigger JavaScript functions that draw lines on the canvas based on the user's mouse movements. The
canvas element can be styled using CSS to have a black border. Use article, section, attributes to enhance
the web page.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<h1>Canvas Example</h1>
<p>Draw on the canvas by clicking and dragging the mouse</p>
</header>
<article>
<h2>Canvas</h2>
<canvas id="myCanvas" width="400" height="400" onmousedown="startDrawing(event)"
onmousemove="drawLine(event)" onmouseup="stopDrawing(event)"></canvas>
</article>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
function startDrawing(event) {
isDrawing = true;
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x, y);
}
function drawLine(event) {
if (isDrawing) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
}
function stopDrawing(event) {
isDrawing = false;
}
</script>
</body> </html>

Output:
Lab sheet-6
JavaScript Exercises

Design a web form for signing up with the following fields:

 Name: a required text input field for the user's name
 Date of Birth: a required date input field for the user's date of birth
 Age: a range input field for the user's age, with a minimum value of 18 and a maximum value of
100
 Email: a required email input field for the user's email address
 Website: an optional URL input field for the user's website
 Sign Up button: a submit button for submitting the form
The form also can include some JavaScript code that adds some functionality to the form:
Conditional logic to show or hide fields based on the user's age. If the user is under 18, the age range
input field, email input field, and website input field will be hidden. If the user is between 18 and 25, the
age range input field and email input field will be shown, but the website input field will be hidden. If the
user is over 25, all fields will be shown.
Inline validation for required fields. If a required field is left blank, a message will be displayed asking the
user to fill out the field. A helper function to calculate the user's age based on their date of birth.

Code:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

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

<input type="date" id="dob" name="dob" required>

<div id="age-range">
<label for="age">Age:</label>
<input type="range" id="age" name="age" min="18" max="100">
</div>

<div id="email-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>

<div id="website-group">
<label for="website">Website:</label>
<input type="url" id="website" name="website">
</div>

<button type="submit">Sign Up</button>

</form>
<script>
// conditional logic to show or hide fields based on user input
const ageRange = document.getElementById("age-range");
const emailGroup = document.getElementById("email-group");
const websiteGroup = document.getElementById("website-group");
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
document.getElementById("dob").addEventListener("change", function() {
const age = calculateAge(this.value);
if (age < 18) {
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
} else if (age >= 18 && age <= 25) {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "none";
} else {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "block";
}
});
// inline validation
document.querySelectorAll("input[required]").forEach(input => {
input.addEventListener("invalid", function() {
this.setCustomValidity("Please fill out this field.");
});
input.addEventListener("input", function() {
this.setCustomValidity("");
});
});
// helper function to calculate age from date of birth
function calculateAge(birthday) {
const today = new Date();
const birthDate = new Date(birthday);
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;}</script>
Lab sheet-7
JavaScript Exercises

Create an online student registration page for Presidency University. Registration page should contain
following fields in the specified format and develop the JavaScript validation Code as per the conditions
specified for each field.
a) First name (should not be empty, Name should contain only alphabets and the length should not be less
than 6 characters)
b) Lastname (only alphabets should be entered)
c) Email id (should not contain any invalid and must follow the standard pattern [email protected])
d)Password ((Password should not be less than 6 characters length and enter only numbers, letters)
e) Address (should not be empty)
f) Mobile number (Phone number should contain 10 digits only and it should accept only numbers)
g) gender
h) Submit and Cancel button
Data entry for all fields are mandatory as per validation conditions and if any of the condition is not
specified appropriate alert Message should be displayed or on successful entry of all the fields the student
should get the alert message “Registration done successfully”.

Main.html

<html>
<head><title>Registration Form Validation</title>
<script src="form_validator.js" defer></script>
</head>
<body bgcolor="#E4F0F8">

<center ><font color="blue" size="6" face="arial">Student Registration Form PRESIDENCHY

UNIVERSITY</font><br /><br /><br />

<form onsubmit='return formValidator()' action="right.html">

<fieldset>
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' /><br /><br />
Email Address<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. [email protected]</font><br /><br/>
Password(minimum 6 characters)<font color="red">*
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='number' id='mobileno' /><br /><br /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
<fielset>
</center>

</form>

</body>
</html>

Right.html
<html>
<body style="background-color:green;">
<h1> Registration done successfully </h1>
</body>
</html>
form_validator.js
function formValidator()
{
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var pass = document.getElementById('pass');
var addr = document.getElementById('addr');
var mobileno = document.getElementById('mobileno');
// Check each input in the order that it appears in the form!
if(notEmpty(firstname, "first name can not be empty")){
if(isAlphabet(firstname, "Please enter only letters for your Firstname")){
if(lengthRestriction(firstname, 6)){
if(isAlphabet(lastname, "Please enter only letters for your Lastname")){
if(emailValidator(email, "Please enter a valid email address")){
if(lengthRestriction(pass, 6)){
if(isAlphanumeric(pass, "please enter Numbers and Letters Only for password")){
if(notEmpty(addr, "please enter the address")){
if(isNumeric(mobileno, "Please enter a valid mobileno")){
if(lengthRestriction1(mobileno, 10 , 10)){
return true;
}}}}
}
}
}
}}}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min){
var uInput = elem.value;
if(uInput.length >= min){
return true;
}else{
alert("Please enter minimum " +min+ " characters");
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction1(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else {
alert("Please enter 10 numbers only");
elem.focus();
return false;
}
}

Lab sheet-8
Bootstrap’s form controls

Problem Statement:
Create a RSVP Form using the bootstrap’s form controls. The form includes fields are First name,
Last name, email, phone number, country, state, Zip, submit and other information from your guests
for event purpose. Each required form group has a validation state that can be triggered by attempting
to submit the form without completing it.
Note: Bootstrap’s form controls expand on our Rebooted form styles with classes. Make use of
classes to opt into their customized displays for a more consistent rendering across browsers and
devices. Be sure to use an appropriate type attribute on all inputs

Solution

<!doctype html>

<html lang="en">

<head>

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

<title> Form With Bootstrap</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</head>

<body class="bg-info">

<style>

.container-sm {

max-width: 700px;

</style>

<div class="container-sm">

<main>

<div class="py-5 text-center">

<h1>RSVP form</h1>

<p class="lead">Using Bootstrap to create a RSVP form</p>

</div>

<div>

<div class="my-4">

<form class="needs-validation" novalidate>

<div class="row lg-3">

<div class="col-sm-6">

<label for="firstName" class="form-label">First name</label>

<input type="text" class="form-control" id="firstName" placeholder="" value="" required>

<div class="invalid-feedback">Valid first name is required.</div>

</div>

<div class="col-sm-6">

<label for="lastName" class="form-label">Last name</label>

<input type="text" class="form-control" id="lastName" placeholder="" value="" required>

<div class="invalid-feedback">

Valid last name is required.

</div>

</div>

<div class="col-sm-6">

<label for="email" class="form-label">Email</label>

<input type="email" class="form-control" id="email" placeholder="[email protected]" required>

<div class="invalid-feedback">

Please enter a valid email address.

</div>

</div>

<div class="col-sm-6">

<label for="phone" class="form-label">Phone Number <span class="text-muted"></span></label>

<input type="tel" class="form-control" id="phone" pattern="[0-9]{10,12}" required>

<div class="invalid-feedback">

Please enter a valid phone number.

</div>

</div>

<div class="col-md-5">
<label for="country" class="form-label">Country</label>

<select class="form-select" id="country" required>

<option value="">Choose...</option>

<option>India</option>

</select>

<div class="invalid-feedback">

Please select a valid country.

</div>

</div>

<div class="col-md-4">

<label for="state" class="form-label">State</label>

<select class="form-select" id="state" required>

<option value="">Choose...</option>

<option>Karnataka</option>

</select>

<div class="invalid-feedback">

Please provide a valid state.

</div>

</div>

<div class="col-md-3">

<label for="zip" class="form-label">Zip</label>

<input type="text" class="form-control" id="zip" placeholder="" required>

<div class="invalid-feedback">

Zip code required.

</div>

</div>

<div class="form-check">

<h3>Will you attend</h3>

<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">

<label class="form-check-label" for="flexRadioDefault1">Yes</label>

</div>

<div class="form-check">

<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"

checked>

<label class="form-check-label" for="flexRadioDefault2">

No

</label>

</div>

<div class="col-mb-3">

<label for="plus">And with how many guests?</label><br>

<select class="form-select" aria-label="Default select example">

<option value="1">Zero</option>

<option value="2">One</option>

<option value="3">Two</option>

<option value="4">Three</option>

</select>

</div>

<div class="form-group">

<label for="textarea" class="form-label">Additional Comments</label>

<textarea class="form-control" id="textarea" rows="8"></textarea>

</div>
<hr class="my-4">

<button class="w-100 btn btn-primary btn-lg" type="submit">Submit</button>

</form>

</div>

</div>

</main>

</div>

</body>

<script>

// Example starter JavaScript for disabling form submissions if there are invalid fields

(function () {

'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to

var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission

Array.prototype.slice.call(forms)

.forEach(function (form) {

form.addEventListener('submit', function (event) {

if (!form.checkValidity()) {

event.preventDefault()

event.stopPropagation()

}
form.classList.add('was-validated')

}, false)

})

})()

</script>

</html>
Lab sheet-9
Bootstrap
Problem Statement:
Create a Responsive image grid using Bootstrap 5. Bootstrap image grid is a simple construction
that allows you to create a responsive layout for your images. To create an image grid, use a series
of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully
responsive.

Hint: Use predefined grid class such as . container, .row, .col and default grid tiers to create a grid.
Solution:

<!doctype html>

<html lang="en">

<head>

<title>Grid Image</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</head>

<style>

img {

height: 100%;

.wrapper {
max-width: 800px;

</style>

<body class="bg-light">

<div class="wrapper mx-auto py-4">

<div class="container">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->

<div class="row ">

<div class="col-md-8 pb-4">

<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-1426604966848-

d7adac402bff?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=for
mat&fit=crop&w=500&q=60" alt="">

</div>

<div class="col-12 col-md-4 pb-4">

<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-1501854140801-

50d01698950b?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1275&q=80" alt="">

</div>

</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="row">

<div class="col-6 col-md-4 pb-4">

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1470252649378-

9c29740c9fa8?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1170&q=80" alt="">

</div>

<div class="col-6 col-md-4 pb-4">

<img class=" d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1431794062232-

2a99a5431c6c?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1170&q=80" alt="">

</div>

<div class="col-12 col-md-4 pb-4">

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1470770903676-

69b98201ea1c?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1170&q=80" alt="">

</div>

</div>

<!-- Columns are always 50% wide, on mobile and desktop -->

<div class="row">

<div class="col-6 pb-4" >

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1552083375-

1447ce886485?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1170&q=80" alt="">

</div>

<div class="col-6 pb-4" >

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1565118531796-

763e5082d113?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
1170&q=80" alt="">

</div>

</div>

</div>

</div>

</body> </html>
Lab sheet-10
Lab sheet -10A(AJAX)
Problem Statement:
Write a JavaScript program using AJAX code to display a birthday greeting message to the user when
they click the "Why's that?" button. The response should be appearing in the same page itself.
Steps:
1. Using Visual Studio Code Editor
2. Through Replit, You can directly execute the code.
3. Through Notepad
a. Install XAMPP Server, Start Apache in the XAMPP control panel
b. Save both the files (AjaxExample.html, surprise.html) under C/ xampp/htdocs
c. Once typed the code, In browser,in URL Type localhost/AjaxExample.html.

Solution

AjaxExample.html:

<html>

<head>

<title> Ajax Example </title>

<style>

body {

font-family: Helvetica;

text-align: center;

#birthday-greeting {

font-size: 72px;

color: red;

text-transform: uppercase;
}

</style>

<script>

var myRequest = new XMLHttpRequest();

myRequest.onreadystatechange = function () {

if (myRequest.readyState === 4) {

document.getElementById('ajax-content').innerHTML = myRequest.responseText;

};

function sendTheAJAX() {

myRequest.open('GET', 'surprise.html');

myRequest.send();

document.getElementById('reveal').style.display = 'none';

</script>

</head>

<body>

<h1>Today's your special day!</h1>

<button id="reveal" onclick="sendTheAJAX()" class="button">Why's that?</button>

<div id="ajax-content">

</div>

</body>

</html>
Surprise.html:

<html>

<head>

</head>

<body>

<h1 id="birthday-greeting">It's your birthday!</h1>

</body>

</html>
Lab sheet -10B (JQuery)
Problem Statement:
Create a web page that displays multiple elements, such as text, images or buttons, and implement
functionality to apply fading effects on these elements using jQuery. The user should be able to trigger the
effects by clicking on designated buttons or links on the page. The fading effects should include fade in,
fade out, and fade toggle, and should have customizable speed and easing options. The program should
also handle multiple simultaneous fades and be compatible with different browsers and screen sizes.

Solution

<html>

<head>

<script src="jquery-3.6.3.js"> </script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script >

$(document).ready(function()

$('#btn1').click(function()

$('#div1').fadeIn(2000);

$('#div2').fadeIn(4000);

$('#div3').fadeIn(6000);

})

$('#btn2').click(function()

$('#div1').fadeOut(2000);

$('#div2').fadeOut(4000);
$('#div3').fadeOut(6000);

})

$('#btn3').click(function()

$('#div1').fadeToggle(2000);

$('#div2').fadeToggle(4000);

$('#div3').fadeToggle(6000);

})

})

</script>

</head>

<body>

<p>fade with different parameters.</p>

<button id="btn1">Fade In </button>

<button id="btn2">Fade Out </button>

<button id="btn3">Fade Toggle </button>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

</html>
Lab sheet -11 (Angular JS)

Angular, a front-end framework developed by Google, is built entirely on TypeScript, a subset of JavaScript.
Use any of the online coding tools that allow you to import Angular and run your code in the browser. Here
are the 2 options:
https://codesandbox.io/s/angular
https://stackblitz.com/edit/angular-practice-start?file=app%2Fapp.component.ts

Practice1: AngularJS Expressions, strings, arrays. objects

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app>
<p>Example expression: {{ 10 + 5 }}</p>
<div ng-app="" ng-init="firstName='Geo';lastName='Kumar'">

<p>The Complete name is: {{ firstName + " " + lastName }}</p>

</div>
<div ng-app="" ng-init="quantity=3;cost=100">
<p>Total amount rupees: <span ng-bind="quantity * cost"></span></p>
</div>
<div ng-app="" ng-init="person={firstName:'Geo',lastName:'Kumar'}">

<p>The First name is {{ person.firstName }}</p>

</div>
<div ng-app="" ng-init="points=[11,25,13,12,130]">

<p>The second result is <span ng-bind="points[1]"></span></p>

</div>
</div>
</body>
</html>
Practice2: AngularJS Modules

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<!--// adding a controller-->
<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>

<script>
var app = angular.module("myApp", []); // creating a module
app.controller("myCtrl", function($scope) {
$scope.firstName = "Laya";
$scope.lastName = "babu";
});
</script>
</body>
</html>

Practice3: AngularJS Directives

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=9;price=125">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
Practice4: ng-model
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Laya babu";
});
</script>
<p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>
</body>
</html>

Practice5: two-way binding

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
<p>Change the name inside the input field, and the model data will change automatically, and therefore
also the header will change its value.</p>
</body>
</html>

Practice6: AngularJS Controllers

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Demonstrates the fundamental architecture of Angular applications
Students have to refer below links and understand flow of working of angular application and its
components. Modules and directives.
https://buddy.works/tutorials/building-a-web-app-with-angular-and-bootstrap
https://stackblitz.com/run?file=src%2Fapp%2Fhero-list.component.ts
Lab sheet -12 (Angular JS)

Problem Statement:
Design a webpage using angular js, that displays a table of planets with columns for name, type, distance
from the sun, and number of moons. The user can search for planets using the search box, and sort the
table by name, type, distance, or number of moons using the dropdown menu. The table data should be
stored in an array of objects in the controller.

Solution:
<!DOCTYPE html>
<html ng-app="planetApp">
<head>
<meta charset="UTF-8">
<title>Planets in the Solar System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="planetController">
<div class="container">
<h1>Planets in the Solar System</h1>
<div class="row">
<div class="col-md-3">
<input type="text" ng-model="searchTerm" class="form-control" placeholder="Search Planets...">
</div>
<div class="col-md-3">
<select class="form-control" ng-model="sortBy" ng-init="sortBy='name'">
<option value="name">Name</option>
<option value="type">Type</option>
<option value="distance">Distance</option>
<option value="moons">Number of Moons</option>
</select>
</div>
</div>

<table class="table table-striped table-hover">

<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Distance (AU)</th>
<th>Number of Moons</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="planet in planets | filter:searchTerm | orderBy:sortBy">
<td>{{ planet.name }}</td>
<td>{{ planet.type }}</td>
<td>{{ planet.distance }}</td>
<td>{{ planet.moons }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
Code:app.js
angular.module('planetApp', [])
.controller('planetController', function($scope) {
$scope.planets = [
{ name: 'Mercury', type: 'Terrestrial', distance: 0.39, moons: 0 },
{ name: 'Venus', type: 'Terrestrial', distance: 0.72, moons: 0 },
{ name: 'Earth', type: 'Terrestrial', distance: 1.00, moons: 1 },
{ name: 'Mars', type: 'Terrestrial', distance: 1.52, moons: 2 },
{ name: 'Jupiter', type: 'Gas Giant', distance: 5.20, moons: 79 },
{ name: 'Saturn', type: 'Gas Giant', distance: 9.58, moons: 82 },
{ name: 'Uranus', type: 'Ice Giant', distance: 19.18, moons: 27 },
{ name: 'Neptune', type: 'Ice Giant', distance: 30.07, moons: 14 }
];
});
Output: