Eg Programs

Program 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sports Day Registration Form</title>
</head>
<body>
<h2>Sports Day Registration</h2>
<form action="#" method="POST">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required placeholder="Enter your full

name"><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" required placeholder="Enter your age"><br><br>
<label for="gender">Gender:</label><br>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="event">Choose Sport:</label><br>
<select id="event" name="event" required>
<option value="">Select Event</option>
<option value="100m">100m Race</option>
<option value="long_jump">Long Jump</option>
<option value="high_jump">High Jump</option>
<option value="relay">Relay Race</option>
<option value="shot_put">Shot Put</option>
</select><br><br>
<button type="submit">Submit Registration</button>
</form>
<p>© 2024 Sports Day Event</p>
</body>
</html>
Program 7
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Catalog</title>
</head>
<body>
<h1>Welcome to Our Product Catalog</h1>
<p>Browse through our collection of high-quality products.</p>
<hr>

<div>
<h2>Product 1: Running Shoes</h2>
<img src="https://via.placeholder.com/200" alt="Running Shoes" width="200">
<p><strong>Description:</strong> These running shoes provide ultimate comfort and support for
long-distance running.</p>
<p><strong>Price:</strong> $49.99</p>
</div>
<hr>

<div>
<h2>Product 2: Yoga Mat</h2>
<img src="https://via.placeholder.com/200" alt="Yoga Mat" width="200">
<p><strong>Description:</strong> A high-density yoga mat perfect for comfort during workouts and
yoga sessions.</p>
</div>
<hr>

<div>
<h2>Product 3: Dumbbell Set</h2>
<img src="https://via.placeholder.com/200" alt="Dumbbell Set" width="200">
<p><strong>Description:</strong> A set of adjustable dumbbells for a full-body workout at

home.</p>
</div>
<hr>

<div>
<h2>Product 4: Water Bottle</h2>
<img src="https://via.placeholder.com/200" alt="Water Bottle" width="200">
<p><strong>Description:</strong> A durable, BPA-free water bottle to keep you hydrated during

your workouts.</p>
</div>
<hr>
<footer>
<p>© 2024 Fitness Store</p>
</footer>
</body>
</html>
Program 11
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signup Form</title>
<script>
// Function to validate the form
function validateForm() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let phone = document.getElementById("phone").value;

let email = document.getElementById("email").value;
let usernameRegex = /^[a-zA-Z0-9]{3,}$/; // Username should be alphanumeric and at least 3

characters
let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; // Password must have letters and

numbers, and be at least 8 characters
let phoneRegex = /^\d{3}-\d{3}-\d{4}$/; // Phone number should be in the format 123-456-7890
let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // Simple email validation

regex
// Validate username
if (!username.match(usernameRegex)) {
alert("Username must be at least 3 characters long and contain only letters and numbers.");
return false;
// Validate password
if (!password.match(passwordRegex)) {
alert("Password must be at least 8 characters long and include both letters and numbers.");
return false;
// Validate phone number
if (!phone.match(phoneRegex)) {
alert("Phone number must be in the format 123-456-7890.");
return false;
}
// Validate email
if (!email.match(emailRegex)) {
alert("Please enter a valid email address.");
return false;
// If all validations pass
alert("Form submitted successfully!");
return true;
</script>
</head>
<body>
<h2>Signup Form</h2>
<form onsubmit="return validateForm()">

<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>


<label for="phone">Phone Number:</label><br>
<input type="text" id="phone" name="phone" required placeholder="123-456-7890"><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Signup</button>
</form>
</body>
</html>
Program 12
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leap Year Checker</title>
<script>
// Function to check if a year is a leap year
function isLeapYear(year) {
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
return true; // It's a leap year

} else {
return false; // Not a leap year
// Function to handle form submission and check if the year is a leap year
function checkLeapYear() {
let year = document.getElementById("year").value; // Get the year from the input field
year = parseInt(year); // Convert the input to an integer
if (isNaN(year)) {
alert("Please enter a valid year.");
return; // Exit if the input is not a valid number
// Check if the year is a leap year
if (isLeapYear(year)) {
alert(year + " is a leap year!");
} else {
alert(year + " is not a leap year.");
</script>
</head>
<body>
<h2>Leap Year Checker</h2>
<label for="year">Enter a year: </label>
<input type="text" id="year" placeholder="Enter year">
<button onclick="checkLeapYear()">Check Leap Year</button>
</body>
</html>
Program 13
<!DOCTYPE html>
<html lang="en">
<head>
<title>Temperature Converter</title>
<script>
// Function to convert Celsius to Fahrenheit
function celsiusToFahrenheit() {
let celsius = document.getElementById("celsius").value; // Get the Celsius value
let fahrenheit = (celsius * 9/5) + 32; // Conversion formula
document.getElementById("fahrenheit").value = fahrenheit.toFixed(2); // Display Fahrenheit value
// Function to convert Fahrenheit to Celsius

function fahrenheitToCelsius() {
let fahrenheit = document.getElementById("fahrenheit").value; // Get the Fahrenheit value
let celsius = (fahrenheit - 32) * 5/9; // Conversion formula
document.getElementById("celsius").value = celsius.toFixed(2); // Display Celsius value
</script>
</head>
<body>
<h2>Temperature Converter</h2>

<label for="celsius">Celsius (°C): </label>
<input type="number" id="celsius" placeholder="Enter Celsius" oninput="celsiusToFahrenheit()">
<br><br>

<label for="fahrenheit">Fahrenheit (°F): </label>
<input type="number" id="fahrenheit" placeholder="Enter Fahrenheit"

oninput="fahrenheitToCelsius()">
<br><br>
<footer>
<p>Enter the value in either Celsius or Fahrenheit, and the other temperature will be converted
automatically.</p>
</footer>
</body>
</html>
Program 14
<!DOCTYPE html>
<html lang="en" ng-app="shoppingListApp">
<head>
<title>AngularJS Shopping List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
.shopping-list {
margin-top: 20px;
input[type="text"] {
padding: 8px;
margin-right: 10px;
button {
padding: 8px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
button:hover {
background-color: #45a049;
ul {
list-style-type: none;
padding: 0;
li {
padding: 5px;
border-bottom: 1px solid #ddd;
</style>
</head>
<body>
<div ng-controller="ShoppingListController">
<h1>Shopping List</h1>


<input type="text" ng-model="newItem" placeholder="Add a new item" />
<button ng-click="addItem()">Add</button>

<div class="shopping-list">
<ul>
<li ng-repeat="item in shoppingList">
{{item.name}}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
</div>
</div>
<script>
// Create the AngularJS module
var app = angular.module('shoppingListApp', []);
// Create a controller for managing the shopping list
app.controller('ShoppingListController', function($scope) {
// Initialize an array to store shopping list items
$scope.shoppingList = [];
// Function to add a new item to the shopping list
$scope.addItem = function() {
if ($scope.newItem) {
$scope.shoppingList.push({ name: $scope.newItem });
$scope.newItem = ''; // Clear the input field after adding the item
};
// Function to remove an item from the shopping list
$scope.removeItem = function(index) {
$scope.shoppingList.splice(index, 1);
};
});
</script>
</body>
</html>
Program 15
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>AngularJS Routing Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
nav {
padding: 10px;
margin-bottom: 20px;
nav a {
color: white;
margin-right: 15px;
text-decoration: none;
nav a:hover {
text-decoration: underline;
.content {
margin-top: 20px;
</style>
</head>
<body>
<div ng-controller="NavController">

<nav>
<a href="#!/">Home</a>
<a href="#!/about">About</a>
</nav>

<div class="content">
<ng-view></ng-view>
</div>
</div>
<script>
// Define the AngularJS app module with ngRoute dependency
var app = angular.module('myApp', ['ngRoute']);
// Configure the routes
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Welcome to the Home Page!</h2><p>This is the homepage content.</p>',
})
.when('/about', {
template: '<h2>About Us</h2><p>This is the about page content.</p>',
})
.otherwise({
redirectTo: '/'
});
});
// Create a controller for navigation (optional, if you want to manage some logic)
app.controller('NavController', function($scope) {
// Any logic you need for navigation can go here
$scope.pageTitle = "AngularJS Routing Example";
});
</script>
</body>
</html>
Program 16
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
Program 17
Step 1: Installing WordPress
Here’s a step-by-step guide to installing WordPress and designing your site:
Option 1: Install Locally (Using XAMPP/WAMP/MAMP)
1. Download and Install XAMPP/WAMP/MAMP:
o XAMPP (for Windows, Linux, macOS)
o WAMP (Windows)
o MAMP (macOS)
2. Download WordPress:
o Go to the WordPress.org website and download the latest version.
3. Set Up XAMPP/WAMP/MAMP:
o Start Apache and MySQL from the control panel.
4. Create a Database:
o Open phpMyAdmin (http://localhost/phpmyadmin).
o Click "New" and create a database (e.g., wordpress).

5. Extract WordPress Files:
o Extract the downloaded WordPress ZIP file.
o Move the contents to the htdocs (for XAMPP) or equivalent folder (e.g.,
/htdocs/wordpress).
6. Install WordPress:
o Open your browser and visit http://localhost/wordpress.
o Follow the setup wizard:
 Choose your language.
 Enter database details (Database Name: wordpress, Username: root, Password:

``, Host: localhost).
Option 2: Install on a Live Server
1. Purchase Hosting and Domain:
o Buy a hosting plan and domain from providers like Bluehost, SiteGround, or HostGator.
2. One-Click WordPress Installation (Most Hosts):
o Log in to your hosting control panel (cPanel).
o Look for "WordPress Installer" or "Softaculous" under the app installers section.
o Click "Install Now," fill in the details, and follow the instructions.
3. Manual Installation:
o Upload the WordPress files to the public_html folder via FTP (using FileZilla or similar
software).
o Create a database in cPanel’s MySQL Database Wizard.
o Run the installation by visiting http://yourdomain.com.
Step 2: Designing Your WordPress Site
1. Log in to WordPress Admin:

 Visit http://yourdomain.com/wp-admin (or http://localhost/wordpress/wp-admin for local).
 Enter the username and password set during installation.
2. Choose and Install a Theme:
 Go to Appearance > Themes.
 Click Add New to browse free themes or upload a premium theme.
 Activate the theme.
Examples:
 Free: Astra, OceanWP
 Premium: Divi, Avada
3. Install Essential Plugins:
 Go to Plugins > Add New to install plugins for added functionality.
o Page Builder: Elementor or Beaver Builder.
o SEO: Yoast SEO.
o Forms: WPForms.
o Security: Wordfence.
4. Customize Appearance:
 Go to Appearance > Customize to adjust:
o Site Identity (Logo, Title, Tagline).
o Colors and Typography.
o Menus and Widgets.
5. Add Pages and Posts:
 Pages: For static content (e.g., About, Contact).
o Go to Pages > Add New.
 Posts: For blog entries.
o Go to Posts > Add New.

6. Use a Page Builder:
 Install Elementor (or similar).
 Use drag-and-drop functionality to create visually appealing layouts for pages like the
homepage.
7. Set a Homepage:
 Go to Settings > Reading.
 Select "A static page" and assign a page as the homepage.
8. Test Your Site:
 Test responsiveness and functionality on different devices and browsers.
 Use tools like Google PageSpeed Insights to check performance.
Additional Tips:
 Backup Your Site: Use plugins like UpdraftPlus for regular backups.
 Optimize Images: Compress images with plugins like Smush.
 Secure Your Site: Ensure your site uses SSL and install a security plugin.
Program 18
<!DOCTYPE html>
<html lang="en">
<head>
<title>Retrieve Checkbox Values</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Select Your Hobbies</h1>
<form id="hobbyForm">
<label><input type="checkbox" name="hobby" value="Reading"> Reading</label><br>
<label><input type="checkbox" name="hobby" value="Traveling"> Traveling</label><br>
<label><input type="checkbox" name="hobby" value="Cooking"> Cooking</label><br>
<label><input type="checkbox" name="hobby" value="Gardening"> Gardening</label><br>
<button type="button" id="getValues">Get Selected Values</button>
</form>
<div id="output" style="margin-top: 20px; font-weight: bold;"></div>
<script>
$(document).ready(function() {
$('#getValues').click(function() {
// Retrieve checked checkbox values
let selectedHobbies = [];
$('input[name="hobby"]:checked').each(function() {
selectedHobbies.push($(this).val());
});
// Display the selected values
if (selectedHobbies.length > 0) {
$('#output').html('Selected hobbies: ' + selectedHobbies.join(', '));
} else {
$('#output').html('No hobbies selected.');

}
});
});
</script>
</body>
</html>
Program 19
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Stop Animation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
</style>
</head>
<body>
<h1>jQuery Stop Animation Example</h1>
<button id="startAnimation">Start Animation</button>
<button id="stopAnimation">Stop Animation</button>
<button id="stopAndJump">Stop and Jump to End</button>
<div class="box"></div>
<script>
$(document).ready(function () {
const box = $(".box");
// Start animation on button click
$("#startAnimation").click(function () {
box.animate({ left: "500px" }, 3000)
.animate({ top: "300px" }, 2000)
.animate({ left: "50px" }, 3000)
.animate({ top: "50px" }, 2000);
});
// Stop animation immediately without clearing the queue
$("#stopAnimation").click(function () {
box.stop();
});
// Stop animation and jump to the end of the current animation
$("#stopAndJump").click(function () {
box.stop(true, true);
});
});
</script>
</body>
</html>

Eg Programs

Uploaded by

Copyright:

Available Formats

Eg Programs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Eg Programs

Uploaded by

Copyright:

Available Formats

Program 6

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

<title>Sports Day Registration Form</title>

<h2>Sports Day Registration</h2>

<form action="#" method="POST">

<label for="name">Full Name:</label><br>

<input type="text" id="name" name="name" required placeholder="Enter your full

<input type="number" id="age" name="age" required placeholder="Enter your age"><br><br>

<select id="gender" name="gender" required>

<option value="">Select Gender</option>

<label for="event">Choose Sport:</label><br>

<select id="event" name="event" required>

<option value="">Select Event</option>

<option value="100m">100m Race</option>

<option value="long_jump">Long Jump</option>

<option value="high_jump">High Jump</option>

<option value="relay">Relay Race</option>

<option value="shot_put">Shot Put</option>

<button type="submit">Submit Registration</button>

<p>&copy; 2024 Sports Day Event</p>

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

<h1>Welcome to Our Product Catalog</h1>

<p>Browse through our collection of high-quality products.</p>

<h2>Product 1: Running Shoes</h2>

<img src="https://via.placeholder.com/200" alt="Running Shoes" width="200">

<img src="https://via.placeholder.com/200" alt="Yoga Mat" width="200">

<h2>Product 3: Dumbbell Set</h2>

<img src="https://via.placeholder.com/200" alt="Dumbbell Set" width="200">

<p><strong>Description:</strong> A set of adjustable dumbbells for a full-body workout at

<h2>Product 4: Water Bottle</h2>

<img src="https://via.placeholder.com/200" alt="Water Bottle" width="200">

<p><strong>Description:</strong> A durable, BPA-free water bottle to keep you hydrated during

<p>&copy; 2024 Fitness Store</p>

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

// Function to validate the form

let username = document.getElementById("username").value;

let password = document.getElementById("password").value;

let phone = document.getElementById("phone").value;

let usernameRegex = /^[a-zA-Z0-9]{3,}$/; // Username should be alphanumeric and at least 3

let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; // Password must have letters and

let phoneRegex = /^\d{3}-\d{3}-\d{4}$/; // Phone number should be in the format 123-456-7890

let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // Simple email validation

// Validate phone number

alert("Phone number must be in the format 123-456-7890.");

alert("Please enter a valid email address.");

// If all validations pass

alert("Form submitted successfully!");

<form onsubmit="return validateForm()">

<input type="text" id="username" name="username" required><br><br>

<input type="password" id="password" name="password" required><br><br>

<input type="text" id="phone" name="phone" required placeholder="123-456-7890"><br><br>

<p>© 2024 Sports Day Event</p>

<p>© 2024 Fitness Store</p>

let passwordRegex = /^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$/; // Password must have letters and