INSTITUTE OF CIVIL & RURAL ENGINEERING

Client Side Scripting Language (22519)

A
Micro-Project Report
On
“Divine Temples of India”
Micro-Project Group Members
Sr.No Name of Group Members Roll No Enrollment No Seat No

1. Kumbhar Prarthana Ganpati 21 2200120021 162100

2. Kudave Utkarsha Uday 45 2200120083 162122

UNDER THE GUIDANCE OF

Prof. G.K. Bhoi
Co’s addressed by Micro-Project :
CO-22519-01 Create interactive web pages using program flow control structure.
CO-22519-02 Implement Arrays and functions in Java script.
CO-22519-03 Create event based web forms using Java script
CO-22519-04 Use JavaScript for handling cookies
CO-22519-05 Create interactive webpages using regular expressions for validations
CO-22519-06 Create Menus and navigations in web Pages.

DEPARTMENT OF COMPUTER ENGINEERING

2024-2025
 Shri Mouni Vidhyapeeth’s
INSTITUTE OF CIVIL AND RURAL ENGINEERING, GARGOTI

This is to certify that,

Certificate
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Sr. No. Name of Group Members Roll No. Enrollment No. Seat No.

1. Kumbhar Prarthana Ganpati 21 2200120021 162100

2. Kudave Utkarsha Uday 45 2200120083 162122

Has successfully completed their Project work entitled

“ Divine Temples of India”

Of 5Th Semester of Diploma in Computer Engineering of “Institute of Civil and Rural

Engineering, Gargoti” (Code: 0012) has completed the Micro Project satisfactorily in Subject – Client
Side Scripting Language (22519) for the academic year 2024-2025 as prescribed in the curriculum.

Mr. G.K. Bhoi Mr. S.G. Mane Mr. J.S. Ghevade

(Project Guide) (Head of CO Dept.) (Principal)
 INDEX

Sr.No Content/Title

1. Introduction

2. Proposed System

3. Action Plan

4. Source Code

5. Snapshots

6. Key Features

7. Concept Used

8. Conclusion

9. Software/Learning Websites
➢ Introduction :
India, a land of ancient traditions and boundless spirituality, is celebrated worldwide for its
remarkable religious diversity and vibrant cultural heritage. At the heart of this cultural wealth are
its magnificent temples, standing as timeless symbols of devotion, architectural ingenuity, and
enduring traditions. Each temple tells a unique story, reflecting the history, artistic brilliance, and
spiritual practices of its region.

This website is dedicated to unveiling the splendor of some of India’s most iconic temples. Through
vivid imagery, engaging narratives, and thoughtfully crafted JavaScript-powered interactions, we
invite visitors to explore these sacred landmarks. From their intricate architecture to their profound
spiritual significance, each temple featured here offers a window into the rich tapestry of India’s
religious and cultural identity.

Beyond being places of worship, these temples serve as cultural touchstones, preserving ancient
legacies and uniting communities across generations. Join us on this virtual journey to experience
the unmatched beauty and deep reverence of India’s cherished temples—a celebration of
spirituality, art, and heritage.
➢ Proposed System :

The Divine Temples of India system is a dynamic and responsive website designed to provide
information about famous temples across India, with a focus on their history, significance, and
nearby attractions. The website will have an intuitive user interface, supporting features such as easy
navigation, a login system, and detailed pages for each temple. Users can explore temples, read
about their history and significance, and view images in a card layout format.

Objectives

✓ Provide Information on Temples: To create a comprehensive resource about various

temples in India, offering details on their history, significance, and key features.
✓ User-Friendly Interface: To design an intuitive and easy-to-navigate platform where users
can quickly access information on different temples.
✓ Easy Access to Temple Categories: To offer clear navigation to different categories of
temples (e.g., historical, famous temples) for easy exploration.
➢ Action Plan :

Sr. No Details of activity Planned Planned Name of

start date Finish date Responsible
Team member
1 Discuss about project 15-07-2024 22-07-2024 ALL MEMBERS
2 Finally select the topic of the project. 22-07-2024 29-07-2024 ALL MEMBERS
3 Collect the information of project. 29-07-2024 05-08-2024 ALL MEMBERS
4 Draw output of in rough. 05-08-2024 12-08-2024 ALL MEMBERS
5 Collection of Data 12-08-2024 19-08-2024 ALL MEMBERS
6 Collection of Data 19-08-2024 26-08-2024 ALL MEMBERS
7 Collection of Data 26-08-2024 02-09-2024 ALL MEMBERS
8 Collection of Data 02-09-2024 09-09-2024 ALL MEMBERS
9 Discussion and outline of Content 09-09-2024 23-09-2024 ALL MEMBERS
10 Formulation of Content 23-09-2024 30-09-2024 ALL MEMBERS
11 Editing and proof Reading of content 30-09-2024 07-10-2024 ALL MEMBERS
12 Compilation and report presentation 07-10-2024 14-10-2024 ALL MEMBERS
13 Actual Presentation 14-10-2024 21-10-2024 ALL MEMBERS
14 Look for user satisfaction 21-10-2024 28-10-2024 ALL MEMBERS
15 Develop actual website. 28-10-2024 04-11-2024 ALL MEMBERS
16 Final Submission of project 04-11-2024 16-11-2024 ALL MEMBERS

➢ Team Members :

Sr. Name of group members Roll No Enrollment No Signature

No.
1. Kumbhar Prarthana Ganpati 21 2200120021

2. Kudave Utkarsha Uday 45 2200120083

➢ Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: url('backg.jpg') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #ffffff;
}

#frm {
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background for the form */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
width: 300px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 1.5em;
margin-bottom: 20px;
color: #333;
text-align: center;
}

label {
display: block;
font-size: 0.9em;
 color: #333;
margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9em;
}

#btn {
width: 100%;
padding: 10px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

#btn:hover {
background-color: #0056b3;
}

.form-footer {
text-align: center;
margin-top: 10px;
font-size: 0.85em;
}

.form-footer a {
color: #007bff;
text-decoration: none;
}

.form-footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<form id="frm" onsubmit="return false;">
 <h2>Login</h2>
<label for="txt">Email</label>
<input type="text" name="txt" id="txt" placeholder="Enter your email">

<label for="txt1">Password</label>
<input type="password" name="txt1" id="txt1" placeholder="Enter your password">

<input type="button" id="btn" value="Login" onclick="handleLogin();">

</form>

<script type="text/javascript">
// Validate form fields
function validateForm() {
var email = document.getElementById("txt").value;
var password = document.getElementById("txt1").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (email === "" || password === "") {

alert("Please fill in all the fields.");
return false;
}
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
return true;
}

// Set cookies
function setCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = name + "=" + encodeURIComponent(value) + "; expires=" +
date.toUTCString() + "; path=/";
}

// Handle login
function handleLogin() {
if (validateForm()) {
var email = document.getElementById("txt").value;

// Confirm cookie acceptance

var acceptCookies = confirm("Do you want to accept cookies?");
if (acceptCookies) {
// Store email in cookie
setCookie("email", email, 7);
alert("Login successful! Cookies have been stored.");
 window.location.href = 'index.html'; // Redirect to homepage
} else {
alert("You must accept cookies to continue.");
}
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Temples</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7fc;
color: #333;
}

header {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: white;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 15px 0;
margin-top: 30px;
}

header h1 {
font-size: 2.5em;
 font-weight: bold;
margin-bottom: 10px;
}

nav ul {
list-style: none;
padding: 0;
text-align: center;
margin-top: 10px;
}

nav ul li {
display: inline-block;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
text-transform: uppercase;
transition: color 0.3s ease, transform 0.3s ease;
}

nav ul li a:hover {
color: #f39c12;
transform: scale(1.1);
}

/* Banner Carousel */
.banner {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
margin-top: 20px;
}

.banner img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
 .banner img.active {
opacity: 2;
}

/* Main Content */
.content {
max-width: 1000px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 2em;
color: #2c3e50;
margin-bottom: 20px;
}

p{
font-size: 1.1em;
line-height: 1.6;
color: #7f8c8d;
}

/* Footer */
footer p {
margin: 0;
font-size: 0.9em;
}
</style>
</head>
<body>

<header>
<h1>Welcome to Indian Temples</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="temples.html">Temples</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
 <!-- Banner Carousel -->
<div class="banner" id="banner">
<img src="kolhapur-mahalakshmi-temple.jpg" alt="Mahalakshmi Temple" class="active">
<img src="kedarnath-temple.jpg" alt="Kedarnath Temple">
<img src="kolhapur-jyotiba-temple.jpg" alt="Jyotiba Temple">
<img src="golden-temple.jpg" alt="Golden Temple">
<img src="dagdusheth-ganapti-temple.jpg" alt="Dagdusheth Ganapati Temple">
<img src="tirupati-temple.jpg" alt="Tirupati Temple">
</div>

<main class="content">
<h2>Explore the Heritage of Indian Temples</h2>
<p>Discover the ancient temples of India, known for their spiritual significance and architectural
brilliance. Each temple has a unique story, offering insights into the rich history and diverse culture
of India.</p>
</main>

<footer>
<p>&copy; 2024 Indian Temples. All rights reserved.</p>
</footer>

<script>
// JavaScript to enable the carousel effect
const images = document.querySelectorAll('#banner img');
let currentIndex = 0;

function showNextImage() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}

setInterval(showNextImage, 2000);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Temples</title>
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:
wght@400;500&display=swap" rel="stylesheet">
<style>
/* General Styling */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: #f3f4f6;
}

header {
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
margin: 0;
font-family: 'Playfair Display', serif;
font-size: 2.8em;
}

nav ul {
list-style: none;
padding: 0;
margin: 15px 0 0;
display: flex;
justify-content: center;
gap: 20px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
font-size: 1.1em;
transition: color 0.3s ease;
}

nav ul li a:hover {
color: #ffe194;
}

main {
padding: 20px;
max-width: 800px;
margin: auto;
}

section h2 {
 font-size: 2.4em;
margin-bottom: 20px;
text-align: center;
color: #333;
}

/* Temple Card Styling */

.temple-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.temple-item:hover {
transform: translateY(-10px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.temple-item img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 15px 0 0 15px;
}

.temple-info {
padding: 10px;
}

.temple-info h3 {
font-size: 1.5em;
margin: 0 0 10px;
color: #444;
}

.temple-info .location {
background: #ff7e5f;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 0.9em;
font-weight: bold;
display: inline-block;
margin-top: 10px;
cursor: pointer;
transition: background 0.3s ease;
}
 .temple-info .location:hover {
background: #feb47b;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 15px 0;
margin-top: 30px;
}

footer p {
margin: 0;
font-size: 0.9em;
}
</style>
</head>
<body>
<header>
<h1>Explore India's Divine Heritage</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Renowned Temples Across India</h2>

<!-- Template for Each Temple -->

<div class="temple-item">
<a href="mahalakshmi.html">
<img src="https://www.thestatesman.com/wp-content/uploads/2022/09/iStock-
1153605674.jpg" alt="Mahalakshmi Temple">
</a>
<div class="temple-info">
<h3><a href="mahalakshmi.html" style="text-decoration: none; color: inherit;">Mahalakshmi
Temple</a></h3>
<span class="location">Kolhapur, Maharashtra</span>
</div>
</div>

<div class="temple-item">
<img src="https://thumbs.dreamstime.com/b/jyotiba-temple-wadi-ratnagiri-kolhapur-
maharashtra-109810602.jpg" alt="Jyotiba Temple">
<div class="temple-info">
<h3><a href="joytibatemp.html" style="text-decoration: none; color: inherit;">Joytiba
Temple</a></h3>
<span class="location">Kolhapur, Maharashtra</span>
 </div>
</div>

<div class="temple-item">
<img src="https://www.mapsofindia.com/ci-moi-images/my-india/siddhivinayak-temple-
mumbai.jpg" alt="Siddhivinayak Temple">
<div class="temple-info">
<h3><a href="vinayaktemp.html" style="text-decoration: none; color:
inherit;">Siddhivinayak Temple</a></h3>
<span class="location">Mumbai, Maharashtra</span>
</div>
</div>

<div class="temple-item">
<img src="http://www.inditales.com/wp-content/uploads/2017/03/dagdusheth-ganesh-
temple.jpg" alt="Dagadusheth Ganapati Temple">
<div class="temple-info">
<h3><a href="ganpati.html" style="text-decoration: none; color: inherit;">Dagdusheth
Ganpati Temple</a></h3>
<span class="location">Pune, Maharashtra</span>
</div>
</div>

<div class="temple-item">
<img src="kedarnath-temple.jpg" alt="Kedarnath Temple">
<div class="temple-info">
<h3><a href="kedarnath.html" style="text-decoration: none; color: inherit;">Kedarnath
Temple</a></h3>
<span class="location">Uttarakhand</span>
</div>
</div>

<div class="temple-item">
<img src="https://cdn.tripways.com/2020/11/07094043/golden-temple-3.jpg" alt="Golden
Temple">
<div class="temple-info">
<h3><a href="golden.html" style="text-decoration: none; color: inherit;">Golden
Temple</a></h3>
<span class="location">Amritsir, Punjab</span>
</div>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 Indian Temples. All rights reserved.</p>
</footer>
</body>
</html>
➢ Snapshots :

Login Page Home Page

Temples Page Temples Page

Temple’s Detail Page Temple’s Detail Page

Temple’s Detail Page Temple’s Detail Page

Contact Us Page Contact Us Page

About Us Page About Us Page

➢ Key Features :

• Responsive Design:
Ensures a seamless browsing experience across all devices, from smartphones to desktops. It will
automatically adjust the layout, images, and text to fit various screen sizes.

• Temple Information Pages:

o Each temple has its own dedicated page with sections for Temple Description, History, and
Nearby Attractions.
o Example: Pages for Mahalakshmi Temple, Dagdusheth Ganpati, Kedarnath Temple, and
more, providing both visual content (images) and rich text descriptions.

• User-Friendly Navigation:

o Simple and easy-to-use navigation, allowing visitors to quickly explore temples, their history,
and important details like nearby tourist spots.
o A Back to Temples link helps users return to the list of temples from each temple's individual
page.

• Visually Appealing Layout:

Each temple page features a card layout for showcasing images and historical facts, ensuring easy
readability and aesthetics.

• Contact and Information:

The website may also include a contact page for inquiries or feedback, as well as an about page
detailing the website’s mission and vision.
➢ Concepts Used :

• User Authentication and Login System :

✓ The website includes a login page that collects email and password, with validation to
ensure correct input. Upon login, user credentials are saved in cookies.
✓ The login system helps to provide a personalized experience and secure access to the
website’s features.

• HTML Structure:
This HTML structure is simple yet effective for your website. It separates content into well-
defined sections, making it easy for users to navigate through temple information and
images.
• Key Sections of the HTML Structure:
o <head> Section: Defines the header section of the webpage.
o <nav> Section: Contains the navigation links for easy site-wide movement.
o <header> Section: The header typically includes the website's logo or title and the
navigation menu with links to different pages like Home, Temples, About, and Contact.
o <main> Section: The main content of the page.
o <footer>: Provides footer information like copyright.

• CSS Styling: Custom CSS rules are applied to elements like headers, navigation, and
content to create a consistent look and feel across the website.
• Key concepts of CSS Styling:
o Global Reset: Ensures consistent rendering across different browsers by removing
default margin, padding, and setting box-sizing to border-box.
o Custom Colors: Uses a combination of primary colors like blue, white, and gradients to
maintain a cohesive color scheme that complements the theme.
o Box Shadows: Adds subtle shadows to cards and sections for depth, making them stand
out against the background.
o Hover Effects: Provides interactivity for links and buttons, making the UI feel
responsive and user-friendly.
o Flexbox Layout: Flexbox is used to create a flexible and responsive grid layout for the
cards. It allows for easy alignment of images and text within the card container.

• Image Scaling with Card Layout:

Images scale with the card layout, adjusting to different screen sizes by utilizing flexible
widths and maintaining an organized structure.
 Conclusion

In conclusion, “Divine Temples of India” offers a glimpse into the rich spiritual and
cultural heritage of our country. By showcasing the architectural brilliance, historical significance, and
sacred aura of these iconic temples, the website aims to connect visitors to India’s timeless traditions.
The inclusion of nearby attractions enhances the experience, providing a holistic view of the beauty
and vibrancy surrounding these revered sites.

This project celebrates the essence of Indian culture, where devotion, art, and history blend
harmoniously. We hope this website inspires everyone to explore and cherish the divine legacy that
these temples and their surroundings hold, preserving their magnificence for generations to come.

➢ Software/Learning Websites :

• https://www.w3schools.com
• https://regexr.com
• https://pointjs.org
• https://www.javascripttutorial.net