||JAI SRI GURUDEV||

S J C INSTITUTE OF TECHNOLOGY

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

FULLSTACK DEVELOPMENT
INTEGRATED LAB MANUAL

S.J.C.INSTITUTE OF TECHNOLOGY
DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING
CHICKBALLAPUR -562101
During the Year: 2025
FSD Laboratory
2025

Educating students to engineer Information Science and Technology for

advancing the Knowledge as to best serve the real world.

1. Focusing on Fundamentals and Applied aspects in both Information

Science Theory and Programming practices.
2. Training comprehensively and encouraging R&D culture in trending areas
of Information Technology.
3. Collaborating with premier Institutes and Industries to nurture Innovation
and learning, in cutting edge Information Technology.
4. Preparing the students who are much Sought-after, Productive and
Well-respected for their work culture having Lifelong Learning practice.
5. Promoting ethical and moral values among the students so as to enable
them emerge as responsible professionals.

Program Educational Objectives

PEO-1: Engage in Successful professional career in Information Science and

Technology.
PEO-2: Pursue higher studies and research to advance the knowledge for Solving
Contemporary Problems in IT industry.
PEO-3: Adapt to a constantly changing world through Professional Development
and Sustained Learning.
PEO-4: Exhibit professionalism and team work with social concern.
PEO-5: Develop Leadership and Entrepreneurship Skills by incorporating
organizational goals.

Program Specific Outcomes

PSO-1: Apply the knowledge of data structures, database systems, system
programming, networking, web development and AI & ML techniques in

Dept. of ISE Page 2

FSD Laboratory
2025
engineering the software.
PSO-2: Exhibit solid foundations and advancements in developing software /
hardware systems for solving contemporary problems.

Content
Exp. List of Programs
No.
1. 1a) Write a script that Logs “Hello, World!” to the console. Create a
script that calculates the sum of two numbers and displays the result
in an alert box.
1b) Create an array of 5 cities and perform the following operations:
Log the total number of cities. Add a new city at the end. Remove the
first city. Find and log the index of a specific city.
2. Read a string from the user, Find its length. Extract the word
“JavaScript” using substring() or slice(). Replace one word with
another word and log the new string. Write a
function isPalindrome(str) that checks if a given string is a palindrome
(reads the same backward).
3. Create an object student with properties: name (string), grade (number),
subjects (array), displayInfo() (method to log the student’s details)
Write a script to dynamically add a passed property to the student
object, with a value of true or false based on their grade. Create a loop
to log all keys and values of the student object.
4. Create a button in your HTML with the text “Click Me”. Add an event
listener to log “Button clicked!” to the console when the button is
clicked. Select an image and add a mouseover event listener to
change its border color. Add an event listener to the document that logs
the key pressed by the user.
5. Build a React application to track issues. Display a list of issues (use
static data). Each issue should have a title, description, and status (e.g.,
Open/Closed). Render the list using a functional component.
6. Create a component Counter with A state variable count initialized to 0.
Create Buttons to increment and decrement the count. Simulate
fetching initial data for the Counter component
using useEffect (functional component)
or componentDidMount (class component). Extend the Counter
component to Double the count value when a button is clicked. Reset
the count to 0 using another button.
7. Install Express (npm install express). Set up a basic server that responds
with “Hello, Express!” at the root endpoint (GET /). Create a REST API.

Dept. of ISE Page 3

FSD Laboratory
2025
Implement endpoints for a Product resource: GET : Returns a list of
products. POST: Adds a new product. GET /:id: Returns details of a
specific product. PUT /:id: Updates an existing product. DELETE /:id:
Deletes a product. Add middleware to log requests to the console.
Use express.json() to parse incoming JSON payloads.
8. Install the MongoDB driver for Node.js. Create a Node.js script to
connect to the shop database. Implement insert, find, update, and
delete operations using the Node.js MongoDB driver. Define a product
schema using Mongoose. Insert data into the products collection using
Mongoose. Create an Express API with a /products endpoint to fetch all
products. Use fetch in React to call the /products endpoint and display
the list of products. Add a POST /products endpoint in Express to insert
a new product. Update the Product List, After adding a product, update
the list of products displayed in React.

1a) Write a script that Logs “Hello, World!” to the console. Create a script that
calculates the sum of two numbers and displays the result in an alert box.
1b) Create an array of 5 cities and perform the following operations: Log the
total number of cities. Add a new city at the end. Remove the first city. Find and
log the index of a specific city.

Step 1: Install Node.js

Why Node.js? Node.js is a runtime environment that allows you to execute

JavaScript code outside the browser. It is widely used for server-side programming
and command-line tools.

1. Download Node.js
Go to the Node.js official website.
Download the LTS version (Long Term Support) which is more stable for
most use cases.
Install it by following the installation instructions specific to your operating
system (Windows, macOS, or Linux).
2. Verify Installation
After installing Node.js, open a terminal or command prompt and check the installed
version by running:

>node -v

3. Install npm (Node Package Manager)

npm is automatically installed when you install Node.js. To verify it, run:

Dept. of ISE Page 4

FSD Laboratory
2025
>npm -v

Step 2: Install Visual Studio Code (VS Code)

Why Visual Studio Code? VS Code is a free, open-source code editor that
provides powerful features like IntelliSense, debugging support, Git integration, and
extensions specifically designed for JavaScript and Node.js development.

Download VS Code
Go to the Visual Studio Code official website.
Download the version for your operating system.
Install VS Code
Follow the installation instructions for your operating system.
Verify Installation
After installation, open VS Code and check if it’s working. If successful, you should
see the VS Code welcome screen.

Step 3: Create Folder and open with vscode

Inside the folder create index.js file.

After then copy the below code and paste it in that index.js file and save it. Note do
one by one both programs.

1a) Write a script that Logs “Hello, World!” to the console. Create a script that
calculates the sum of two numbers and displays the result in an alert box.

console.log("Hello,World!");

function calculateSum(num1, num2) {

var sum =num1 + num2;
console.log("Thesum is: " + sum);
}

calculateSum(5,7);

Step 4: To run program use below command:

Open the vscode integrated terminal through the menu by selecting and type
the below command to run the program.

> node index.js

Dept. of ISE Page 5

FSD Laboratory
2025

OUTPUT:

Hello, World!
Thesumis:12

Or
1a.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome page</title>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>

sum.html
<!DOCTYPE html>
<html>
<head>
<title>Console Input Sum</title>
</head>
<body>
<h1>Open the Console and Follow the Instructions</h1>
<script src="1a.js"></script>
</body>
</html>

1a.js

// Ask the user for two numbers inthe console

let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enterthe second number:"));

// Check if theinputs are valid numbers

if(!isNaN(num1) && !isNaN(num2)) {
let sum = num1 +num2;
alert("The sum is:" + sum);
console.log("Thesum of", num1, "and", num2,"is:", sum);
} else {
alert("Invalid input! Please enter valid numbers.");
console.log("Invalid input! Please enter valid numbers.");

Dept. of ISE Page 6

FSD Laboratory
2025
}

OUTPUT

1b) Create an array of 5 cities and perform the following operations: Log the total
number of cities. Add a new city at the end. Remove the first city. Find and log the
index of a specific city.

let cities = ["New York","Los Angeles","Chicago","Miami", "Houston"];

console.log("Totalnumber of cities: " + cities.length);

cities.push("San Francisco");
console.log("Cities after adding anew one:" +cities);

cities.shift();
console.log("Cities after removingthe first one: " + cities);

let cityIndex = cities.indexOf("Miami");

console.log("Index ofMiami: " + cityIndex);

To run program use below command:

Dept. of ISE Page 7

FSD Laboratory
2025
node index1.js

OUTPUT:

Totalnumber ofcities: 5
Cities after addinganewone:NewYork,Los Angeles,Chicago,Miami,Houston,SanFrancisco
Cities after removingthefirst one:LosAngeles,Chicago,Miami,Houston,SanFrancisco
Indexof Miami: 2

Or
1bb.js
// Create an arrayof 5 cities
let cities = ["New York","London","Paris", "Tokyo","Sydney"];

// Logthe total number ofcities

console.log("Totalnumber of cities:",cities.length);

// Add a new cityat the end

cities.push("Berlin");
console.log("Afteraddinga new city:", cities);

// Removethe first city

cities.shift();
console.log("Afterremoving the first city:",cities);

// Find and logthe index of a specific city

let cityToFind = "Tokyo";
let cityIndex = cities.indexOf(cityToFind);

if(cityIndex !== -1) {

console.log(`${cityToFind} is found at index:`, cityIndex);
} else {
console.log(`${cityToFind} is not found in the array.`);
}

1b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>City ArrayOperations</title>

Dept. of ISE Page 8

FSD Laboratory
2025
</head>
<body>
<h1>Check the Consolefor Output</h1>
<script src="1bb.js"></script>
</body>
</html>

output

Dept. of ISE Page 9

FSD Laboratory
2025

Program 2

2. Read a string from the user, Find its length. Extract the word “JavaScript”
using substring() or slice(). Replace one word with another word and log the
new string. Write a function isPalindrome(str) that checks if a given string is a
palindrome (reads the same backward).

// Import the readline module to handle user input from the console
const readline = require('readline');

// Create an interface for input and output usingreadline

const rl = readline.createInterface({
input: process.stdin,
output:process.stdout
});

// Function to check if a given stringis a palindrome

function isPalindrome(str) {
// Reverse the input string
const reversedStr = str.split('').reverse().join('');
// Compare the original and reversed string
return str === reversedStr;
}

// Prompt the user to enter a string

rl.question('Enter astring: ',(inputString) => {
// Find and display the length of the input string
const lengthOfString= inputString.length;
console.log(`Length of the string:${lengthOfString}`);

// Find the index of the word "JavaScript" in the input string

Dept. of ISE Page 10

FSD Laboratory
2025
const start =inputString.indexOf("JavaScript");

// Check if "JavaScript" exists in the string

if (start !==-1) {
// Extract theword "JavaScript" from the string
const extractedWord =inputString.slice(start, start + "JavaScript".length);
console.log(`Extracted word: ${extractedWord}`);
} else {
console.log("Word 'JavaScript'not found in the string.");
}

// Replace "JavaScript" with "JavaScript lab program" inthe input string

const replacedString= inputString.replace('JavaScript', 'JavaScript lab program');
console.log(`New stringafter replacement: ${replacedString}`);

// Check if the input string is a palindrome

const isStringPalindrome = isPalindrome(inputString);
console.log(`Is the string a palindrome? ${isStringPalindrome}`);

// Close thereadlineinterface to end the program

rl.close();
});

To run program use below command:

Open the vscode integrated terminal through the menu by selecting and type
the below command to run the program.

node index2.js

OUTPUT:

********************************output 1********************************

Enter astring: IamlearningJavaScript

Lengthof thestring: 47
Extractedword: JavaScript
Newstringafterreplacement: IamlearningJavaScriptlab program
Is thestringapalindrome?false

********************************output 2********************************

Enter astring: madam

Lengthof thestring: 5
Word'JavaScript'not foundinthestring.

Dept. of ISE Page 11

FSD Laboratory
2025
Newstringafterreplacement: madam
Is thestringapalindrome?True

Program3
3. Create an object student with properties: name (string), grade (number), subjects
(array), displayInfo() (method to log the student’s details) Write a script to
dynamically add a passed property to the student object, with a value of true or
false based on their grade. Create a loop to log all keys and values of the student
object.

let student = {
name: "John Doe",
grade:85,
subjects:["Math","Science", "English"],

displayInfo: function() {
console.log(`Name: ${this.name}`);
console.log(`Grade:${this.grade}`);
console.log(`Subjects: ${this.subjects.join(',')}`);
}
};

student.passed = student.grade >=50;

student.displayInfo();

for (let key in student) {

if(typeofstudent[key] !== 'function') {
console.log(`${key}: ${student[key]}`);
}
}

To run program use below command:

Open the vscode integrated terminal through the menu by selecting and type
the below command to run the program.

node index3.js

OUTPUT:

Dept. of ISE Page 12

FSD Laboratory
2025
Name: JohnDoe
Grade: 85
Subjects:Math, Science, English
name: JohnDoe
grade:85
subjects: Math,Science,English
passed: true

Program4
4. Create a button in your HTML with the text “Click Me”. Add an event listener
to log “Button clicked!” to the console when the button is clicked. Select an
image and add a mouseover event listener to change its border color. Add an
event listener to the document that logs the key pressed by the user.

Step 1: Create index.html file inside the any folder

Open index.html file in vscode and copy the below code paste it into that file, save it.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listeners Example</title>
<style>
img{
width:200px;
height: 140px;
border: 5px solid black;
margin-top:10px;
}

button {
padding: 5px 10px;
background: #000;
color: #fff;
border-radius:5px;
cursor: pointer;
}
</style>
</head>

Dept. of ISE Page 13

FSD Laboratory
2025

<body>

<button id="myButton">Click Me</button><br>

<imgid="myImage" src=" download (1).jpeg">

<script>
const button = document.getElementById('myButton');
button.addEventListener('click',function () {
console.log('Button clicked!');
});

const image =document.getElementById('myImage');

image.addEventListener('mouseover', function () {
image.style.borderColor ='red';
});

document.addEventListener('keydown', function (event) {

console.log('Key pressed: ' + event.key);
});
</script>
</body>

</html>

OUTPUT:

Dept. of ISE Page 14

FSD Laboratory
2025

Dept. of ISE Page 15