Exp 1 - HTML: Elements: Frames, Forms, Multimedia
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements: Frames, Forms, and Multimedia</title>
</head>
<body>
<h1>HTML Example: Frames, Forms, and Multimedia</h1>
<section>
<h2>Frames (Using iframe)</h2>
<p>This iframe embeds an external website:</p>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/aFsGDcy-6hc" frameborder="0"
allowfullscreen></iframe>
</section>
<section>
<h2>Form Example</h2>
<p>Please fill out the form below:</p>
<form action="/submit" method="POST">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</section>
<section>
<h2>Multimedia Example</h2>
<p>Here is an embedded video and an audio file:</p>
<video width="600" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</section>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
Exp 2 - HTML: Elements: Formatting, Images, Tables, List,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1, h2 {
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000;
}
th, td {
padding: 8px;
text-align: left;
}
img {
width: 200px;
height: auto;
}
ul, ol {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- Heading Elements -->
<h1>HTML Elements: Formatting, Images, Tables, and Lists</h1>
<!-- Formatting Elements -->
<p>This is a <strong>bold</strong> text and this is an <em>italicized</em>
text. You can also use <u>underlined</u> text and <mark>highlight</mark> text.</p>
<!-- Image Element -->
<h2>Images</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcStQzF98UujOWboTlrZveisnadHSE1V-K8ASg&s" alt="Sample Image">
<p>This is an example of an image element with an alternative text in case the
image fails to load.</p>
<!-- Table Element -->
<h2>Table</h2>
<table>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>Description of item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>Description of item 2</td>
<td>$15</td>
</tr>
<tr>
<td>Item 3</td>
<td>Description of item 3</td>
<td>$20</td>
</tr>
</table>
<!-- List Elements -->
<h2>Unordered List</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
-----------------------------------------------------------------------------------
----------------------------------
Exp 3 - CSS3: Color, Background, Fonts, Tables, lists, CSS3 selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Elements Example</title>
<style>
/* CSS3: Color */
body {
color: #333;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
h1 {
color: #4CAF50;
}
h2 {
color: #2196F3;
}
p {
color: #555;
}
/* CSS3: Background */
.background-example {
background-color: #ffeb3b;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
/* CSS3: Fonts */
.font-example {
font-size: 1.2em;
font-family: 'Courier New', Courier, monospace;
}
/* CSS3: Tables */
table {
width: 100%;
border-collapse: collapse;
background-color: #f9f9f9;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* CSS3: Lists */
ul, ol {
margin: 15px;
padding: 10px;
background-color: #fff;
}
ul li, ol li {
margin-bottom: 8px;
}
/* CSS3: Selectors */
/* Element Selector */
h1 {
text-align: center;
text-transform: uppercase;
}
/* Class Selector */
.highlight {
color: #ff5722;
}
/* ID Selector */
#important-note {
color: #e91e63;
font-weight: bold;
}
/* Group Selector */
h2, p {
margin-bottom: 15px;
}
/* Descendant Selector */
div ul li {
font-size: 18px;
}
/* Attribute Selector */
a[target="_blank"] {
color: #03A9F4;
text-decoration: none;
}
a[target="_blank"]:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Heading and Paragraph -->
<h1>CSS3 Elements Example</h1>
<p>This is an example of using <span class="highlight">CSS3</span> for styling
HTML elements like color, background, fonts, tables, and lists.</p>
<p id="important-note">Important: CSS3 is highly powerful for web design!</p>
<!-- Background Example -->
<div class="background-example">
<h2>Background Example</h2>
<p>The background of this div has been styled with a yellow color and
rounded corners.</p>
</div>
<!-- Font Example -->
<h2>Font Example</h2>
<p class="font-example">This text uses the Courier New font with an increased
size of 1.2em.</p>
<!-- Table Example -->
<h2>Table Example</h2>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
<td>2</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
<td>1</td>
</tr>
<tr>
<td>Item 3</td>
<td>$25</td>
<td>3</td>
</tr>
</table>
<!-- List Example -->
<h2>Unordered List Example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h2>Ordered List Example</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<!-- CSS3 Selectors Example -->
<h2>CSS3 Selectors Example</h2>
<p>You can use different CSS selectors such as element, class, ID, descendant,
and attribute selectors.</p>
<p>Check this <a href="https://www.example.com" target="_blank">example
link</a> that opens in a new tab.</p>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------
Exp 4 - Bootstrap: BootstrapGrid system, Forms, Button, Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap Grid System Example -->
<div class="container my-5">
<h2>Bootstrap Grid System</h2>
<div class="row">
<div class="col-md-4 bg-light border p-3">
Column 1
</div>
<div class="col-md-4 bg-light border p-3">
Column 2
</div>
<div class="col-md-4 bg-light border p-3">
Column 3
</div>
</div>
</div>
<!-- Bootstrap Forms Example -->
<div class="container my-5">
<h2>Bootstrap Form Example</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email"
placeholder="
[email protected]">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"
placeholder="Your message"></textarea>
</div>
<!-- Bootstrap Button -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Bootstrap Button Variations -->
<div class="container my-5">
<h2>Bootstrap Buttons</h2>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<!-- Bootstrap JavaScript and dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/
[email protected]/dist/umd/popper.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.min.js"></
script>
</body>
</html>
-----------------------------------------------------------------------------------
---------------------------------
Exp 5 - Javascript: Variables, Operators, Conditions, Loops, Functions, Events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exp5 - JavaScript Basics</title>
<script>
// Function for addition (Variables, Operators, and Functions)
function add() {
var sum = parseInt(document.getElementById("first").value) +
parseInt(document.getElementById("second").value); // Variables &
Operators
document.getElementById("ans").value = sum;
}
// Function for division (Conditions and Functions)
function divis() {
var num11 = parseInt(document.getElementById("first").value);
var num22 = parseInt(document.getElementById("second").value);
document.getElementById("divi").value = num22 === 0 ? "Cannot divide by
zero!" : num11 / num22; // Condition
}
// Function for factorial (Loops and Functions)
function facto() {
var fact = 1, num1 = parseInt(document.getElementById("first1").value);
for (let i = num1; i > 0; i--) fact *= i; // Loop
document.getElementById("fact").value = fact;
}
// Event: Button click to get date and time
function date_time() {
document.getElementById("demo").innerHTML = new Date();
}
</script>
</head>
<body style="background-color: aliceblue;">
<h1 style="text-align: center;"><u>Exp5 - JavaScript Basics</u></h1>
<!-- Sum of Two Numbers -->
<div style="padding: 10px;">
<h2><u>Sum of Two Numbers</u></h2>
<p>Enter 1st number: <input type="number" id="first" placeholder="Enter 1st
number"></p>
<p>Enter 2nd number: <input type="number" id="second" placeholder="Enter
2nd number"></p>
<button onclick="add()">Add</button>
<p>Sum : <input id="ans" readonly></p>
</div>
<!-- Division -->
<div style="padding: 10px;">
<h2><u>Division</u></h2>
<p>Enter 1st number: <input type="number" id="first" placeholder="Enter 1st
number"></p>
<p>Enter 2nd number: <input type="number" id="second" placeholder="Enter
2nd number"></p>
<button onclick="divis()">Division</button>
<p>Division : <input id="divi" readonly></p>
</div>
<!-- Factorial -->
<div style="padding: 10px;">
<h2><u>Factorial</u></h2>
<p>Enter number: <input type="number" id="first1" placeholder="Enter
number"></p>
<button onclick="facto()">Find Factorial</button>
<p>Factorial : <input id="fact" readonly></p>
</div>
<!-- Date and Time -->
<h2><u>Date and Time</u></h2>
<button onclick="date_time()">Date Time</button>
<p id="demo"></p>
</body>
</html>
-----------------------------------------------------------------------------------
--------------------
Exp 6 - Javascript: Classes and Objects, Error handling, Validations, Arrays,
String, Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exp6 - JavaScript Advanced</title>
<script>
// Validation Function (Error handling and Validation)
function myFunction() {
let x = document.getElementById("numb").value;
document.getElementById("demo2").innerHTML = (isNaN(x) || x < 1 || x >
10) ? "Input not valid" : "Input OK"; // Validation
}
// Array Example (Array and Loop)
const arr = ["Meet", "Harsh", "Vineet", "Aryav"];
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("arrid").innerHTML = arr.join("<br>");
// Object Example (Object Creation)
const person = { firstName: "Meet", age: 20 };
document.getElementById("obj").innerHTML = `${person.firstName} is $
{person.age} years old.`;
// Date Example (Date handling)
const today = new Date();
document.getElementById("date").innerHTML = `Today's Date: $
{today.toDateString()}`;
// Class Example
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
getDetails() {
return `${this.name} is a ${this.species}.`;
}
}
const dog = new Animal("Buddy", "Dog");
document.getElementById("classObj").innerHTML = dog.getDetails();
});
</script>
</head>
<body style="background-color: aliceblue;">
<h1 style="text-align: center;"><u>Exp6 - JavaScript Advanced</u></h1>
<!-- For Loop through an Array -->
<h2><u>For Loop through an Array</u></h2>
<p id="arrid"></p>
<!-- Object Creation -->
<h2><u>Object Creation</u></h2>
<p id="obj"></p>
<!-- Date Display -->
<h2><u>Date</u></h2>
<p id="date"></p>
<!-- Class and Object -->
<h2><u>Class and Object Example</u></h2>
<p id="classObj"></p>
<!-- Validation -->
<h2><u>Validation</u></h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo2"></p>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------
Exp 7 - React: JSX, Components, Props, State, Forms
Steps to Run the Project:
in terminal type: npx create-react-app myapp
then type : cd myapp
then type: npm start
myapp
│
├── public/
│ └── index.html
│
├── src/
│ ├── components/
│ │ ├── Header.js
│ │ ├── UserForm.js
│ │ └── UserList.js
│ │ └── UserCard.js
│ │
│ ├── App.js
│ ├── index.js
│ └── index.css
│
└── package.json
FILE: src/App.js
import React, { useState } from 'react';
import Header from './components/Header';
import UserForm from './components/UserForm';
import UserList from './components/UserList';
function App() {
const [users, setUsers] = useState([]);
const addUser = (user) => {
setUsers([...users, user]);
};
return (
<div className="App">
<Header title="User Management App" />
<UserForm onAddUser={addUser} />
<UserList users={users} />
</div>
);
}
export default App;
FILE: components/Header.js (Stateless Functional Component with Props)
import React from 'react';
const Header = ({ title }) => {
return (
<header>
<h1>{title}</h1>
</header>
);
};
export default Header;
FILE: components/UserForm.js (Form Component with State)
import React, { useState } from 'react';
const UserForm = ({ onAddUser }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (name && email) {
onAddUser({ name, email });
setName('');
setEmail('');
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<button type="submit">Add User</button>
</form>
);
};
export default UserForm;
FILE:components/UserList.js (Passing Data through Props)
import React from 'react';
import UserCard from './UserCard';
const UserList = ({ users }) => {
return (
<div>
<h2>Users</h2>
{users.length === 0 ? (
<p>No users added yet.</p>
) : (
users.map((user, index) => (
<UserCard key={index} user={user} />
))
)}
</div>
);
};
export default UserList;
FILE: components/UserCard.js (Display Component with Props)
import React from 'react';
const UserCard = ({ user }) => {
return (
<div className="user-card">
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
);
};
export default UserCard;
FILE: src/index.css
.App {
font-family: sans-serif;
text-align: center;
}
form {
margin: 20px 0;
}
.user-card {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
-----------------------------------------------------------------------------------
------------------------
Exp 8 - React: Events, Routers, Refs, Keys.
IN TERMINAL TYPE:
npx create-react-app myapp
cd myapp
npm install react-router-dom
THEN type : npm start
myapp/
├── node_modules/
├── public/
├── src/
│ ├── components/
│ │ ├── EventHandler.js
│ │ ├── RefExample.js
│ │ ├── ListWithKeys.js
│ └── App.js
├── package.json
└── README.md
FILE: src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import EventHandler from './components/EventHandler';
import RefExample from './components/RefExample';
import ListWithKeys from './components/ListWithKeys';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/events">Events</Link></li>
<li><Link to="/refs">Refs</Link></li>
<li><Link to="/list">Keys</Link></li>
</ul>
</nav>
<Routes>
<Route path="/events" element={<EventHandler />} />
<Route path="/refs" element={<RefExample />} />
<Route path="/list" element={<ListWithKeys />} />
<Route path="/" element={<h2>Welcome to myapp</h2>} />
</Routes>
</div>
</Router>
);
}
export default App;
FILE: components/EventHandler.js
import React, { useState } from 'react';
const EventHandler = () => {
const [message, setMessage] = useState("Click the button!");
const handleClick = () => {
setMessage("Button clicked!");
};
return (
<div>
<h2>Event Handling</h2>
<p>{message}</p>
<button onClick={handleClick}>Click Me!</button>
</div>
);
};
export default EventHandler;
FILE: components/RefExample.js
import React, { useRef } from 'react';
const RefExample = () => {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<h2>Refs Example</h2>
<input ref={inputRef} type="text" placeholder="Focus on me!" />
<button onClick={focusInput}>Focus the input</button>
</div>
);
};
export default RefExample;
FILE:components/ListWithKeys.js
import React from 'react';
const ListWithKeys = () => {
const items = ['Apple', 'Banana', 'Orange', 'Mango'];
return (
<div>
<h2>List with Keys</h2>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
export default ListWithKeys;
-----------------------------------------------------------------------------------
------------------------
