WC Program
1. Write a Javascript code to code to accept a number and check
if it is even and odd.
-
2. Create one class component “Car” in React & Invoke it using
[Link] .
import React, { Component } from "react";
import ReactDOM from "react-dom/client";
class Car extends Component {
render() {
return (
<div>
<h1>Hello, I am a Car Component!</h1>
<p>This is created using a React Class Component.</p>
</div>
);
}
}
// Rendering Car component
const root = [Link]([Link]("root"));
[Link](
<[Link]>
<Car />
</[Link]>
);
3. Write a Javascript code to set a cookie in user’s computer.
// Function to set a cookie
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
[Link]([Link]() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + [Link]();
}
[Link] = name + "=" + value + expires + "; path=/";
}
// Example usage: Set a cookie named "username" with value "Hariom" for 7 days
setCookie("username", "Hariom", 7);
[Link]("Cookie set successfully!");
4. Write the code to process online Alumini information for you
college. Create a form to get a name,D.O.B, and email id . Use
checkboxes for talking hobbies & radio buttons for selecting
branch. Write JS Code to Validate the following :-
1)User has to fill all the fields prior to form submission
2)Valid Email Id 3)Age Validation using D.O.B
-
5. Write a Javascript Program that changes the background color of page
by refreshing the page every 2 seconds.
-
6. Write an asynchronous file reading [Link] program.
-
// Import the fs module
const fs = require('fs');
// Path to the file you want to read
const filePath = '[Link]';
// Asynchronous file reading
[Link](filePath, 'utf8', (err, data) => {
if (err) {
[Link]("Error reading file:", err);
return;
}
[Link]("File content:");
[Link](data);
});
[Link]("Reading file asynchronously...");
7. Write a Javascript to change the background color of the web
page to red color if button named “RED” is clicked and to
green color if button named “GREEN” is clicked.
-
8. Write the program to create a simple HTTP server to display a
welcome message with [Link].
-
// Import the http module
const http = require('http');
// Define the port
const port = 3000;
// Create the server
const server = [Link]((req, res) => {
[Link](200, { 'Content-Type': 'text/html' });
[Link]('<h1>Welcome to [Link] HTTP Server!</h1>');
[Link]();
});
// Start the server
[Link](port, () => {
[Link](`Server is running at [Link]
});
9. Write a Javascript to accept two numbers and display their sum
using popup box.
-
<!DOCTYPE html>
<html>
<head>
<title>Sum of Two Numbers</title>
</head>
<body>
<script>
// Accept two numbers from user
let num1 = prompt("Enter the first number:");
let num2 = prompt("Enter the second number:");
// Convert input to numbers
num1 = parseFloat(num1);
num2 = parseFloat(num2);
// Calculate sum
let sum = num1 + num2;
// Display sum in a popup box
alert("The sum of " + num1 + " and " + num2 + " is: " + sum);
</script>
</body>
</html>
10. A Write an XML file [Link] representing your semester
mark sheet. How do you prove that it is well formed and valid XML?
-
11. Write a React code to create a button “Greet the User” and
display an alert box saying “Hello!” on clicking that button.
-
import React from "react";
import ReactDOM from "react-dom";
function App() {
// Function to show alert
const greetUser = () => {
alert("Hello!");
};
return (
<div>
<button onClick={greetUser}>Greet the User</button>
</div>
);
}
// Render the App component
[Link](<App />, [Link]("root"));
12. Write a code making use of React Hooks that displays four
buttons namely, “Red”, “Blue”,“Green”, “Yellow”. On clicking any of
these buttons, the code displays the message that you have
selected that particular color.
-
import React, { useState } from "react";
import ReactDOM from "react-dom";
function ColorSelector() {
const [message, setMessage] = useState("");
// Function to handle button click
const handleClick = (color) => {
setMessage(`You have selected ${color}`);
};
return (
<div>
<h2>Select a Color</h2>
<button onClick={() => handleClick("Red")}>Red</button>
<button onClick={() => handleClick("Blue")}>Blue</button>
<button onClick={() => handleClick("Green")}>Green</button>
<button onClick={() => handleClick("Yellow")}>Yellow</button>
<p>{message}</p>
</div>
);
}
// Render the component
[Link](<ColorSelector />, [Link]("root"));
13. Demonstrate the working of NodeJs by creating a simple server
to display a “Welcome” message.
-
// Import the http module
const http = require('http');
// Define the port
const port = 3000;
// Create the server
const server = [Link]((req, res) => {
// Set response header
[Link](200, { 'Content-Type': 'text/html' });
// Send response body
[Link]('<h1>Welcome</h1>');
// End the response
[Link]();
});
// Start the server
[Link](port, () => {
[Link](`Server is running at [Link]
});
14. Demonstrate its use by writing the code which creates a simple
text file with the data provided by the user.
-
const fs = require('fs');
const readline = require('readline');
// Create readline interface
const rl = [Link]({
input: [Link],
output: [Link]
});
// Ask user for data
[Link]('Enter the data to write into file: ', (data) => {
// Write data to file asynchronously
[Link]('[Link]', data, (err) => {
if(err){
[Link]('Error writing file:', err);
} else {
[Link]('File created successfully with your data!');
}
[Link]();
});
});
15. Demonstrate the routing of web pages using React Router.
-
Step 1: Install React Router
If you are using Create React App, run:
npm install react-router-dom
Step 2: Create a Simple Routing Example
[Link]
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
[Link](<App />, [Link]("root"));
[Link]
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-
dom";
// Home component
function Home() {
return <h2>Welcome to the Home Page</h2>;
}
// About component
function About() {
return <h2>This is the About Page</h2>;
}
// Contact component
function Contact() {
return <h2>Contact us at contact@[Link]</h2>;
}
// App component with routing
function App() {
return (
<Router>
<div>
<h1>React Router Demo</h1>
{/* Navigation Links */}
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/about">About</Link> |{" "}
<Link to="/contact">Contact</Link>
</nav>
<hr />
{/* Routes */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}
export default App;
How it works
1. BrowserRouter (Router) wraps the whole app to enable routing.
2. Link components create navigation links without reloading the page.
3. Routes contains multiple Route elements:
o path → URL path
o element → Component to render
4. Clicking a link changes the component dynamically without page refresh.
✅ Output:
• Home Page: Displays welcome message.
• About Page: Displays info about the site.
• Contact Page: Displays contact info.
• Navigation links work like menu items.
***