Scribd
Upload
21 views29 pages

All Exp

The document outlines the design and implementation of multiple webpages for an educational institution, including sections for home, login, registration, about, departments, faculty, student information, and placement details. It includes HTML and CSS code for the layout and style of each page, as well as JavaScript for form validation using regular expressions. The design emphasizes user-friendly navigation and organized presentation of information relevant to students and faculty.

Uploaded by

prasadrc816
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
21 views29 pages

All Exp

The document outlines the design and implementation of multiple webpages for an educational institution, including sections for home, login, registration, about, departments, faculty, student information, and placement details. It includes HTML and CSS code for the layout and style of each page, as well as JavaScript for form validation using regular expressions. The design emphasizes user-friendly navigation and organized presentation of information relevant to students and faculty.

Uploaded by

prasadrc816
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/ 29

(1) Design a webpage for an educational institution including:

 Home Page
 Login Page
 Registration Page
 About Institution

<!DOCTYPE html>
<html>
<head>
<title>Simple Education Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Navigation */
nav {
background: #1a73e8;
padding: 15px;
}

nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}

/* Sections */
.section {
padding: 50px 20px;
text-align: center;
}

/* Home Page */
#home {
background: #f0f4f8;
}

/* Forms */
.form-box {
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

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

button {
background: #1a73e8;
color: white;
padding: 10px;
border: none;
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#login">Login</a>
<a href="#register">Register</a>
</nav>

<!-- Home Page -->


<div id="home" class="section">
<h1>Welcome to ABC School</h1>
<p>Learn • Grow • Succeed</p>
</div>

<!-- About Page -->


<div id="about" class="section">
<h2>About Us</h2>
<p>We are a leading educational institution providing quality education since
1990.</p>
<p>📍 Location: City Center</p>
<p>📞 Contact: 123-456-7890</p>
</div>

<!-- Login Page -->


<div id="login" class="section">
<div class="form-box">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button>Login</button>
</form>
</div>
</div>

<!-- Registration Page -->


<div id="register" class="section">
<div class="form-box">
<h2>Register</h2>
<form>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button>Register</button>
</form>
</div>
</div>
</body>
</html>

(2) Design webpages to display details of:


 Departments
 Faculty
 Student personal info
 Placement staff

<!DOCTYPE html>
<html>
<head>
<title>College Management System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Navigation */
nav {
background: #2c3e50;
padding: 15px;
position: sticky;
top: 0;
}

nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}

/* Sections */
.section {
padding: 30px 20px;
margin: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

/* Department Cards */
.dept-card {
background: #f9f9f9;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #3498db;
}

/* Faculty Cards */
.faculty-card {
background: #ecf0f1;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}

/* Student Info */
.student-info {
background: #f0f8ff;
padding: 20px;
margin: 10px 0;
}

/* Placement Staff */
.placement-staff {
background: #e8f5e9;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<nav>
<a href="#departments">Departments</a>
<a href="#faculty">Faculty</a>
<a href="#student">Student Info</a>
<a href="#placement">Placement</a>
</nav>

<!-- Departments Section -->


<div id="departments" class="section">
<h2>Departments</h2>
<div class="dept-card">
<h3>Computer Science</h3>
<p>Courses Offered: 12 | Students: 450</p>
</div>
<div class="dept-card">
<h3>Electrical Engineering</h3>
<p>Courses Offered: 8 | Students: 300</p>
</div>
</div>

<!-- Faculty Section -->


<div id="faculty" class="section">
<h2>Faculty Members</h2>
<div class="faculty-card">
<h3>Dr. Smith Johnson</h3>
<p>Subject: Data Structures | Email: [email protected]</p>
</div>
<div class="faculty-card">
<h3>Prof. Alice Brown</h3>
<p>Subject: Digital Electronics | Email: [email protected]</p>
</div>
</div>

<!-- Student Info Section -->


<div id="student" class="section">
<h2>Student Information</h2>
<div class="student-info">
<p><strong>Name:</strong> John Doe</p>
<p><strong>Roll No:</strong> CS2021001</p>
<p><strong>Course:</strong> B.Tech Computer Science</p>
<p><strong>Contact:</strong> [email protected]</p>
</div>
</div>

<!-- Placement Section -->


<div id="placement" class="section">
<h2>Placement Staff</h2>
<div class="placement-staff">
<h3>Mr. Robert Taylor</h3>
<p>Position: Placement Officer | Contact: [email protected]</p>
</div>
<div class="placement-staff">
<h3>Ms. Sarah Wilson</h3>
<p>Position: Career Counselor | Contact: [email protected]</p>
</div>
</div>
</body>
</html>

(3) Design webpages for:


 Student academic info
 Training and placement details
 Student chapters
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Navigation */
nav {
background: #2c3e50;
padding: 15px;
position: sticky;
top: 0;
}

nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}

/* Sections */
.section {
padding: 30px 20px;
margin: 20px;
}

/* Academic Info */
.academic-info {
background: #f0f8ff;
padding: 20px;
border-left: 4px solid #3498db;
margin: 10px 0;
}

/* Placement Card */
.placement-card {
background: #e8f5e9;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}

/* Student Chapter Card */


.chapter-card {
background: #fff3e0;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border-left: 4px solid #ffa726;
}
</style>
</head>
<body>
<nav>
<a href="#academic">Academic Info</a>
<a href="#placement">Placement</a>
<a href="#chapters">Student Chapters</a>
</nav>

<!-- Academic Information -->


<div id="academic" class="section">
<h2>Academic Information</h2>
<div class="academic-info">
<h3>Current Semester: 5</h3>
<p><strong>CGPA:</strong> 8.9/10</p>
<p><strong>Courses:</strong>
<br>- Database Systems
<br>- Operating Systems
<br>- Software Engineering
</p>
</div>
</div>

<!-- Training & Placement -->


<div id="placement" class="section">
<h2>Training & Placement</h2>
<div class="placement-card">
<h3>Upcoming Drives</h3>
<p><strong>Company:</strong> Tech Corp International</p>
<p><strong>Date:</strong> 15 March 2024</p>
<p><strong>Eligibility:</strong> CGPA 8.0+</p>
</div>

<div class="placement-card">
<h3>Placement Statistics</h3>
<p>Total Offers: 120+</p>
<p>Highest Package: ₹18 LPA</p>
</div>
</div>

<!-- Student Chapters -->


<div id="chapters" class="section">
<h2>Student Chapters</h2>
<div class="chapter-card">
<h3>IEEE Student Branch</h3>
<p><strong>Coordinator:</strong> Prof. Ramesh Kumar</p>
<p><strong>Activities:</strong> Tech Workshops, Hackathons</p>
</div>

<div class="chapter-card">
<h3>Entrepreneurship Cell</h3>
<p><strong>Coordinator:</strong> Dr. Anita Sharma</p>
<p><strong>Activities:</strong> Startup Competitions, Mentorship</p>
</div>
</div>
</body>
</html>

(4) Create a login page with:


 Username and password fields
 Submit button
 "Forgot password" and "Signup" hyperlinks

<!DOCTYPE html>
<html>
<head>
<title>Simple Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}

.login-container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}

h2 {
text-align: center;
color: #1c1e21;
margin-bottom: 20px;
}

.input-group {
margin-bottom: 15px;
}

input {
width: 100%;
padding: 12px;
margin-top: 8px;
border: 1px solid #dddfe2;
border-radius: 6px;
box-sizing: border-box;
}

button {
width: 100%;
padding: 12px;
background-color: #1877f2;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
}

button:hover {
background-color: #166fe5;
}
.links {
text-align: center;
margin-top: 15px;
}

a{
color: #1877f2;
text-decoration: none;
font-size: 14px;
}

a:hover {
text-decoration: underline;
}

.signup-link {
display: block;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<div class="input-group">
<input type="text" placeholder="Username" required>
</div>

<div class="input-group">
<input type="password" placeholder="Password" required>
</div>

<button type="submit">Log In</button>

<div class="links">
<a href="#">Forgot Password?</a>
</div>

<div class="signup-link">
<span>Don't have an account? </span>
<a href="#">Sign Up</a>
</div>
</form>
</div>
</body>
</html>

(5)Implement form validation using JavaScript and regular


expressions for login and registration forms.

<!DOCTYPE html>
<html>
<head>
<title>Simple Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
}
.error {
color: red;
font-size: 0.9em;
margin-top: 5px;
}
button {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Login Form -->
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateLogin()">
<div class="form-group">
<label>Email:</label>
<input type="text" id="loginEmail">
<div class="error" id="loginEmailError"></div>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="loginPassword">
<div class="error" id="loginPasswordError"></div>
</div>
<button type="submit">Login</button>
</form>

<!-- Registration Form -->


<h2>Registration</h2>
<form id="regForm" onsubmit="return validateRegistration()">
<div class="form-group">
<label>Full Name:</label>
<input type="text" id="regName">
<div class="error" id="nameError"></div>
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" id="regEmail">
<div class="error" id="emailError"></div>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="regPassword">
<div class="error" id="passwordError"></div>
</div>
<div class="form-group">
<label>Confirm Password:</label>
<input type="password" id="regConfirmPassword">
<div class="error" id="confirmPasswordError"></div>
</div>
<button type="submit">Register</button>
</form>
<script>
// Regular expressions
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const nameRegex = /^[A-Za-z\s]{3,}$/;
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;

function showError(elementId, message) {


document.getElementById(elementId).textContent = message;
}

function clearErrors() {
document.querySelectorAll('.error').forEach(error => {
error.textContent = '';
});
}

// Login Validation
function validateLogin() {
clearErrors();
let isValid = true;

const email = document.getElementById('loginEmail').value;


const password = document.getElementById('loginPassword').value;

if (!emailRegex.test(email)) {
showError('loginEmailError', 'Invalid email address');
isValid = false;
}

if (password.length < 6) {
showError('loginPasswordError', 'Password must be at least 6 characters');
isValid = false;
}

if (isValid) {
alert('Login successful!');
return true;
}
return false;
}

// Registration Validation
function validateRegistration() {
clearErrors();
let isValid = true;

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


const email = document.getElementById('regEmail').value;
const password = document.getElementById('regPassword').value;
const confirmPassword = document.getElementById('regConfirmPassword').value;

if (!nameRegex.test(name)) {
showError('nameError', 'Invalid name (letters and spaces only)');
isValid = false;
}

if (!emailRegex.test(email)) {
showError('emailError', 'Invalid email address');
isValid = false;
}

if (!passwordRegex.test(password)) {
showError('passwordError', 'Password must be 6+ characters with at least 1 letter and 1
number');
isValid = false;
}

if (password !== confirmPassword) {


showError('confirmPasswordError', 'Passwords do not match');
isValid = false;
}

if (isValid) {
alert('Registration successful!');
return true;
}
return false;
}
</script>
</body>
</html>
(6) Set up Node.js development environment and run sample console
programs.
Install Node.js on computer?

1. Visit Node.js official website


2. Download the LTS (Long-Term Support) version for your OS
(Windows/Mac/Linux)
3. Run the installer with default settings
4. Verify installation by opening a terminal and running:
bash
node -v # Should show version (e.g., v20.14.0)
npm -v # Should show npm version (e.g., 10.8.0)

create a simple Node.js console program?


Create a project folder:
bash
mkdir my-first-node-app
cd my-first-node-app

Initialize a Node.js project:


bash
npm init -y # Creates package.json automatically

Create app.js with this code:


javascript
console.log("Hello from Node.js!");
const currentTime = new Date().toLocaleTimeString();
console.log(`Current time: ${currentTime}`);

Run the Node.js program

In your terminal (inside the project folder):


bash
node app.js

Expected Output:
Hello from Node.js!
Current time: 3:45:12 PM
Handle "Command not found" errors

If node or npm commands aren't recognized:


1. Restart your terminal/command prompt
2. Check Node.js installation path (Windows: C:\Program Files\nodejs)
3. Add Node.js to system PATH if missing

Use external packages


Install a package (e.g., lodash):
bash
npm install lodash

Use it in app.js:
javascript
const _ = require('lodash');
const numbers = [1, 2, 3, 4];
console.log(_.sum(numbers)); // Output: 10

Automatically restart Node.js on file changes

Install nodemon globally:


bash
npm install -g nodemon

Run your program with:


bash
nodemon app.js

(7) Create different modules using Node.js.

Math Module
File: mathUtils.js
javascript
// Add two numbers
const add = (a, b) => a + b;
// Subtract two numbers
const subtract = (a, b) => a - b;

// Export the functions


module.exports = { add, subtract };

String Module
File: stringUtils.js
javascript

// Capitalize first letter


const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

// Reverse a string
const reverse = (str) => str.split('').reverse().join('');

// Export both functions


module.exports = { capitalize, reverse };

Main File Using Modules


File: app.js
javascript

// Import modules
const math = require('./mathUtils');
const string = require('./stringUtils');

// Use math functions


console.log(math.add(5, 3)); // Output: 8
console.log(math.subtract(10, 4)); // Output: 6

// Use string functions


console.log(string.capitalize("hello")); // Output: "Hello"
console.log(string.reverse("node")); // Output: "edon"

Run the Program


bash

node app.js

Exporting a Default Function


File: greet.js
javascript
// Default export
module.exports = (name) => `Hello, ${name}!`;

Usage in app.js:
javascript

const greet = require('./greet');


console.log(greet("Alice")); // Output: "Hello, Alice!"

Key Concepts:
1. module.exports: Export functions/objects from a file
2. require(): Import modules into other files
3. File Structure:
project-folder/
├── mathUtils.js
├── stringUtils.js
├── greet.js
└── app.js

(8) Set up React environment using:


 Webpack and Babel
create-react-app command

Step 1: Install Node.js


1. Download from nodejs.org
2. Install with default settings
3. Verify installation:
bash
node -v # Should show v18.x or higher
npm -v # Should show 9.x or higher

Step 2: Create React App


bash
npx create-react-app my-first-app
cd my-first-app
npm start

This automatically sets up:


 Webpack (bundler)
 Babel (transpiler)
 Development server
 Basic project structure

Key Files/Folders
my-first-app/
├── node_modules/ # Dependencies
├── public/ # Static assets
├── src/ # React components
│ ├── App.js
│ └── index.js
├── package.json # Project config
└── package-lock.json

Basic Commands
Command Description

npm start Start development server

npm run build Create production build

npm test Run tests

⚠️Advanced: Show hidden


npm run eject
configs

Manual Setup (For Learning)


If you want to understand Webpack/Babel configuration:
1. Create project folder
bash
mkdir react-manual-setup
cd react-manual-setup
npm init -y

2. Install dependencies
bash
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader
@babel/core @babel/preset-env @babel/preset-react

3. Create webpack.config.js
javascript
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
};

4. Create .babelrc
json
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

Why Use create-react-app?


 ✅ No manual configuration needed
 ✅ Built-in optimizations
 ✅ Hot reloading
 ✅ Test setup included
 ✅ Easy updates
For beginners: Stick with create-react-app! The manual setup is just for
understanding how things work under the hood.

Troubleshooting
1. Clear npm cache if needed:
bash
npm cache clean --force

2. Always use Node.js LTS version


3. Check console for specific error messages

(9)Implement State and Props in React.js.

1. Props (Parent to Child Communication)


Parent Component (App.js):
javascript
import ChildComponent from './ChildComponent';

function App() {
return (
<div>
<ChildComponent message="Hello from Parent!" user={{ name: "Alice", age:
25 }} />
</div>
);
}

Child Component (ChildComponent.js):


javascript
function ChildComponent(props) {
return (
<div>
<h2>{props.message}</h2>
<p>Name: {props.user.name}, Age: {props.user.age}</p>
</div>
);
}

Key Points:
 Props are read-only
 Passed from parent to child
 Can be strings, numbers, objects, or functions

2. State (Component's Internal Data)


Counter Component (Counter.js):
javascript
import { useState } from 'react';

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

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}

Key Points:
 State is mutable using setState or state setters
 Created with useState hook
 Triggers re-render when updated

3. Combining State and Props


Parent (App.js):
javascript
function App() {
const [parentCount, setParentCount] = useState(0);

return (
<div>
<Counter
currentCount={parentCount}
updateCount={setParentCount}
/>
</div>
);
}

Child (Counter.js):
javascript
function Counter({ currentCount, updateCount }) {
return (
<div>
<p>Parent Count: {currentCount}</p>
<button onClick={() => updateCount(currentCount + 1)}>
Update Parent Count
</button>
</div>
);
}

Key Differences
Props State

Passed from parent Managed within


component component

Immutable Mutable

Used for communication Used for internal data

Rules to Remember
1. Never modify props directly
2. Use state for values that change over time
3. Lift state up for shared data between components
4. Use prop-types for type checking

(10) Create different types of Forms using React.js.

1. Basic Text Form


javascript

import { useState } from 'react';

function TextForm() {
const [name, setName] = useState('');

const handleSubmit = (e) => {


e.preventDefault();
alert(`Submitted name: ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

2. Form with Multiple Input Types


javascript

function MultiInputForm() {
const [formData, setFormData] = useState({
email: '',
password: '',
rememberMe: false
});

const handleChange = (e) => {


const { name, value, type, checked } = e.target;
setFormData(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : value
}));
};

const handleSubmit = (e) => {


e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Email"
value={formData.email}
onChange={handleChange}
/>

<input
type="password"
name="password"
placeholder="Password"
value={formData.password}
onChange={handleChange}
/>

<label>
<input
type="checkbox"
name="rememberMe"
checked={formData.rememberMe}
onChange={handleChange}
/>
Remember me
</label>

<button type="submit">Login</button>
</form>
);
}

3. Dropdown (Select) Form


javascript

function SelectForm() {
const [selectedOption, setSelectedOption] = useState('');
return (
<form>
<label>
Choose a course:
<select
value={selectedOption}
onChange={(e) => setSelectedOption(e.target.value)}
>
<option value="">Select...</option>
<option value="react">React</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
</select>
</label>
<p>Selected: {selectedOption}</p>
</form>
);
}

4. Radio Buttons Form


javascript

function RadioForm() {
const [gender, setGender] = useState('');

return (
<form>
<label>
<input
type="radio"
value="male"
checked={gender === 'male'}
onChange={(e) => setGender(e.target.value)}
/>
Male
</label>

<label>
<input
type="radio"
value="female"
checked={gender === 'female'}
onChange={(e) => setGender(e.target.value)}
/>
Female
</label>

<p>Selected gender: {gender}</p>


</form>
);
}

5. Form Validation
javascript

function ValidatedForm() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');

const handleSubmit = (e) => {


e.preventDefault();
if (!email.includes('@')) {
setError('Invalid email address');
} else {
setError('');
// Submit form
}
};

return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email"
/>
{error && <div style={{ color: 'red' }}>{error}</div>}
<button type="submit">Submit</button>
</form>
);
}

Key Concepts:

1. Controlled Components: Form inputs controlled by React state

2. State Management: Use useState hook for form data

3. Form Submission: Handle with onSubmit event

4. Input Types:
o Text: <input type="text">

o Email: <input type="email">

o Password: <input type="password">

o Checkbox: <input type="checkbox">

o Radio: <input type="radio">

o Select: <select> with <option>

You might also like