PART-C
1. Design customer registration Form and Employee registration Form
Customer registration Form:
<!DOCTYPE html>
<html>
<head>
<title>Registration Forms</title>
</head>
<body>
<h2>Customer Registration Form</h2>
<form action="#" method="post">
<label for="cname">Full Name:</label>
<input type="text" id="cname" name="cname" required><br><br>
<label for="cemail">Email:</label>
<input type="email" id="cemail" name="cemail" required><br><br>
<label for="cphone">Phone:</label>
<input type="tel" id="cphone" name="cphone" required><br><br>
<label for="caddress">Address:</label>
<textarea id="caddress" name="caddress"
required></textarea><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Employee registration Form:
<!DOCTYPE html>
<html>
<head>
<title>Registration Forms</title>
</head>
<body>
<h2>Employee Registration Form</h2>
<form action="#" method="post">
<label for="ename">Full Name:</label>
<input type="text" id="ename" name="ename" required><br><br>
<label for="eemail">Email:</label>
<input type="email" id="eemail" name="eemail" required><br><br>
<label for="ephone">Phone:</label>
<input type="tel" id="ephone" name="ephone" required><br><br>
<label for="edept">Department:</label>
<input type="text" id="edept" name="edept" required><br><br>
<label for="eposition">Position:</label>
<input type="text" id="eposition" name="eposition" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
2. Develop Dynamically Creation of unordered List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic List</title>
</head>
<body>
<input type="text" id="itemInput" placeholder="Enter item">
<button onclick="addItem()">Add Item</button>
<ul id="dynamicList"></ul>
<script>
function addItem() {
const input = document.getElementById("itemInput");
const inputValue = input.value.trim(); // Get input value and remove
extra spaces
if (inputValue) { // Check if input is not empty
const li = document.createElement("li");
li.textContent = inputValue;
document.getElementById("dynamicList").appendChild(li); // Add
item to list
input.value = ""; // Clear input field after adding
}
}
</script>
</body>
</html>
3. Mutation observer
Mutation Observer in JavaScript
A MutationObserver is used to watch for changes in the DOM (e.g., element
additions, removals, or attribute changes) and respond to them dynamically.
Example: Detecting Changes in a <div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Mutation Observer</title>
</head>
<body>
<div id="textDiv">Hello, World!</div>
<button onclick="changeText()">Change Text</button>
<script>
// Select the target node
const target = document.getElementById("textDiv");
// Create a MutationObserver instance
const observer = new MutationObserver(() => {
console.log("Text content changed!");
});
// Start observing changes in text content
observer.observe(target, { childList: true, subtree: true });
// Function to change text dynamically
function changeText() {
target.textContent = "Text has been changed!";
}
</script>
</body>
</html>
4. MERN stack Application. Generation and verification of JWT Tokens.
Basic MERN Stack Application (Simple Example)
This is a basic MERN Stack (MongoDB, Express, React, Node.js) application
with JWT authentication. It includes:
✔ Backend: Express.js (Node.js) with MongoDB for user authentication.
✔ Frontend: React for user registration and login.
#Js:
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcryptjs");
const app = express();
app.use(express.json());
app.use(cors());
// Connect to MongoDB
mongoose.connect("mongodb://127.0.0.1:27017/mern_auth", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
// User Schema
const UserSchema = new mongoose.Schema({
username: String,
email: String,
password: String,
});
const User = mongoose.model("User", UserSchema);
// **User Registration**
app.post("/register", async (req, res) => {
const { username, email, password } = req.body;
const hashedPassword = await bcrypt.hash(password, 10); // Encrypt
password
const newUser = new User({ username, email, password: hashedPassword
});
await newUser.save();
res.json({ message: "User registered successfully" });
});
// **User Login & JWT Token Generation**
app.post("/login", async (req, res) => {
const { email, password } = req.body;
const user = await User.findOne({ email });
if (!user) return res.status(400).json({ error: "User not found" });
const isValid = await bcrypt.compare(password, user.password);
if (!isValid) return res.status(401).json({ error: "Invalid password" });
const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, {
expiresIn: "1h" });
res.json({ token });
});
// **JWT Verification Middleware**
const verifyToken = (req, res, next) => {
const token = req.header("Authorization");
if (!token) return res.status(403).json({ error: "Access Denied" });
try {
const verified = jwt.verify(token.split(" ")[1],
process.env.JWT_SECRET);
req.user = verified;
next();
} catch (error) {
res.status(401).json({ error: "Invalid Token" });
}
};
// **Protected Route**
app.get("/protected", verifyToken, (req, res) => {
res.json({ message: "You are authorized to access this route!" });
});
// Start Server
app.listen(5000, () => console.log("Server running on port 5000"));
5. Simple React application Deployment.
Simple React Application Deployment (Without CLI Tools)
1. Create a Simple React App (Without CRA)
If you don’t have an existing React app, you can create a basic one
manually using JavaScript.
Step 1: Create an index.html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple React App</title>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js">
</script>
<script
src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function App() {
return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
This is a simple React app that runs without `create-react-app` (CRA) or
build tools.
2. Upload to GitHub Pages (Manual Method)
1. Create a GitHub repository (if you haven’t already).
2. Push your files (`index.html`) to GitHub.
3. Go to Settings → Pages → Source → Select main branch → Click
Save.
4. Your site will be live at
`https://yourusername.github.io/your-repo-name`.
3. Upload to Netlify (Manual Deployment)
1. Go to https://netlify.com/.
2. Sign in and create a new site.
3. Drag and drop your `index.html` file into Netlify.
4. Netlify will host your React app for free and provide a public URL.
4. Upload to Firebase Hosting (Without CLI)
1. Go to Firebase Console (https://console.firebase.google.com/).
2. Create a new Firebase project.
3. Go to Hosting → Click Get Started.
4. Upload your `index.html` file manually.
5. Firebase will give you a public URL where your React app is deployed.
Summary
✔ No need for `npm run build` or CRA
✔ Works with plain JavaScript
✔ Easy manual deployment (GitHub, Netlify, Firebase)
6. Javascript Browser events
JavaScript Browser Events
Browser events allow JavaScript to interact with users by responding to
actions like clicks, key presses, and mouse movements.
1. What Are Browser Events?
Events are actions that happen in the browser, such as:
✔ Clicking a button (`click`)
✔ Typing in a text box (`input`, `keydown`, `keyup`)
✔ Hovering over an element (`mouseover`, `mouseout`)
✔ Submitting a form (`submit`)
✔ Scrolling (`scroll`)
2. Adding Event Listeners
You can handle events using `addEventListener()`.
Example: Click Event
document.getElementById("btn").addEventListener("click", function() {
alert("Button Clicked!");
});
<button id="btn">Click Me</button>
3. Common Browser Events with Examples
1. Mouse Events
document.getElementById("box").addEventListener("mouseover",
function() {
this.style.backgroundColor = "lightblue";
});
<div id="box" style="width:100px; height:100px;
background:red;"></div>
2. Keyboard Events
document.addEventListener("keydown", function(event) {
console.log("Key pressed: " + event.key);
});
3. Form Submission
document.getElementById("form").addEventListener("submit",
function(event) {
event.preventDefault(); // Prevents page refresh
alert("Form Submitted!");
});
<form id="form"><button type="submit">Submit</button></form>
4. Removing an Event Listener
function sayHello() {
alert("Hello!");
}
document.getElementById("btn").addEventListener("click", sayHello);
document.getElementById("btn").removeEventListener("click", sayHello);
5. Event Bubbling & Capturing
Events can propagate in two ways:
1️⃣ Bubbling (Default): Events move from child to parent.
2️⃣ Capturing: Events move from parent to child.
document.getElementById("child").addEventListener("click", function(event)
{
alert("Child clicked");
event.stopPropagation(); // Stops bubbling
});
document.getElementById("parent").addEventListener("click", function() {
alert("Parent clicked");
});
<div id="parent"><div id="child">Click Me</div></div>
Summary
✔ JavaScript events allow interaction with users.
✔ `addEventListener()` is used to handle events.
✔ Events like `click`, `keydown`, `submit`, and `mouseover` are
commonly used.
✔ Event bubbling and capturing control how events propagate.
7. React class component
8. Javascript Generator and Parameter Passing
1. Then (), catch () and Queuemicrotak ()
2. Bubbling and Capturing
3. key ES6 features (like arrow functions, destructuring, and template literals)
that can improve React development, and how would refactor an existing
ES5-based component using ES6
4. Code to fetch the current weather data and display the temperature and
weather condition on the webpage
5. componentDidMount and componentWillUnmount lifecycle Methods
