Short

Q1.Create a Node.js file that will convert the output "Hello World!" into upper-case

Letters.

// Create a new file called uppercase.js and add the following code

// Define the string to be converted

const originalString = "Hello World!";

// Use the toUpperCase() method to convert the string to upper-case

const upperCaseString = originalString.toUpperCase();

// Log the original and converted strings to the console

console.log(`Original String: ${originalString}`);

console.log(`Upper-case String: ${upperCaseString}`);

To run code:

node uppercase.js

Q2.Create a Node.js file that opens the requested file and returns the content to the client.

If anything goes wrong, throw a 404 error

// Create a new file called readFile.js and add the following code

const http = require('http');

const fs = require('fs');

const url = require('url');

const port = 3000;

// Create an HTTP server

http.createServer((req, res) => {

// Get the requested file path from the URL

const filePath = url.parse(req.url, true).pathname;

// Remove leading '/' from the file path

const fileName = filePath.substring(1);

// Check if the file exists

fs.readFile(fileName, (err, data) => {

if (err) {

// If the file does not exist or an error occurs, throw a 404 error

res.writeHead(404, { 'Content-Type': 'text/plain' });

res.end('File not found!');

} else {

// If the file exists, return its content to the client

res.writeHead(200, { 'Content-Type': 'text/plain' });

res.end(data.toString());

}

});

}).listen(port, () => {

console.log(`Server running at http://localhost:${port}/`);

});

Q3.Create a Node.js file that demonstrates create database and table in MySQL

npm install mysql

*Code*

--------

```javascript

// Create a new file called createDatabase.js and add the following code

const mysql = require('mysql');

// Create a connection to the MySQL server

const connection = mysql.createConnection({

host: 'localhost',

user: 'your_username',

password: 'your_password',

});

// Connect to the MySQL server

connection.connect((err) => {

if (err) {

console.error('Error connecting to the MySQL server:', err);

return;

}

console.log('Connected to the MySQL server as id ' + connection.threadId);

// Create a new database

const query = 'CREATE DATABASE IF NOT EXISTS mydatabase';

connection.query(query, (err, results) => {

if (err) {

console.error('Error creating database:', err);

return;

}

console.log('Database created successfully');

// Use the newly created database

connection.changeUser({ database: 'mydatabase' }, (err) => {

if (err) {

console.error('Error changing database:', err);

return;

}

console.log('Using database: mydatabase');

// Create a new table

const query = `

CREATE TABLE IF NOT EXISTS users (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(255) NOT NULL,

email VARCHAR(255) UNIQUE NOT NULL

);

connection.query(query, (err, results) => {

if (err) {

console.error('Error creating table:', err);

return;

}

console.log('Table created successfully');

});

// Close the connection

connection.end((err) => {

if (err) {

console.error('Error closing connection:', err);

return;

}

console.log('Connection closed');

});

Q4: Create a login component using react js consider appropriate fields.

LoginComponent.js

import React, { useState } from 'react';

const LoginComponent = () => {

const [username, setUsername] = useState ('');

const [password, setPassword] = useState('');

const [error, setError] = useState(null);

const handleSubmit = async (e) => {

e.preventDefault();

try {

// Call API to authenticate user

const response = await fetch('/api/login', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ username, password }),

});

const data = await response.json();

if (data.success) {

// Login successful, redirect to dashboard

window.location.href = '/dashboard';

} else {

setError(data.message);

}

} catch (error) {

setError('An error occurred while logging in');

}

};

return (

<h2>Login</h2>

<label>

Username:

<input

type="text"

value={username}

onChange={(e) => setUsername(e.target.value)}

</label>

<br />

<label>

Password:

<input

type="password"

value={password}

onChange={(e) => setPassword(e.target.value)}

</label>

<br />

{error && <div style={{ color: 'red' }}>{error}</div>}

<button type="submit">Login</button>

</form>

</div>

);

};

export default LoginComponent;

App.js

import React from 'react';

import LoginComponent from './LoginComponent';

const App = () => {

return (

<div>

</div>

);

};

export default App;

index.html

<!DOCTYPE html>

<head>

<title>Login App</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Q5: Create a register component using react js consider appropriate fields.

RegisterComponent.js

import React, { useState } from 'react';

const RegisterComponent = () => {

const [username, setUsername] = useState('');

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const [confirmPassword, setConfirmPassword] = useState('');

const [error, setError] = useState(null);

const handleSubmit = async (e) => {

e.preventDefault();

if (password !== confirmPassword) {

setError('Passwords do not match');

return;

}

try {

// Call API to register user

const response = await fetch('/api/register', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ username, email, password }),

});

const data = await response.json();

if (data.success) {

// Registration successful, redirect to login page

window.location.href = '/login';

} else {

setError(data.message);

}

} catch (error) {

setError('An error occurred while registering');

}

};

return (

<h2>Register</h2>

<label>

Username:

<input

type="text"

value={username}

onChange={(e) => setUsername(e.target.value)}

</label>

<br />

<label>

Email:

<input

type="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

</label>

<br />

<label>

Password:

<input

type="password"

value={password}

onChange={(e) => setPassword(e.target.value)}

</label>

<br />

<label>

Confirm Password:

<input

type="password"

value={confirmPassword}

onChange={(e) => setConfirmPassword(e.target.value)}

</label>

<br />

{error && <div style={{ color: 'red' }}>{error}</div>}

<button type="submit">Register</button>

</form>

</div>

);

};

export default RegisterComponent;

App.js

import React from 'react';

import RegisterComponent from './RegisterComponent';

const App = () => {

return (

<div>

</div>

);

};

export default App;

index.html

<!DOCTYPE html>

<head>

<title>Register App</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Q6: Create a react a component to render user name and update user name when there is change [use

useEffect and useState]

UsernameComponent.js

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

const UsernameComponent = () => {

const [username, setUsername] = useState('');

const [newUsername, setNewUsername] = useState('');

useEffect(() => {

// Fetch the username from an API or a database

// For demonstration purposes, we'll use a mock API

const fetchUsername = async () => {

const response = await fetch('/api/username');

const data = await response.json();

setUsername(data.username);

};

fetchUsername();

}, []);

const handleUpdateUsername = async (e) => {

e.preventDefault();

try {

// Call an API to update the username

const response = await fetch('/api/update-username', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ newUsername }),

});

const data = await response.json();

if (data.success) {

setUsername(newUsername);

} else {

console.error('Error updating username:', data.message);

}

} catch (error) {

console.error('Error updating username:', error);

}

};

return (

<div>

<h2>Username: {username}</h2>

<label>

New Username:

<input

type="text"

value={newUsername}

onChange={(e) => setNewUsername(e.target.value)}

</label>

<br />

<button type="submit">Update Username</button>

</form>

</div>

);

};

export default UsernameComponent;

App.js

import React from 'react';

import UsernameComponent from './UsernameComponent';

const App = () => {

return (

<div>

</div>

);

};

export default App;

index.html

<!DOCTYPE html>

<head>

<title>Username App</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Q7: Implement a simple drop down menu using useRef in react.

DropdownMenu.js

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

const DropdownMenu = () => {

const dropdownRef = useRef(null);

const [isOpen, setIsOpen] = useState(false);

const handleToggle = () => {

setIsOpen(!isOpen);

};

const handleOutsideClick = (event) => {

if (!dropdownRef.current.contains(event.target)) {

setIsOpen(false);

}

};

return (

<div>

<button onClick={handleToggle}>Toggle Dropdown</button>

{isOpen && (

<li>Option 1</li>

<li>Option 2</li>

<li>Option 3</li>

</ul>

)}

</div>

);

};

export default DropdownMenu;

App.js

import React from 'react';

import DropdownMenu from './DropdownMenu';

const App = () => {

return (

<div>

</div>

);

};

export default App;

index.html

<!DOCTYPE html>

<head>

<title>Dropdown Menu</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Q8: Create a react js component which will illustrate the use of useState

Counter.js

import React, { useState } from 'react';

const Counter = () => {

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

const handleIncrement = () => {

setCount(count + 1);

};

const handleDecrement = () => {

setCount(count - 1);

};

return (

<div>

<p>Count: {count}</p>

</div>

);

};

export default Counter;

App.js

import React from 'react';

import Counter from './Counter';

const App = () => {

return (

<div>

</div>

);

};

export default App;

index.html

<!DOCTYPE html>

<head>

<title>Counter</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Q9: Create login and register component and routers for them using react routes.

react-router-dom library

import React, { useState } from 'react';

const Login = () => {

const [username, setUsername] = useState('');

const [password, setPassword] = useState('');

const handleLogin = (e) => {

e.preventDefault();

// Call API to login

console.log('Login button clicked');

};

return (

<div>

<h1>Login</h1>

<label>Username:</label>

<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />

<br />

<label>Password:</label>

<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />

<br />

<button type="submit">Login</button>

</form>

</div>

);

};

export default Login;

import React, { useState } from 'react';

const Register = () => {

const [username, setUsername] = useState('');

const [password, setPassword] = useState('');

const [confirmPassword, setConfirmPassword] = useState('');

const handleRegister = (e) => {

e.preventDefault();

// Call API to register

console.log('Register button clicked');

};

return (

<div>

<h1>Register</h1>

<label>Username:</label>

<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />

<br />

<label>Password:</label>

<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />

<br />

<label>Confirm Password:</label>

<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />

<br />

<button type="submit">Register</button>

</form>

</div>

);

};

export default Register;

App.js

import React from 'react';

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Login from './Login';

import Register from './Register';

const App = () => {

return (

</Routes>

</BrowserRouter>

);

};

export default App;

my-react-project/

src/

App.js

index.js

index.html

package.json

Q10: Create react component to display list of employees consider any random employee data.

EmployeeList.js

import React from 'react';

const EmployeeList = () => {

const employees = [

{ id: 1, name: 'John Doe', role: 'Software Engineer' },

{ id: 2, name: 'Jane Smith', role: 'Product Manager' },

{ id: 3, name: 'Bob Johnson', role: 'UX Designer' },

{ id: 4, name: 'Alice Brown', role: 'Data Analyst' },

{ id: 5, name: 'Mike Davis', role: 'DevOps Engineer' },

];

return (

<div>

<h1>Employee List</h1>

<ul>

{employees.map((employee) => (

{employee.name} - {employee.role}

</li>

))}

</ul>

</div>

);

};

export default EmployeeList;

App.js

import React from 'react';

import EmployeeList from './EmployeeList';

const App = () => {

return (

<div>

</div>

);

};

index.html

<!DOCTYPE html>

<head>

<title>My React App</title>

</head>

<body>

</body>

</html>

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

my-react-project/

src/

EmployeeList.js

App.js

index.js

index.html

package.json

Q11: Create a javascript to illustrate the use of async and await.

asyncAwaitExample.js

// A function that returns a promise that resolves after 2 seconds

function delayedHello() {

return new Promise((resolve) => {

setTimeout(() => {

resolve("Hello, World!");

}, 2000);

});

}

// An async function that uses await to wait for the promise to resolve

async function greet() {

console.log("Waiting for the promise to resolve...");

const message = await delayedHello();

console.log(message);

}

// Call the async function

greet();

To run the code

node asyncAwaitExample.js

Q12: Create a javascript to illustrate the use of promise and resolve.

promiseResolveExample.js

// Create a promise that resolves after 2 seconds

let promise = new Promise((resolve, reject) => {

setTimeout(() => {

resolve("Promise resolved!");

}, 2000);

});

// Use the promise

promise.then((message) => {

console.log(message);

}).catch((error) => {

console.error(error);

});

To run the code

node promiseResolveExample.js

Q13: Create any react component to illustrate the react hook.

Counter.js

import React, { useState } from 'react';

function Counter() {

// Initialize the count state to 0

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

// Handle the increment button click

const handleIncrement = () => {

setCount(count + 1);

};

// Handle the decrement button click

const handleDecrement = () => {

setCount(count - 1);

};

return (

<div>

<p>Count: {count}</p>

</div>

);

}

export default Counter;

App.js

import React from 'react';

import Counter from './Counter';

function App() {

return (

<div>

</div>

);

}

export default App;

Q14: Create javascript application to illustrate the use of callback under functions.

callbackExample.js

// A function that takes a callback as an argument

function greet(name, callback) {

console.log(`Hello, ${name}!`);

callback();

}

// A function that will be called as a callback

function sayGoodbye() {

console.log("Goodbye!");

}

// Call the greet function with a callback

greet("John", sayGoodbye);

Q15: Create a react component to display list of students consider any random student data.

StudentList.js

import React from 'react';

// Sample student data

const students = [

{ id: 1, name: 'John Doe', age: 20, grade: 'A' },

{ id: 2, name: 'Jane Smith', age: 21, grade: 'B' },

{ id: 3, name: 'Bob Johnson', age: 19, grade: 'C' },

{ id: 4, name: 'Alice Brown', age: 22, grade: 'A' },

{ id: 5, name: 'Mike Davis', age: 20, grade: 'B' },

];

function StudentList() {

return (

<div>

<h1>Student List</h1>

<ul>

{students.map((student) => (

<span>{student.name}</span>

<span>Age: {student.age}</span>

<span>Grade: {student.grade}</span>

</li>

))}

</ul>

</div>

);

}

export default StudentList;

App.js

import React from 'react';

import StudentList from './StudentList';

function App() {

return (

<div>

</div>

);

}

export default App;

Search This Blog

Fsd

Short

Comments

Post a Comment

Popular posts from this blog

long