Scribd
Upload
10 views

IS FSD LAB MANUAL

Uploaded by

sjshaheenagce4524
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

IS FSD LAB MANUAL

Uploaded by

sjshaheenagce4524
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

FULL STACK DEVELOPMENT (BIS601)

LAB MANUAL

Staff Incharge: SJ Shaheena Begum


Asst Professor

GHOUSIA COLLEGE OF ENGINEERNG,


RAMANAGARA 562159
PRACTICAL COMPONENT OF IPCC

Contents

Sl EXPERIMENTS PAGE
NO NO
1 a. 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. b. 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 a. 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. 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.
1 a. 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. b.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>First Program</title>
</head>
<body>
<script>
//a. 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.
//b. 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.

console.log("Hello World!")
let number1 = 5;
let number2 = 7;
let sum = number1 + number2;
alert("The sum of the numbers is: " + sum);

//b)to display cities


let cities = ["Bangaluru", "Mangaluru", "Chikkamagaluru", "Tumakuru",
"Mysuru"];

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

cities.push("Raichur");
console.log("Cities after adding a new one: " + cities);

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

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


console.log("Index of Mysuru: " + cityIndex);
</script>
</body>
</html>
2. a. 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).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//a. 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).

//Read a string from the user


const input =prompt("Enter a string");
console.log(input)
// FInd the length of the string
console.log("Length of string:", input.length);

var a= input.slice(13,23)
console.log(a);
var b=input.substring(13,23)
console.log(b);
//Substring extract the string from original string

//var char=str.substring(0,8);
//console.log(char);//JAVA SCR

//replace: it replace the string


var str='Pune to Bangaluru'
var char=str.replace("Pune", "Mangaluru");
console.log(char); //Mangaluru to Bangaluru

//const startIndex =input.indexOf("Javascript");


function isPalindrome(string) {

// find the length of a string


const len = string.length;

// loop through half of the string


for (let i = 0; i < len / 2; i++) {

// check if first and last string are same


if (string[i] !== string[len - 1 - i]) {
return 'It is not a palindrome';
}
}
return 'It is a palindrome';
}

// take input
const string = prompt('Enter a string: ');

// call the function


const value = isPalindrome(string);

console.log(value);

</script>
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>student</title>
</head>
<body>
<script>
//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: "Neha",
grade: 95,
subjects: ["FSD", "Cloud Computing", "Blockchain Technology"],
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();

// Dynamically add a passed property to the student object


function addProperty(obj, prop) {
obj[prop] = obj.grade >= 80 ? true : false;
}
// Loop through and log all keys and values of the student object
for (let key in student) {
if (typeof student[key] !== 'function') {
console.log(`${key}: ${student[key]}`);
}

// Call the displayInfo method


student.displayInfo();
}</script>
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Event Listeners </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>
<body>

<body>

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

<img id="myImage" src="./Sunflower.jpg">

<script>
//. 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.

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>

</body>
</html>
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.

You might also like