Scribd
Upload
0 views14 pages

Programs

The document outlines several programming assignments, including creating a student object with properties and methods, setting up event listeners in HTML, building a React application for issue tracking, and developing a counter component with state management. Each section provides code examples and instructions for implementation, including running the programs in a terminal or browser. The document serves as a guide for learning JavaScript and React through practical exercises.

Uploaded by

rajeshwari
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
0 views14 pages

Programs

The document outlines several programming assignments, including creating a student object with properties and methods, setting up event listeners in HTML, building a React application for issue tracking, and developing a counter component with state management. Each section provides code examples and instructions for implementation, including running the programs in a terminal or browser. The document serves as a guide for learning JavaScript and React through practical exercises.

Uploaded by

rajeshwari
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/ 14

BIS601 Program 3

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.

PROGRAM:

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 (typeof student[key] !== 'function') {
console.log(`${key}: ${student[key]}`);
}
}

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

OUTPUT:

Name: John Doe


Grade: 85
Subjects: Math, Science, English
name: John Doe
grade: 85
subjects: Math,Science,English
passed: true
BIS601 Program 4
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.

PROGRAM:

<!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>

<body>

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

<img id="myImage"
src="https://vtucircle.com/wp-content/uploads/2025/01/Full-Stack-Development-
BIS601.jpg">

<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>

Step 2: To run program

 Install live server extension to see the visual output (It’s recommended).

OUTPUT:
BIS601 Program 5
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.

Step 1: Install Node.js and npm

Before you start, ensure you have Node.js and npm (Node Package Manager) installed on your
machine.

 Download and install the latest version of Node.js.


 After installing, you can check the versions of Node.js and npm in the terminal:

node -v
npm -v

Step 2: Create a folder

 Create a folder in any location.


 Open folder in vscode.

Step 3: Open Integrated vscode Terminal

 Type below command in your terminal to create react app.

npx create-react-app issue-tracker

 Once the process is complete, you’ll see a folder named issue-tracker in your
directory. Navigate into the folder:

cd issue-tracker

Step 4: Modify the App.js File and App.css file

 Modify the app by editing src/App.js copy the below code and paste it, save it.
 Modify the app by editing src/App.css copy the below code and paste it, save it.

App.js:

import React from 'react';


import './App.css';

const issues = [
{
id: 1,
title: "Bug in login page",
description: "The login page throws an error when submitting invalid
credentials.",
status: "Open",
},
{
id: 2,
title: "UI glitch on homepage",
description: "There is a UI misalignment issue on the homepage for smaller
screens.",
status: "Closed",
},
{
id: 3,
title: "Missing translation for settings page",
description: "The settings page is missing translations for the Spanish
language.",
status: "Open",
},
{
id: 4,
title: "Database connection error",
description: "Intermittent database connection issue during peak hours.",
status: "Open",
},
];

const Issue = ({ title, description, status }) => {


return (
<div className="issue">
<h3>{title}</h3>
<p>{description}</p>
<span className={`status ${status.toLowerCase()}`}>{status}</span>
</div>
);
};

const App = () => {


return (
<div className="App">
<h1>Issue Tracker</h1>
<div className="issue-list">
{issues.map((issue) => (
<Issue
key={issue.id}
title={issue.title}
description={issue.description}
status={issue.status}
/>
))}
</div>
</div>
);
};
export default App;

App.css:

.App {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}

h1 {
color: #333;
}

.issue-list {
display: flex;
flex-direction: column;
align-items: center;
}

.issue {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
margin: 10px;
width: 80%;
max-width: 600px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.issue h3 {
margin: 0 0 10px;
font-size: 1.5em;
}

.issue p {
margin: 0 0 10px;
color: #555;
}

.status {
font-weight: bold;
}

.status.open {
color: #e74c3c;
}

.status.closed {
color: #2ecc71;
}

Step 5: Start the Development Server


Now, you can start the development server by using below command:

npm start

This will start a local development server and automatically open your new React application in
your default web browser. The server will reload the page automatically whenever you make
changes to your code.

OUTPUT:
BIS601 Program 6
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.

Step 1: Create Project

 Create a folder and open with vscode.


 Open integrated vscode terminal.
 After then create a react app using below command.

npx create-react-app counter-app

 After creating successfully then change the directory using below command.

cd counter-app

Step 2: Create File inside the src folder

 Create two separate file Counter.js and CounterClass.js inside the src folder.
 After then copy the below code and paste within the respective
file Counter.js and CounterClass.js
 After then Modify the App.js file present in the src folder. Copy the below code and paste it.
 After then Modify the App.css file present in the src folder. Copy the below code and paste
it.

Counter.js:

import React, { useState, useEffect } from 'react';

const Counter = () => {


const [count, setCount] = useState(0);

useEffect(() => {
console.log('Fetching initial data...');
}, []);

const increment = () => setCount(prevCount => prevCount + 1);


const decrement = () => setCount(prevCount => prevCount - 1);
const doubleCount = () => setCount(prevCount => prevCount * 2);
const resetCount = () => setCount(0);

return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={doubleCount}>Double</button>
<button onClick={resetCount}>Reset</button>
</div>
);
};

export default Counter;

CounterClass.js:

import React, { Component } from 'react';

class Counter extends Component {


constructor(props) {
super(props);
this.state = { count: 0 };
}

componentDidMount() {
console.log('Fetching initial data...');
}

increment = () => {
this.setState(prevState => ({ count: prevState.count + 1 }));
};

decrement = () => {
this.setState(prevState => ({ count: prevState.count - 1 }));
};

doubleCount = () => {
this.setState(prevState => ({ count: prevState.count * 2 }));
};

resetCount = () => {
this.setState({ count: 0 });
};

render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
<button onClick={this.doubleCount}>Double</button>
<button onClick={this.resetCount}>Reset</button>
</div>
);
}
}

export default Counter;


App.js:

import React from 'react';


import './App.css';
import Counter from './CounterClass';

function App() {
return (
<div className="App">
<h1 className='head'>Welcome to the Counter App</h1>
<Counter />
</div>
);
}

export default App;

App.css:

.App {
border-radius: 7px;
background: #ffeaea;
text-align: center;
}

#root {
margin: 20px auto;
width: 40%;
height: 400px;
}

h1 {
color: #fff;
font-size: 25px;
border-radius: 6px;
margin: 20px auto;
background: #000000;
width: fit-content;
padding: 10px 60px;
}

.head {
width: 100%;
font-size: 25px;
margin: 0;
border-radius: 6px;
color: #fff;
background: #000000;
padding: 10px 0;
}

button {
margin: 10px;
padding: 8px 10px;
font-size: 16px;
border: none;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
background: #e02020;
color: #fff;
}

Step 3: Start the Development Server

Now, you can start the development server by using below command:

npm start

This will start a local development server and automatically open your new React application in
your default web browser. The server will reload the page automatically whenever you make
changes to your code.

OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy