Web page using html 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Food Blog</title>
</head>
<body>
<h1><a href="#">Welcome to My Food Blog</a></h1>
<h2><a href="#"> About Me </a></h2>
<p>Hello! I'm a food lover who enjoys cooking and sharing recipes. Welcome
to my
food blog where I post my favorite recipes and food experiences.</p>
<h3><a href="#">Back to Home</a></h3>
<h2>Latest Posts</h2>
<ul>
<li><a href="#">Healthy Salads for Everyday</a> - Discover delicious
and nutritious
salads for a healthy lifestyle.</li>
</ul>
<h2>Popular Recipes</h2>
<ul>
<li><a href="#">Best Pasta Dishes</a></li>
<li><a href="#">Delicious Desserts</a></li>
</ul>
<h2><a href="#">Contact Me</a></h2>
<p>Feel free to reach out with any queries or suggestions.</p>
<form action="#" method="post">
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<input type="submit" value="Subscribe">
</form>
<h2>Upcoming Events</h2>
<ul>
<li><strong>Cooking Workshop:</strong> Join me for a live cooking
workshop on
healthy meals. Date: March 15.</li>
<li><strong>Food Tasting Event:</strong> Experience a variety of
dishes in our food
tasting event. Date: April 5.</li>
</ul>
</body>
</html>
Web page using html 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Blog</title>
</head>
<body>
<header>
<h1><a href="#">Welcome to My Food Blog</a></h1>
</header>
<nav>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Latest Posts</a></li>
<li><a href="#">Popular Recipes</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm a food lover who enjoys cooking and sharing recipes.
Welcome to my food blog where I post my favorite recipes and food
experiences.</p>
</section>
<h3><a href="#">Back to Home</a></h3>
<section id="latest-posts">
<h2>Latest Posts</h2>
<ul>
<li>
<a href="#">Healthy Salads for Everyday</a> - Discover
delicious and nutritious salads for a healthy lifestyle.
</li>
</ul>
</section>
<section id="popular-recipes">
<h2>Popular Recipes</h2>
<ul>
<li><a href="#">Best Pasta Dishes</a></li>
<li><a href="#">Delicious Desserts</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Feel free to reach out with any queries or suggestions.</p>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
</section>
<section id="upcoming-events">
<h2>Upcoming Events</h2>
<ul>
<li><strong>Cooking Workshop:</strong> Join me for a live cooking
workshop on healthy meals. Date: March 15.</li>
<li><strong>Food Tasting Event:</strong> Experience a variety of
dishes in our food tasting event. Date: April 5.</li>
</ul>
</section>
</body>
</html>
Adding CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Blog</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
background-color: #f9f9f9;
color: #333;
}
header, nav, section {
margin-bottom: 20px;
}
header {
background-color: #ff9999;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #333;
}
section {
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
}
form input, form button {
margin-top: 10px;
}
button {
padding: 5px 10px;
}
h3 a {
color: #ff6666;
}
</style>
</head>
<body>
<header>
<marquee><h1><a href="#">Welcome to My Food Blog</a></h1></marquee>
</header>
<nav>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Latest Posts</a></li>
<li><a href="#">Popular Recipes</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm a food lover who enjoys cooking and sharing recipes.
Welcome to my food blog where I post my favorite recipes and food
experiences.</p>
</section>
<h3><a href="#">Back to Home</a></h3>
<section id="latest-posts">
<h2>Latest Posts</h2>
<ul>
<li>
<a href="#">Healthy Salads for Everyday</a> - Discover
delicious and nutritious salads for a healthy lifestyle.
</li>
</ul>
</section>
<section id="popular-recipes">
<h2>Popular Recipes</h2>
<ul>
<li><a href="#">Best Pasta Dishes</a></li>
<li><a href="#">Delicious Desserts</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Feel free to reach out with any queries or suggestions.</p>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
</section>
<section id="upcoming-events">
<h2>Upcoming Events</h2>
<ul>
<li><strong>Cooking Workshop:</strong> Join me for a live cooking
workshop on healthy meals. Date: March 15.</li>
<li><strong>Food Tasting Event:</strong> Experience a variety of
dishes in our food tasting event. Date: April 5.</li>
</ul>
</section>
</body>
</html>
Adding bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Blog</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #fdfdfd;
}
header {
background-color: maroon;
color: white;
}
header a {
color: white;
text-decoration: none;
}
nav {
background-color: skyblue;
}
nav .nav-link {
color: white;
}
nav .nav-link:hover {
color: white;
}
h2 {
color: black;
}
a {
color: red;
}
.btn-primary {
background-color: forestgreen;
border: none;
}
.btn-primary:hover {
background-color: #f4511e;
}
</style>
</head>
<body>
<header class="text-center py-4 mb-4">
<marquee><h1><a href="#">Welcome to My Food Blog</a></h1></marquee>
</header>
<nav class="navbar navbar-expand-lg mb-4">
<div class="container">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">About
Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Latest
Posts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Popular
Recipes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact
Me</a></li>
</ul>
</div>
</nav>
<div class="container">
<section id="about" class="mb-4">
<h2>About Me</h2>
<p>Hello! I'm a food lover who enjoys cooking and sharing recipes.
Welcome to my food blog where I post my favorite recipes and food
experiences.</p>
</section>
<section id="latest-posts" class="mb-4">
<h2>Latest Posts</h2>
<ul class="list-group">
<li class="list-group-item">
<a href="#">Healthy Salads for Everyday</a> - Discover
delicious and nutritious salads for a healthy lifestyle.
</li>
</ul>
</section>
<section id="popular-recipes" class="mb-4">
<h2>Popular Recipes</h2>
<ul class="list-group">
<li class="list-group-item"><a href="#">Best Pasta
Dishes</a></li>
<li class="list-group-item"><a href="#">Delicious
Desserts</a></li>
</ul>
</section>
<section id="contact" class="mb-4">
<h2>Contact Me</h2>
<p>Feel free to reach out with any queries or suggestions.</p>
<form class="row g-3">
<div class="col-auto">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-
control" required>
</div>
<div class="col-auto mt-4">
<button type="submit" class="btn btn-
primary">Subscribe</button>
</div>
</form>
</section>
<section id="upcoming-events" class="mb-4">
<h2>Upcoming Events</h2>
<ul class="list-group">
<li class="list-group-item"><strong>Cooking Workshop:</strong>
Join me for a live cooking workshop on healthy meals. Date: March 15.</li>
<li class="list-group-item"><strong>Food Tasting
Event:</strong> Experience a variety of dishes in our food tasting event.
Date: April 5.</li>
</ul>
</section>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"></script>
</body>
</html>
5a) Write a JavaScript program which accepts a string as input
and swap the case of each character. For example, if you input
'The Quick Brown Fox' the output should be
'tHEqUICKbROWNfOX'.
let swapCase = function(inputString){
let swappedString='';
for(let i=0;i<inputString.length;i++){
let char = inputString[i];
if(char === char.toUpperCase()){
swappedString+=char.toLowerCase();
}else{
swappedString+=char.toUpperCase();
}
}
return swappedString;
}
const input = "I am Jeevan Reddy";
console.log(swapCase(input));
5b) Write a JavaScript program to find the most frequent item of an
array
function findMostFrequent(arr) {
const frequencyMap = {};
let maxFrequency = 0;
let mostFrequentItem = null;
for (let item of arr) {
frequencyMap[item] = (frequencyMap[item] || 0) + 1;
if (frequencyMap[item] > maxFrequency) {
maxFrequency = frequencyMap[item];
mostFrequentItem = item;
}
}
return {
item: mostFrequentItem,
frequency: maxFrequency
};
}
\const result = findMostFrequent(array);
console.log(array);
console.log(result.item);
console.log(result.frequency);
5c) Write a JavaScript program to remove duplicate items from an
array
function removeDuplicates(arr) {
return arr.filter((value, index, self) => {
return self.indexOf(value) === index;
});
}
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(array);
console.log(uniqueArray);
6a) Write a JavaScript program to perform a binary search.
function binarySearch(arr, target) {
let start = 0;
let end = arr.length - 1;
while (start <= end) {
let mid = Math.floor((start + end) / 2);
if (arr[mid] === target) {
return mid;
}
else if (arr[mid] < target) {
start = mid + 1;
}
else {
end = mid - 1;
}
}
return -1;
}
let numbers = [1, 3, 5, 7, 9, 11];
console.log("Binary Search : " + binarySearch(numbers, 7));
6b) Write a JavaScript program to list the properties of a JavaScript
object.
function list(obj) {
return Object.keys(obj);
}
let sample = { name: "John", age: 30, city: "New York" };
console.log("The list properties are : " + list(sample));
6c) Write a JavaScript function to check whether an object contains
given property.
function hasProperty(obj, property) {
return obj.hasOwnProperty(property);
}
let person = { name: "Alice", age: 25 };
console.log(hasProperty(person, "name"));
console.log(hasProperty(person, "gender"));
6d) Write a JavaScript program to sort a list of elements using Quick
sort.
function quickSort(arr) {
if (arr.length <= 1) return arr;
const pivot = arr[0];
const left = [];
const right = [];
for (let i = 1; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return [...quickSort(left), pivot, ...quickSort(right)];
}
let unsortedArray = [3, 6, 8, 10, 1, 2, 1];
console.log("Quick Sort : " + quickSort(unsortedArray));
