<form id="registrationForm">
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<input type="email" id="email" placeholder="Email">
<input type="text" id="phone" placeholder="Phone">
<input type="password" id="password" placeholder="Password">
<input type="text" id="address" placeholder="Address">
<button type="submit">Register</button>
</form>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
let errors = [];
let firstName = document.getElementById('firstName').value;
let password = document.getElementById('password').value;
let email = document.getElementById('email').value;
let phone = document.getElementById('phone').value;
if (!/^[A-Za-z]{6,}$/.test(firstName)) {
errors.push('First Name must have at least 6 alphabets.');
}
if (password.length < 6) {
errors.push('Password must be at least 6 characters long.');
}
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
errors.push('Invalid email format.');
}
if (!/^\d{10}$/.test(phone)) {
errors.push('Phone number must have 10 digits.');
}
if (errors.length > 0) {
alert(errors.join('\n'));
} else {
alert('Form is valid');
}
});
</script>
4.webpage with inline, internal and external stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Internal CSS */
h1 {
color: blue;
}
</style>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
</head>
<body>
<h1>Welcome</h1>
<p style="color: green;">This is an inline styled paragraph.</p> <!-- Inline CSS -->
</body>
</html>
5.Display cv and websites using javascript
<!DOCTYPE html>
<html>
<head>
<title>My CV</title>
</head>
<body>
<h1>My CV</h1>
<button onclick="openSites()">Open Websites</button>
<script>
function openSites() {
window.open('https://www.your-institute.com', '_blank');
window.open('https://www.department.com', '_blank');
window.open('https://www.subject-tutorial.com', '_blank');
}
</script>
</body>
</html>
6.Pseudo classes , pseudo elements ...
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 2em;
color: red;
}
a:hover {
color: green;
}
li:nth-child(odd) {
background-color: lightgray;
}
</style>
</head>
<body>
<p>This is a paragraph with pseudo-elements.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="#">Hover over me</a>
</body>
</html>
7.CV in html
<!DOCTYPE html>
<html>
<head>
<title>My CV</title>
</head>
<body>
<h1>Arshad Chaudhary</h1>
<p><b>Email:</b> arshad@example.com</p>
<p><b>Skills:</b> React, JavaScript, Node.js</p>
</body>
</html>
8.HTML order, unordered lists
<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Stylesheet language used to style web pages.</dd>
<dt>JavaScript</dt>
<dd>Programming language to make web pages interactive.</dd>
</dl>
</body>
</html>
9.webpage with multimedia and 3 pseudo elements
<!DOCTYPE html>
<html>
<head>
<style>
h1::first-letter {
font-size: 2em;
color: blue;
}
p::first-line {
font-weight: bold;
}
a::after {
content: ' ➔';
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the first line of this paragraph. More text follows after the first line to illustrate pseudo-elements.</p>
<a href="#">Click here</a>
<h2>Multimedia Section</h2>
<video controls width="400">
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
10.ES6 driven code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Event Driven Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Event Driven Example with ES6</h1>
<button id="clickMeButton">Click Me!</button>
<div class="message" id="message"></div>
<script src="script.js"></script>
</body>
</html>
// Using ES6 arrow functions and template literals
// Function to display a message
const displayMessage = (message) => {
const messageDiv = document.getElementById('message');
messageDiv.textContent = message;
};
// Event handler for the button click
const handleClick = () => {
const messages = [
"You clicked the button!",
"Keep clicking!",
"You're doing great!",
"Event-driven programming is fun!"
];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
displayMessage(randomMessage);
};
// Add event listener to the button
document.getElementById('clickMeButton').addEventListener('click', handleClick);
11.Arrays and String methods in js
// Array Methods
const numbers = [1, 2, 3, 4, 5];
// map
const squares = numbers.map(num => num * num);
// filter
const evenNumbers = numbers.filter(num => num % 2 === 0);
// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0);
// find
const firstEven = numbers.find(num => num % 2 === 0);
// String Functions
let str = "Hello, World!";
// includes
console.log(str.includes("World"));
// startsWith
console.log(str.startsWith("Hello"));
// endsWith
console.log(str.endsWith("!"));
// toUpperCase
console.log(str.toUpperCase());
12.Arrays and date methods
// Array Methods
let fruits = ['apple', 'banana', 'mango', 'orange'];
// push
fruits.push('grapes');
// pop
fruits.pop();
// indexOf
console.log(fruits.indexOf('mango'));
// slice
let citrusFruits = fruits.slice(1, 3);
// Date Functions
let date = new Date();
// getDate
console.log(date.getDate());
// getMonth (0-indexed)
console.log(date.getMonth() + 1);
// getFullYear
console.log(date.getFullYear());
// getHours
console.log(date.getHours());
13.Arrays and Math methods
// Array Methods
let arr = [1, 2, 3, 4, 5];
// shift
arr.shift();
// unshift
arr.unshift(0);
// reverse
arr.reverse();
// join
console.log(arr.join('-'));
// Math Functions
// Math.floor
console.log(Math.floor(4.7));
// Math.ceil
console.log(Math.ceil(4.1));
// Math.random
console.log(Math.random());
// Math.max
console.log(Math.max(1, 3, 2, 8));
14.Arrow function with default and rest parameters
// Default parameters
const greet = (name = 'Guest') => {
console.log(`Hello, ${name}!`);
};
greet(); // Hello, Guest!
greet('Arshad'); // Hello, Arshad!
// Rest parameters
const sum = (...numbers) => {
return numbers.reduce((total, num) => total + num, 0);
};
console.log(sum(1, 2, 3, 4)); // 10
15.Functional component in react
import React from 'react';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;
16.Class component in react
import React, { Component } from 'react';
class Greeting extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Greeting;
17.React router for 3 component
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Us</h2>;
const Services = () => <h2>Our Services</h2>;
const App = () => (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/services">Services</Link>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/services" component={Services} />
</Switch>
</Router>
);
export default App;
18.Event loops in node js
console.log('Start');
// Simulate an asynchronous task with setTimeout
setTimeout(() => {
console.log('Asynchronous task');
}, 2000);
console.log('End');
// Output order: Start -> End -> Asynchronous task
19. Buffers in node js
// Create a buffer
let buffer = Buffer.from('Hello, Buffer!');
// Print the buffer content in hex
console.log(buffer.toString('hex'));
// Slice buffer
let slicedBuffer = buffer.slice(0, 5);
console.log(slicedBuffer.toString());
20.Streams in node js
const fs = require('fs');
const readableStream = fs.createReadStream('input.txt', 'utf8');
const writableStream = fs.createWriteStream('output.txt');
readableStream.on('data', (chunk) => {
writableStream.write(chunk);
});
readableStream.on('end', () => {
console.log('Reading finished');
});
21.file operation in node js
const fs = require('fs');
// Read a file
fs.readFile('input.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});
// Write to a file
fs.writeFile('output.txt', 'Hello, Node.js!', (err) => {
if (err) throw err;
console.log('File has been written');
});
22.routes in express js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Welcome to the Home Page');
});
app.get('/about', (req, res) => {
res.send('This is the About Page');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
23.Application in express
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Welcome to the Home Page');
});
app.get('/about', (req, res) => {
res.send('This is the About Page');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
