Scribd
Upload
40 views94 pages

FSD - New Pages Deleted Compressed

The document contains HTML, CSS, and JavaScript code for creating interactive web pages, including a user registration form, a user interest form, and a simple interactive web page with text change, addition, and a to-do list. Each section includes form elements, event handling, and validation for user inputs. The styles are defined to enhance the user interface and experience.

Uploaded by

venkat Mohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views94 pages

FSD - New Pages Deleted Compressed

The document contains HTML, CSS, and JavaScript code for creating interactive web pages, including a user registration form, a user interest form, and a simple interactive web page with text change, addition, and a to-do list. Each section includes form elements, event handling, and validation for user inputs. The styles are defined to enhance the user interface and experience.

Uploaded by

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

PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Interactive Web Page</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #d0e7f9;

text-align: center;

margin-top: 20px;

.container {

background: white;

width: 300px;

margin: auto;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.2);

h2 {
margin: 20px 0 10px;

/* --- Enhanced Hover Box --- */

#hover-box {

width: 80px;

height: 80px;

background-color: #4db8ff;

margin: 15px auto;

transition: all 0.4s ease;

border-radius: 8px;

box-shadow: 0 0 5px rgba(0,0,0,0.2);

#hover-box:hover {

background-color: #3399ff;

transform: scale(1.3) rotate(10deg);

box-shadow: 0 0 20px #3399ff, 0 0 30px #3399ff;

input[type="number"], input[type="text"] {

padding: 8px;

margin: 5px;

width: 120px;

button {
padding: 8px 12px;

margin: 10px;

background-color: #4b4bff;

color: white;

border: none;

cursor: pointer;

border-radius: 4px;

transition: background-color 0.3s;

button:hover {

background-color: #0000cc;

#result, #taskList {

margin-top: 15px;

ul {

list-style-type: none;

padding: 0;

li {

background: #f0f0f0;

margin: 5px 0;

padding: 8px;
border-radius: 4px;

small {

display: block;

margin-bottom: 10px;

color: gray;

</style>

</head>

<body>

<div class="container">

<h2>1. Change Text</h2>

<p id="text">Hello, world</p>

<button onclick="changeText()">Submit</button>

<h2>2. House Hover</h2>

<div id="hover-box"></div>

<h2>3. Addition</h2>

<input type="number" id="num1" placeholder="Enter first number">

<input type="number" id="num2" placeholder="Enter second number">

<br>

<button onclick="addNumbers()">Click</button>

<div id="result"></div>

<h2>4. To-Do List</h2>


<input type="text" id="taskInput" placeholder="Enter task">

<button onclick="addTask()">Add Task</button>

<ul id="taskList"></ul>

</div>

<script>

function changeText() {

document.getElementById('text').innerText = "You clicked Submit!";

function addNumbers() {

const num1 = parseFloat(document.getElementById('num1').value);

const num2 = parseFloat(document.getElementById('num2').value);

if (!isNaN(num1) && !isNaN(num2)) {

document.getElementById('result').innerText = "Result: " + (num1 + num2);

} else {

document.getElementById('result').innerText = "Please enter valid numbers.";

function addTask() {

const taskInput = document.getElementById('taskInput');

const task = taskInput.value.trim();

if (task) {

const li = document.createElement('li');

li.innerText = task;
document.getElementById('taskList').appendChild(li);

taskInput.value = "";

</script>

</body>

</html>

OUTPUT :
PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.container {
width: 400px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}

h2 {
text-align: center;
}

input, select {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
}

label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}

button {
width: 100%;
padding: 10px;
background-color: #4facb3;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #347378;
}

#message, #userDetails {
text-align: center;
margin-top: 10px;
font-weight: bold;
}

#userDetails {
background: #e7ffe7;
padding: 10px;
margin-top: 20px;
border-radius: 8px;
font-size: 14px;
}

small {
display: block;
text-align: center;
margin-top: 20px;
color: gray;
font-size: 12px;
}

.checkbox {
margin-top: 10px;
}
</style>
</head>
<body>

<div class="container">
<h2>Registration Form</h2>
<form id="registrationForm">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Full Name" required>

<label for="email">Email</label>
<input type="email" id="email" placeholder="Email" required>
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password" required>

<label for="dob">Date of Birth</label>


<input type="date" id="dob" required>

<label for="age">Age</label>
<input type="number" id="age" placeholder="Age" required min="1" max="150">

<label for="country">Country</label>
<select id="country" required>
<option value="">Select Country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select>

<div class="checkbox">
<label><input type="checkbox" id="terms"> I agree to the Terms &
Conditions</label>
</div>

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

<p id="message"></p>

<div id="userDetails" style="display: none;"></div>


</div>

<script>
const form = document.getElementById('registrationForm');
const message = document.getElementById('message');
const userDetails = document.getElementById('userDetails');

form.addEventListener('submit', function(e) {
e.preventDefault();

const name = document.getElementById('name').value.trim();


const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value;
const dob = document.getElementById('dob').value;
const age = document.getElementById('age').value;
const country = document.getElementById('country').value;
const terms = document.getElementById('terms').checked;

// Email validation
const emailRegex = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

// Password validation: min 6 chars with letter and number


const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;

if (!name || !email || !password || !dob || !age || !country) {


message.style.color = 'red';
message.textContent = 'Please fill all the fields!';
return;
}

if (!emailRegex.test(email)) {
message.style.color = 'red';
message.textContent = 'Invalid email format!';
return;
}

if (!passwordRegex.test(password)) {
message.style.color = 'red';
message.textContent = 'Password must be at least 6 characters, include letters and
numbers!';
return;
}

if (!terms) {
message.style.color = 'red';
message.textContent = 'You must agree to the Terms & Conditions!';
return;
}

const userData = {
name: name,
email: email,
dob: dob,
age: age,
country: country
};

localStorage.setItem('user', JSON.stringify(userData));

message.style.color = 'green';
message.textContent = 'Registration successful!';
// Show user details
userDetails.style.display = 'block';
userDetails.innerHTML = `
<h3>Registration Details</h3>
Full Name: ${name} <br>
Email: ${email} <br>
Date of Birth: ${dob} <br>
Age: ${age} <br>
Country: ${country}
`;

form.reset();
});
</script>

</body>
</html>

OUTPUT :
PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Interest Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
padding: 20px;
}
.container {
background: white;
width: 400px;
margin: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
.checkbox-group, .radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 50px;
margin-top: 10px;
}
.checkbox-group input, .radio-group input {
margin-right: 8px;
margin-bottom: 8px;
}
select {
padding: 8px;
margin-top: 10px;
width: 85%;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#output {
margin-top: 20px;
padding: 15px;
background-color: #e6f7ff;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<h2>User Selection Form</h2>

<!-- Interests - Checkboxes -->


<label>Select your Interests:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="sports" value="Sports"> Sports</label>
<label><input type="checkbox" id="music" value="Music"> Music</label>
<label><input type="checkbox" id="reading" value="Reading"> Reading</label>
<label><input type="checkbox" id="movies" value="Movies"> Movies</label>
<label><input type="checkbox" id="coding" value="Coding"> Coding</label>
<label><input type="checkbox" id="gaming" value="Gaming"> Gaming</label>
<label><input type="checkbox" id="traveling" value="Traveling"> Traveling</label>
<label><input type="checkbox" id="photography" value="Photography">
Photography</label>
</div>

<!-- Education Level - Dropdown -->


<label>Select your Education Level:</label>
<select id="education">
<option value="">--Select--</option>
<option value="High School">High School</option>
<option value="Diploma">Diploma</option>
<option value="Bachelor's Degree">Bachelor's Degree</option>
<option value="Master's Degree">Master's Degree</option>
<option value="PhD">PhD</option>
</select>

<!-- Programming Language - Dropdown -->


<label>Select your Preferred Programming Language:</label>
<select id="language">
<option value="">--Select--</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Ruby">Ruby</option>
<option value="Go">Go</option>
</select>

<br>
<button onclick="displaySelections()">Submit</button>
<div id="output"></div>
</div>

<script>
function displaySelections() {
// Interests
const interests = [];
const interestIds = ['sports', 'music', 'reading', 'movies', 'coding', 'gaming', 'traveling',
'photography'];
interestIds.forEach(id => {
if (document.getElementById(id).checked) {
interests.push(document.getElementById(id).value);
}
});

// Education Level
const education = document.getElementById('education').value;

// Programming Language
const language = document.getElementById('language').value;

// ---- CHECKPOINTS ----


if (interests.length === 0) {
alert("Please select at least one interest!");
return;
}
if (education === '') {
alert("Please select your education level!");
return;
}
if (language === '') {
alert("Please select your preferred programming language!");
return;
}

// ---- DISPLAY SELECTED ----


let outputHTML = "<h3>Selected Information</h3>";
outputHTML += `<strong>Interests:</strong> ${interests.join(', ')}<br>`;
outputHTML += `<strong>Education Level:</strong> ${education}<br>`;
outputHTML += `<strong>Programming Language:</strong> ${language}`;
document.getElementById('output').innerHTML = outputHTML;
}
</script>
</body>
</html>

OUTPUT :
PROGRAM :

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Aadhaar Card Viewer</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"

rel="stylesheet">

</head>

<body>

<div id="root"></div>

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel" src="App.js"></script>

<script type="text/babel">

ReactDOM.render(<App />, document.getElementById('root'));

</script>

</body>

</html>
App.css

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

.rotate-y-0 {

transform: rotateY(0deg);

.rotate-y-180 {

transform: rotateY(180deg);

.backface-visibility-hidden {

backface-visibility: hidden;

.transform-gpu {
transform: translateZ(0);

.duration-700 {

transition-duration: 700ms;

/* Increased container size */

.relative.w-full.max-w-md.h-64 {

max-width: 32rem; /* Increased from max-w-md (28rem) to 32rem */

height: 24rem; /* Increased from h-64 (16rem) to 24rem */

/* Adjust font sizes and spacing for the larger container */

.text-lg {

font-size: 1.25rem;

.text-xl {

font-size: 1.5rem;

.mb-3 {

margin-bottom: 1rem;

.mb-1 {

margin-bottom: 0.5rem;

}
.mt-2 {

margin-top: 0.75rem;

.mt-4 {

margin-top: 1.5rem;

.p-6 {

padding: 1.75rem;

/* Increase photo placeholder size */

.w-24.h-28 {

width: 8rem;

height: 10rem;

App.js

import React, { useState } from 'react';

import './App.css';

function App() {

const [isFlipped, setIsFlipped] = useState(false);

const handleFlip = () => {

setIsFlipped(!isFlipped);

};
return (

<div className="flex flex-col items-center justify-center min-h-screen bg-gray-


100 p-4">

<h1 className="text-3xl font-bold mb-8 text-center text-gray-800">Aadhaar


Card Viewer</h1>

<div className="relative w-full max-w-md h-64 cursor-pointer"


onClick={handleFlip}>

<div

className={`absolute w-full h-full duration-700 transform-gpu backface-


visibility-hidden

rounded-lg shadow-xl ${

isFlipped ? 'rotate-y-180 opacity-0' : 'rotate-y-0 opacity-100'

}`}

>

<div className="w-full h-full bg-blue-200 rounded-lg p-6 flex flex-col">

<div className="text-center mb-3">

<h2 className="text-lg font-semibold">Government of India</h2>

<h3 className="text-xl font-bold">Aadhaar Card</h3>

</div>

<div className="flex flex-row justify-between">

<div className="flex flex-col">

<div className="mb-1">

<span className="font-semibold">Name:</span> Riya

</div>

<div className="mb-1">
<span className="font-semibold">DOB:</span> 01-01-2004

</div>

<div className="mb-1">

<span className="font-semibold">Gender:</span> Female

</div>

<div className="mt-2">

<span className="font-semibold">Aadhaar No:</span> 3600 2564 9874

</div>

</div>

<div className="w-24 h-28 bg-white border border-gray-300 flex items-center


justify-center">

<div className="text-xs text-gray-500 text-center p-


2">Photo<br/>Placeholder</div>

</div>

</div>

<div className="mt-4 text-center text-sm text-gray-600">

Click to view more details

</div>

</div>

</div>

<div

className={`absolute w-full h-full duration-700 transform-gpu backface-


visibility-hidden

rounded-lg shadow-xl ${

isFlipped ? 'rotate-y-0 opacity-100' : 'rotate-y-180 opacity-0'


}`}

>

<div className="w-full h-full bg-blue-200 rounded-lg p-6 flex flex-col">

<div className="text-center mb-4">

<h2 className="text-lg font-semibold">Government of India</h2>

</div>

<div className="flex flex-col space-y-2">

<div>

<span className="font-semibold">Father Name:</span> John

</div>

<div>

<span className="font-semibold">Address:</span> 36/1,street -4,

<div className="ml-16">Salem.</div>

</div>

<div>

<span className="font-semibold">Pincode:</span> 636005

</div>

<div>

<span className="font-semibold">Phone:</span> +91 9999988888

</div>

<div>

<span className="font-semibold">Issued Date:</span> 02-11-2025

</div>
<div>

<span className="font-semibold">Valid Till:</span> Lifetime

</div>

</div>

<div className="mt-4 text-center text-sm text-gray-600">

Click to flip card

</div>

</div>

</div>

</div>

<button

onClick={handleFlip}

className="mt-8 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-


600 transitioncolors focus:outline-none focus:ring-2 focus:ring-blue-400"

>

{isFlipped ? 'Show Front' : 'Show Back'}

</button>

<p className="mt-6 text-sm text-gray-500 text-center">

Click on the card or use the button to flip between front and back views

</p>

</div>

);

export default App;


OUTPUT :
PROGRAM :

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>React App</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

</body>

</html>

Form.jsx

import React, { useState } from "react";

import "./Form.css";

const RegistrationForm = () => {

const [formData, setFormData] = useState({

fullName: "",

email: "",

phone: "",

dob: "",
address: "",

password: "",

});

const [submitted, setSubmitted] = useState(false);

// Handle Input Change

const handleChange = (e) => {

setFormData({ ...formData, [e.target.name]: e.target.value });

};

// Handle Form Submit

const handleSubmit = (e) => {

e.preventDefault();

setSubmitted(true);

};

return (

<div className="form-container">

{/* User Information */}

{/* Form Section */}

<div className="form-box">

{submitted ? (

<div className="success-message">

<h3>Form Submitted Successfully!</h3>

<p>Welcome, <strong>{formData.fullName}</strong></p>

</div>
):(

<>

<h2 className="form-title">User Registration</h2>

<form onSubmit={handleSubmit} className="registration-form">

{/* Full Name */}

<div className="form-group">

<label>Full Name</label>

<input

type="text"

name="fullName"

value={formData.fullName}

onChange={handleChange}

required

/>

</div>

{/* Email */}

<div className="form-group">

<label>Email</label>

<input

type="email"

name="email"

value={formData.email}

onChange={handleChange}
required

/>

</div>

{/* Phone Number */}

<div className="form-group">

<label>Phone Number</label>

<input

type="tel"

name="phone"

value={formData.phone}

onChange={handleChange}

required

/>

</div>

{/* Date of Birth */}

<div className="form-group">

<label>Date of Birth</label>

<input

type="date"

name="dob"

value={formData.dob}

onChange={handleChange}

required
/>

</div>

{/* Address */}

<div className="form-group">

<label>Address</label>

<textarea

name="address"

value={formData.address}

onChange={handleChange}

required

></textarea>

</div>

{/* Password */}

<div className="form-group">

<label>Password</label>

<input

type="password"

name="password"

value={formData.password}

onChange={handleChange}

required

/>

</div>
{/* Submit Button */}

<button type="submit" className="btn-submit">

Submit

</button>

</form>

</>

)}

</div>

</div>

);

};

export default RegistrationForm;

Form.css

/* General Styles */

body {

margin: 0;

padding: 0;

font-family: "Arial", sans-serif;

background-color: #f4f4f9;

/* Form Container */

.form-container {
display: flex;

flex-direction: column;

align-items: center;

margin-top: 30px;

/* User Info */

.user-info {

position: absolute;

top: 20px;

right: 20px;

background: #fff;

padding: 10px 15px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

font-size: 14px;

font-weight: bold;

color: #333;

/* Form Box */

.form-box {

background-color: #ffffff;

width: 400px;

padding: 30px;
border-radius: 12px;

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

text-align: center;

/* Form Title */

.form-title {

font-size: 24px;

font-weight: bold;

color: #333;

margin-bottom: 15px;

/* Form Group */

.form-group {

text-align: left;

margin-bottom: 15px;

.form-group label {

display: block;

font-weight: bold;

margin-bottom: 5px;

.form-group input,

.form-group textarea {
width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 6px;

font-size: 14px;

.form-group textarea {

height: 60px;

resize: none;

/* Submit Button */

.btn-submit {

width: 100%;

padding: 12px;

border: none;

border-radius: 8px;

background-color: #007bff;

color: white;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: background 0.3s ease;

}
.btn-submit:hover {

background-color: #0056b3;

/* Success Message */

.success-message {

padding: 20px;

background: #d4edda;

color: #155724;

border-radius: 8px;

font-weight: bold;

/* Footer */

.footer {

margin-top: 20px;

font-size: 14px;

color: #555;

App.js

import React from "react";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Form from "./form/Form";

function App() {
return (

<Router>

<Routes>

<Route path="/" element={<Form />}/>

</Routes>

</Router>

);

export default App;

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);
OUTPUT :
PROGRAM :

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>React App</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

</body>

</html>

Increment.jsx

import React, { useState } from "react";

import "./Increment.css";

const CounterApp = () => {

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

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

const decrement = () => {

if (count > 0) setCount(count - 1);


};

const reset = () => setCount(0);

return (

<div className="counter-container">

<div className="counter-box">

<h2 className="counter-title">! Counter App</h2>

<p className="counter-value">Current Value: {count}</p>

<div className="btn-group">

<button className="btn increment" onClick={increment}>➕ Increment</button>

<button className="btn decrement" onClick={decrement}>➖ Decrement</button>

<button className="btn reset" onClick={reset}>$ Reset</button>

</div>

</div>

</div>

);

};

export default CounterApp;

increment.css

body {

margin: 0;

padding: 0;
font-family: "Arial", sans-serif;

background-color: #f4f4f9;

.counter-container {

display: flex;

flex-direction: column;

align-items: center;

margin-top: 230px;

.user-info {

position: absolute;

top: 20px;

right: 20px;

background: #fff;

padding: 10px 15px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

font-size: 14px;

font-weight: bold;

color: #333;

.counter-box {

background-color: #ffffff;
width: 350px;

padding: 30px;

border-radius: 12px;

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

text-align: center;

.counter-title {

font-size: 22px;

font-weight: bold;

color: #333;

margin-bottom: 10px;

.counter-value {

font-size: 24px;

font-weight: bold;

color: #007bff;

margin-bottom: 15px;

.btn-group {

display: flex;

justify-content: center;

gap: 10px;

}
.btn {

padding: 10px 15px;

border: none;

border-radius: 6px;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: background 0.3s ease;

.increment {

background-color: #28a745;

color: white;

.increment:hover {

background-color: #218838;

.decrement {

background-color: #dc3545;

color: white;

.decrement:hover {

background-color: #c82333;

}
.reset {

background-color: #ffc107;

color: white;

.reset:hover {

background-color: #e0a800;

App.js

import React from "react";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import CounterApp from "./main/increment";

function App() {

return (

<Router>

<Routes>

<Route path="/" element={<CounterApp />} />

</Routes>

</Router>

);

export default App;


index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

OUTPUT :
PROGRAM :
Frontend/App.js

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

function App() {

const [users, setUsers] = useState([]);

const [form, setForm] = useState({ name: '', email: '' });

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

const [success, setSuccess] = useState('');

const [operation, setOperation] = useState('');

const [emailInput, setEmailInput] = useState('');

const fetchUsers = async () => {

try {

const res = await fetch('http://localhost:5050/users');

const data = await res.json();

const gmailUsers = data.filter(user => user.email.includes('@gmail.com'));

setUsers(gmailUsers);

} catch (error) {

setError('Failed to fetch users');

};

useEffect(() => {

fetchUsers();

}, []);
const handleSubmit = async (e) => {

e.preventDefault();

setError('');

setSuccess('');

// Validate form inputs

if (!form.name.trim()) {

setError('Name is required');

return;

if (!form.email.trim() && operation === 'create') {

setError('Email is required');

return;

// Validate email format for new users

if (operation === 'create' && !form.email.includes('@gmail.com')) {

setError('Only Gmail addresses are allowed');

return;

const method = operation === 'update' ? 'PUT' : 'POST';

const url = operation === 'update'

? `http://localhost:5050/users/${form.email}`

: 'http://localhost:5050/users';

try {
console.log('Submitting with:', {

operation,

method,

url,

body: form

});

const res = await fetch(url, {

method,

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

body: JSON.stringify(form),

});

const data = await res.json();

console.log('Response:', data);

if (!res.ok) {

setError(data.error || 'Failed to submit data');

return;

setForm({ name: '', email: '' });

setEmailInput('');

setOperation('');

setSuccess(operation === 'update' ? 'User updated successfully!' : 'User created


successfully!');

fetchUsers();

} catch (error) {
console.error('Submit error:', error);

setError(`Failed to submit data: ${error.message}`);

};

const handleDelete = async (email) => {

try {

const res = await fetch(`http://localhost:5050/users/${email}`, { method: 'DELETE' });

const data = await res.json();

if (res.ok) {

setSuccess(data.message || 'User deleted successfully!');

fetchUsers();

} else {

setError(data.error || 'Failed to delete user');

} catch (error) {

setError(`Failed to delete user: ${error.message}`);

};

const handleRead = async () => {

if (emailInput.trim() === '') {

setError('Please provide an email to search for users');

return;

}
try {

const res = await fetch(`http://localhost:5050/users/${emailInput}`);

if (res.ok) {

const user = await res.json();

setUsers([user]);

setForm({ name: user.name, email: user.email });

setOperation('update');

setSuccess('User found! You can now update the name.');

setError('');

} else {

setError('User not found');

} catch (error) {

setError(`Failed to fetch user: ${error.message}`);

};

const resetForm = () => {

setForm({ name: '', email: '' });

setEmailInput('');

setError('');

setSuccess('');

fetchUsers();

};
const handleOperationChange = (op) => {

resetForm();

setOperation(op);

};

const styles = {

container: {

padding: 30,

fontFamily: 'Arial',

maxWidth: 800,

margin: '0 auto',

backgroundColor: '#f9f9f9',

borderRadius: 10,

boxShadow: '0 2px 10px rgba(0,0,0,0.1)',

},

header: {

textAlign: 'center',

color: '#333',

borderBottom: '2px solid #3498db',

paddingBottom: 10,

marginBottom: 20,

},

alert: {

padding: 10,
marginBottom: 15,

borderRadius: 5,

fontWeight: 'bold',

},

error: { backgroundColor: '#e74c3c', color: 'white' },

success: { backgroundColor: '#2ecc71', color: 'white' },

buttonGroup: {

display: 'flex',

justifyContent: 'space-around',

marginBottom: 20,

flexWrap: 'wrap',

gap: 10,

},

button: {

padding: '10px 16px',

borderRadius: 5,

border: 'none',

backgroundColor: '#3498db',

color: 'white',

cursor: 'pointer',

fontWeight: 'bold',

transition: 'background-color 0.3s',

},
activeButton: {

backgroundColor: '#2980b9',

boxShadow: '0 0 5px rgba(0,0,0,0.2)',

},

form: {

display: 'flex',

flexDirection: 'column',

gap: 15,

padding: '20px',

backgroundColor: '#fff',

borderRadius: 8,

marginBottom: 20,

boxShadow: '0 1px 3px rgba(0,0,0,0.1)',

},

formGroup: {

display: 'flex',

flexDirection: 'column',

gap: 5,

},

label: {

fontWeight: 'bold',

color: '#555',

},
input: {

padding: 12,

borderRadius: 5,

border: '1px solid #ddd',

fontSize: 16,

},

submitButton: {

padding: '12px',

backgroundColor: '#27ae60',

color: 'white',

border: 'none',

borderRadius: 5,

cursor: 'pointer',

fontWeight: 'bold',

marginTop: 10,

},

userList: {

backgroundColor: '#fff',

borderRadius: 8,

padding: '15px',

boxShadow: '0 1px 3px rgba(0,0,0,0.1)',

},

userListHeader: {
borderBottom: '1px solid #eee',

paddingBottom: 10,

marginBottom: 10,

fontWeight: 'bold',

color: '#555',

},

listItem: {

display: 'flex',

justifyContent: 'space-between',

alignItems: 'center',

padding: 12,

backgroundColor: '#f8f9fa',

marginBottom: 8,

borderRadius: 5,

transition: 'background-color 0.2s',

},

userInfo: {

display: 'flex',

flexDirection: 'column',

gap: 3,

},

userName: {

fontWeight: 'bold',
},

userEmail: {

color: '#666',

fontSize: '0.9em',

},

actionButtons: {

display: 'flex',

gap: 10,

},

deleteButton: {

backgroundColor: '#e74c3c',

color: 'white',

padding: '8px 12px',

border: 'none',

borderRadius: 5,

cursor: 'pointer',

},

editButton: {

backgroundColor: '#f1c40f',

color: 'white',

padding: '8px 12px',

border: 'none',

borderRadius: 5,
cursor: 'pointer',

},

resetButton: {

backgroundColor: '#95a5a6',

color: 'white',

padding: '8px 16px',

border: 'none',

borderRadius: 5,

cursor: 'pointer',

marginTop: 15,

},

noUsers: {

textAlign: 'center',

padding: 20,

color: '#7f8c8d',

};

return (

<div style={styles.container}>

<h2 style={styles.header}>User Management System</h2>

{error && <div style={{ ...styles.alert, ...styles.error }}>{error}</div>}

{success && <div style={{ ...styles.alert, ...styles.success }}>{success}</div>}

<div style={styles.buttonGroup}>
<button

style={{

...styles.button,

...(operation === 'create' ? styles.activeButton : {})

}}

onClick={() => handleOperationChange('create')}

>

Create User

</button>

<button

style={{

...styles.button,

...(operation === 'read' ? styles.activeButton : {})

}}

onClick={() => handleOperationChange('read')}

>

Find User

</button>

<button

style={{

...styles.button,

...(operation === 'update' ? styles.activeButton : {})

}}
onClick={() => handleOperationChange('update')}

>

Update User

</button>

<button

style={{

...styles.button,

...(operation === 'delete' ? styles.activeButton : {})

}}

onClick={() => handleOperationChange('delete')}

>

Delete User

</button>

</div>

{(operation === 'read' || operation === 'update') && (

<div style={styles.form}>

<div style={styles.formGroup}>

<label style={styles.label}>Email Search</label>

<input

style={styles.input}

placeholder="Enter Gmail address to search"

value={emailInput}

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


/>

</div>

<button style={styles.submitButton} onClick={handleRead}>Search User</button>

</div>

)}

{(operation === 'create' || (operation === 'update' && form.email)) && (

<form style={styles.form} onSubmit={handleSubmit}>

<div style={styles.formGroup}>

<label style={styles.label}>Name</label>

<input

style={styles.input}

placeholder="Enter name"

value={form.name}

onChange={(e) => setForm({ ...form, name: e.target.value })}

/>

</div>

{operation === 'create' && (

<div style={styles.formGroup}>

<label style={styles.label}>Email (Gmail only)</label>

<input

style={styles.input}

placeholder="Enter Gmail address"

value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}

/>

</div>

)}

{operation === 'update' && (

<div style={styles.formGroup}>

<label style={styles.label}>Email</label>

<input

style={styles.input}

value={form.email}

disabled

/>

<small style={{color: '#777', marginTop: 5}}>Email cannot be changed</small>

</div>

)}

<button style={styles.submitButton} type="submit">

{operation === 'update' ? 'Update User' : 'Create User'}

</button>

{form.email && (

<button

type="button"

style={styles.resetButton}

onClick={resetForm}
>

Cancel

</button>

)}

</form>

)}

{users.length > 0 && (

<div style={styles.userList}>

<div style={styles.userListHeader}>

{users.length} User{users.length !== 1 ? 's' : ''} {operation ? `(${operation} mode)` : ''}

</div>

<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>

{users.map(user => (

<li style={styles.listItem} key={user._id || user.email}>

<div style={styles.userInfo}>

<span style={styles.userName}>{user.name}</span>

<span style={styles.userEmail}>{user.email}</span>

</div>

<div style={styles.actionButtons}>

{operation === 'delete' && (

<button

style={styles.deleteButton}

onClick={() => handleDelete(user.email)}


>

Delete

</button>

)}

{operation === 'update' && (

<button

style={styles.editButton}

onClick={() => {

setForm({ name: user.name, email: user.email });

setEmailInput(user.email);

setOperation('update');

}}

>

Edit

</button>

)}

</div>

</li>

))}

</ul>

</div>

)}

{users.length === 0 && (


<div style={styles.noUsers}>

No users found. {operation === 'create' ? 'Create a new user to get started.' : 'Try a
different search or create a new user.'}

</div>

)}

</div>

);

export default App;

frontend/index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

Backend/server.js

const express = require('express');


const mongoose = require('mongoose');

const cors = require('cors');

require('dotenv').config();

const app = express();

app.use(cors());

app.use(express.json());

// MongoDB Connection

mongoose.connect(process.env.MONGODB_PATH, {

useNewUrlParser: true,

useUnifiedTopology: true,

})

.then(() => console.log('✅ MongoDB Connected'))

.catch((err) => console.error('❌ MongoDB connection error:', err));

// User Schema

const UserSchema = new mongoose.Schema({

name: {

type: String,

required: [true, 'Name is required'],

trim: true

},

email: {

type: String,

required: [true, 'Email is required'],


unique: true,

trim: true,

lowercase: true,

validate: {

validator: function(v) {

return v.includes('@gmail.com');

},

message: props => `${props.value} is not a valid Gmail address!`

},

}, { timestamps: true });

const User = mongoose.model('User', UserSchema);

// Logging middleware for debugging

app.use((req, res, next) => {

console.log(`${req.method} ${req.url}`);

if (req.body && Object.keys(req.body).length > 0) {

console.log('Request body:', req.body);

if (req.params && Object.keys(req.params).length > 0) {

console.log('Request params:', req.params);

next();

});
// Get all users

app.get('/users', async (req, res) => {

try {

const users = await User.find().sort({ createdAt: -1 });

console.log(`Found ${users.length} users`);

res.json(users);

} catch (error) {

console.error('Error fetching users:', error);

res.status(500).json({ error: 'Failed to fetch users', details: error.message });

});

// Get one user by email

app.get('/users/:email', async (req, res) => {

try {

const email = req.params.email.toLowerCase();

console.log(`Looking for user with email: ${email}`);

const user = await User.findOne({ email });

if (!user) {

console.log(`User not found: ${email}`);

return res.status(404).json({ error: 'User not found' });

console.log(`User found:`, user);

res.json(user);
} catch (error) {

console.error('Error fetching user:', error);

res.status(500).json({ error: 'Failed to fetch user', details: error.message });

});

// Create user

app.post('/users', async (req, res) => {

try {

const { name, email } = req.body;

console.log('Creating user:', { name, email });

// Validate inputs

if (!name || !name.trim()) {

return res.status(400).json({ error: 'Name is required' });

if (!email || !email.trim()) {

return res.status(400).json({ error: 'Email is required' });

if (!email.includes('@gmail.com')) {

return res.status(400).json({ error: 'Only Gmail addresses are allowed' });

// Check if user already exists

const exists = await User.findOne({ email: email.toLowerCase() });

if (exists) {
console.log(`User already exists: ${email}`);

return res.status(400).json({ error: 'User with this email already exists' });

// Create new user

const newUser = new User({

name: name.trim(),

email: email.toLowerCase().trim()

});

await newUser.save();

console.log('User created successfully:', newUser);

res.status(201).json({

message: 'User created successfully',

user: newUser

});

} catch (error) {

console.error('Error creating user:', error);

// Handle MongoDB validation errors

if (error.name === 'ValidationError') {

const messages = Object.values(error.errors).map(val => val.message);

return res.status(400).json({ error: messages.join(', ') });

res.status(500).json({ error: 'Failed to create user', details: error.message });

}
});

// Update user by email - FIXED VERSION

app.put('/users/:email', async (req, res) => {

try {

const email = req.params.email.toLowerCase().trim();

const { name } = req.body;

console.log(`Updating user ${email} with new name: ${name}`);

// Validate name

if (!name || !name.trim()) {

return res.status(400).json({ error: 'Name is required' });

// Find user first to ensure they exist

const existingUser = await User.findOne({ email });

if (!existingUser) {

console.log(`Update failed: User not found with email ${email}`);

return res.status(404).json({ error: 'User not found' });

// Update using direct update for more reliable updates

const result = await User.updateOne(

{ email },

{ $set: { name: name.trim() } }

);

console.log('Update result:', result);


if (result.matchedCount === 0) {

return res.status(404).json({ error: 'User not found' });

// Get the updated user to return in response

const updatedUser = await User.findOne({ email });

console.log('User updated successfully:', updatedUser);

res.json({

message: 'User updated successfully',

user: updatedUser

});

} catch (error) {

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

if (error.name === 'ValidationError') {

const messages = Object.values(error.errors).map(val => val.message);

return res.status(400).json({ error: messages.join(', ') });

res.status(500).json({ error: 'Failed to update user', details: error.message });

});

// Delete user by email

app.delete('/users/:email', async (req, res) => {

try {

const email = req.params.email.toLowerCase().trim();


console.log(`Deleting user with email: ${email}`);

const user = await User.findOneAndDelete({ email });

if (!user) {

console.log(`Delete failed: User not found with email ${email}`);

return res.status(404).json({ error: 'User not found' });

console.log('User deleted successfully:', user);

res.json({

message: 'User deleted successfully',

user

});

} catch (error) {

console.error('Error deleting user:', error);

res.status(500).json({ error: 'Failed to delete user', details: error.message });

});

// Error handling middleware

app.use((err, req, res, next) => {

console.error('Server error:', err.stack);

res.status(500).json({

error: 'Internal server error',

message: process.env.NODE_ENV === 'development' ? err.message : 'Something went


wrong'

});
});

// Start server

const PORT = process.env.PORT || 5050;

app.listen(PORT, () => {

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

console.log('$ User management API endpoints:');

console.log(` GET /users`);

console.log(` GET /users/:email`);

console.log(` POST /users`);

console.log(` PUT /users/:email`);

console.log(` DELETE /users/:email`);

});

OUTPUT :
Create

Read

UPDATE:
DELETE

MONGODB CLOUD (data collection)


PROGRAM :

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Currency Converter</title>

<style>

body {

font-family: 'Segoe UI', sans-serif;

background: linear-gradient(to right, #74ebd5, #acb6e5);

margin: 0;

padding: 2rem;

.container {

max-width: 420px;

margin: auto;

background: white;

padding: 2rem;

border-radius: 12px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}
h2 {

text-align: center;

margin-bottom: 1.5rem;

color: #333;

label {

font-weight: bold;

display: block;

margin: 0.5rem 0 0.2rem;

select, input, button {

width: 100%;

padding: 0.6rem;

margin-bottom: 1rem;

border: 1px solid #ccc;

border-radius: 6px;

font-size: 1rem;

button {

background-color: #3498db;

color: white;

border: none;

cursor: pointer;
}

button:hover {

background-color: #2980b9;

#result {

text-align: center;

font-size: 1.2rem;

margin-top: 1rem;

color: green;

.spinner {

display: none;

text-align: center;

</style>

</head>

<body>

<div class="container">

<h2>Currency Converter</h2>

<label for="amount">Amount</label>

<input type="number" id="amount" placeholder="Enter amount" />

<label for="from">From Currency</label>

<select id="from">
<option value="USD">USD - US Dollar</option>

<option value="EUR">EUR - Euro</option>

<option value="INR">INR - Indian Rupee</option>

<option value="GBP">GBP - British Pound</option>

<option value="JPY">JPY - Japanese Yen</option>

</select>

<label for="to">To Currency</label>

<select id="to">

<option value="INR">INR - Indian Rupee</option>

<option value="USD">USD - US Dollar</option>

<option value="EUR">EUR - Euro</option>

<option value="GBP">GBP - British Pound</option>

<option value="JPY">JPY - Japanese Yen</option>

</select>

<button onclick="convert()">Convert</button>

<div class="spinner" id="spinner">Converting...</div>

<h3 id="result"></h3>

</div>

<script>

const exchangeRates = {

USD: { EUR: 0.93, INR: 83.4, GBP: 0.80, JPY: 156.23 },

EUR: { USD: 1.08, INR: 89.7, GBP: 0.86, JPY: 168.47 },

INR: { USD: 0.012, EUR: 0.011, GBP: 0.0096, JPY: 1.88 },


GBP: { USD: 1.25, EUR: 1.16, INR: 104.5, JPY: 196.0 },

JPY: { USD: 0.0064, EUR: 0.0059, INR: 0.53, GBP: 0.0051 }

};

function convert() {

const amount = parseFloat(document.getElementById('amount').value.trim());

const from = document.getElementById('from').value;

const to = document.getElementById('to').value;

const resultElement = document.getElementById('result');

const spinner = document.getElementById('spinner');

resultElement.innerText = '';

resultElement.style.color = 'green';

if (isNaN(amount) || amount <= 0) {

resultElement.style.color = 'red';

resultElement.innerText = 'Please enter a valid amount.';

return;

spinner.style.display = 'block';

setTimeout(() => {

spinner.style.display = 'none';

if (from === to) {

resultElement.innerText = `Converted Amount: ${amount.toFixed(2)} ${to}`;

return;

}
const rate = exchangeRates[from]?.[to];

if (!rate) {

resultElement.style.color = 'red';

resultElement.innerText = 'Conversion rate not available.';

return;

const converted = amount * rate;

resultElement.innerText = `Converted Amount: ${converted.toFixed(2)} ${to}`;

}, 500); // Simulated delay

</script>

</body>

</html>

Server.js

const express = require('express');

const app = express();

const path = require('path');

const PORT = 5050;

// Updated exchange rates (static for now)

const exchangeRates = {

USD: { EUR: 0.93, INR: 83.4, GBP: 0.80, JPY: 156.23 },

EUR: { USD: 1.08, INR: 89.7, GBP: 0.86, JPY: 168.47 },


INR: { USD: 0.012, EUR: 0.011, GBP: 0.0096, JPY: 1.88 },

GBP: { USD: 1.25, EUR: 1.16, INR: 104.5, JPY: 196.0 },

JPY: { USD: 0.0064, EUR: 0.0059, INR: 0.53, GBP: 0.0051 }

};

app.use(express.static(path.join(__dirname)));

app.get('/convert', (req, res) => {

const { from, to, amount } = req.query;

// Validation

if (!from || !to || !amount || isNaN(amount) || amount <= 0) {

return res.status(400).json({ error: 'Invalid input parameters' });

// Same currency

if (from === to) {

return res.json({ result: parseFloat(amount).toFixed(2) });

const rate = exchangeRates[from]?.[to];

if (!rate) {

return res.status(400).json({ error: 'Unsupported currency conversion' });

const converted = (parseFloat(amount) * rate).toFixed(2);

// Logging for server monitoring

console.log(`Converted ${amount} ${from} to ${converted} ${to}`);

res.json({ result: converted });


});

app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, 'index.html'));

});

// Default fallback for any invalid route

app.use((req, res) => {

res.status(404).send('404 - Page not found');

});

app.listen(PORT, () => {

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

});

OUTPUT :
IMDB :
{
"name": "Ananya Sharma",
"roll_no": "CS101",
"year": 2023,
"department": "Computer Science",
"courses": [
{
"name": "Data Structures",
"grade": "A"
},
{
"name": "Web Development",
"grade": "B+"
}
],
"attendance": 92,
"hostel": true
}
{
"name": "Rahul Verma",
"roll_no": "EC202",
"year": 2023,
"department": "Electronics",
"courses": [
{
"name": "Microprocessors",
"grade": "B"
},
{
"name": "Digital Systems",
"grade": "A"
}
],
"attendance": 85,
"hostel": false
}
QUERIES :

1. Add a new student named "Kavya Ramesh" in the Mechanical


department.

INPUT :

OUTPUT :
2. FIND – List all students in the Computer Science department.

INPUT:

OUTPUT :

3. UPDATE - Update attendance of "Rahul Verma" to 90%.

INPUT :
OUTPUT :

4. DELETE - Delete student with roll number "ME303".


INPUT :

OUTPUT :

5. SORT - Display students sorted by attendance from highest to lowest.

INPUT :
OUTPUT :

6. AGGREGATE – Find average attendance of students in each department.


INPUT :

OUTPUT :
7. Find students enrolled in the course "Web Development"
INPUT :

OUTPUT :

8. Find a student by roll number.

INPUT :

OUTPUT :
IMDB :
use healthcare
// Patients Collection
{
"_id": ObjectId("609df50827baea5d70a3d8a6"),
"name": "Jane Doe"
, "gender": "Female",
"date_of_birth": "1980-01-15",
"contact_number": "+1234567890",
"email": "[email protected]",
"address": "789 Elm St, Anytown, CA, 54321" }
// Medical Records Collection
{
"_id": ObjectId("609df50827baea5d70a3d8b4"),
"patient_id": ObjectId("609df50827baea5d70a3d8a6"),
"doctor_name": "Dr. Smith",
"diagnosis": "Hypertension",
"treatments": ["Medication", "Diet changes"],
"date": "2022-05-10"
}
// Appointments Collection
{
"_id": ObjectId("609df50827baea5d70a3d8c5"),
"patient_id": ObjectId("609df50827baea5d70a3d8a6"),
"doctor_name": "Dr. Johnson",
"appointment_date": "2024-05-15",
"status": "Scheduled"
}

QUERIES :

A. Insert more collections

INPUT :
OUTPUT :

B. Appointments on a Specific Date (2024-05-15)


INPUT :
OUTPUT :

C. Latest Appointment for Jane Doe

INPUT :

OUTPUT :

D. Total Medical Records per Patient


INPUT:

OUTPUT :

E. List All Patients Diagnosed with a Specific Condition (e.g.,


"Diabetes")

INPUT:
OUTPUT :

F. Get All Treatments Prescribed to Jane Doe


INPUT :
OUTPUT :

G. Count of Patients by Gender


INPUT :

OUTPUT :

You might also like