A

Micro-Project Report
On

Explore Goa Website

Submitted To
MSBTE
In Partial Fulfillment of Requirement of Diploma Of
Computer Engineering
Under I Scheme
Submitted By

Mr. Suyash Satish Kerkar

Mr. Manas Dattaram Desai

Ms. Manasvi Sanjay Parab

Ms. Shejal Angad Chandekar

Under the Guidance Of

Mr. R.C. Dhandekar

For Academic Year 2023-2024

Yashwantrao Bhonsale Institute Of Technology,

Sawantwadi
 MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION
CERTIFICATE
This is to certify that,

Mr. Suyash Satish Kerkar Roll No.01

Mr. Manas Dattaram Desai Roll No.04

Ms. Manasvi Sanjay Parab Roll No.09

Ms. Shejal Angad Chandekar Roll No.12

Of Fifth semester of diploma in Computer Engineering of institute

Yashwantrao Bhonsale Institute of Technology (1742) has completed the Micro
Project satisfactorily in subject Client Side Scripting Language (22519) for the
academic year 2023 to 2024 as prescribed in the curriculum.

Subject Faculty HOD Principal

Seal of

Institution
 INDEX

Sr. Topic Name Page

No. No.
1. Abstract 1

2. Introduction 1

3. Overview Of JavaScript 2-4

4. Technology Used 5

5. Program Code 6-7

6. Output 8-9

7. Conclusion 10

8. Reference 11
 Department of Computer Engineering Explore Goa Website

1.Abstract:-

The "Explore Goa" website is a static website designed to provide users with an immersive
exploration of the captivating attractions in Goa, India. Leveraging JavaScript functions and onclick
event handlers, the site offers a seamless and interactive user experience.
The onclick event handlers contribute to user interactivity, allowing for interactions with various
elements on the website. This project not only showcases the versatility of JavaScript in web
development but also underscores its role in creating a user-centric and visually appealing
exploration of Goa's cultural, natural, and recreational wonders. The report highlights the
significance of JavaScript in creating a visually appealing and user-friendly interface for
discovering the diverse attractions of Goa, contributing to a comprehensive digital exploration of
this culturally rich region.

2.Introduction:-

The "Explore Goa" website integrates JavaScript functions and onclick event handlers to offer an
interactive exploration of the enchanting destination, Goa, India. This digital platform is designed to
showcase the region's diverse attractions, employing dynamic content loading, interactive maps,
and user-friendly features, enhancing the overall visitor experience.

Yashwantrao Bhonsale Institute of Technology Page | 1

 Department of Computer Engineering Explore Goa Website

3.Overview of JavaScript:-

JavaScript is a versatile, object-oriented programming language primarily used for web

development. It enables the creation of interactive and dynamic content on websites by manipulating
the Document Object Model (DOM) in real-time. JavaScript is a client-side scripting language,
executing in the user's browser, which contributes to enhanced responsiveness. It supports
asynchronous programming, allowing non-blocking operations for tasks like fetching data from
servers. JavaScript is integral to web development, interacting with HTML and CSS to create
engaging user interfaces. It has a broad ecosystem with numerous libraries and frameworks, such as
React, Angular, and Vue.js, facilitating efficient development. In addition to client-side scripting,
JavaScript has gained prominence in server-side development through technologies like Node.js. Its
versatility extends to game development and mobile app development . The language's dynamic
typing, event-driven nature, and extensive community support make it a cornerstone in modern web
development.

JavaScript logo

Yashwantrao Bhonsale Institute of Technology Page | 2

 Department of Computer Engineering Explore Goa Website

Some features of Javascript:-

1. High-level Language:
 JavaScript is a high-level programming language, meaning it is human-readable and
abstracts complex details, making it easier to work with.

2. Interpreted Language:
 JavaScript is an interpreted language, executed line by line without the need for
compilation. This allows for quick development and testing.
3. Dynamic Typing:
 JavaScript is dynamically typed, meaning you don't need to declare the data type of a
variable explicitly. Types are determined at runtime.

4. Object-Oriented:
 JavaScript is object-oriented, allowing developers to create and manipulate objects,
making code more modular and reusable.
5. Event-Driven:
 JavaScript is designed to respond to events triggered by user actions or other parts of
a program. This event-driven paradigm is crucial for building interactive web
applications.
6. Asynchronous Programming:
 JavaScript supports asynchronous programming, enabling non-blocking operations.
This is crucial for handling tasks such as fetching data from servers without freezing
the user interface.
7. Cross-platform Compatibility:
 JavaScript is supported by all major browsers, making it a cross-platform language.
Code written in JavaScript can run on different operating systems and devices.
8. Client-Side Scripting:
 JavaScript is primarily used for client-side scripting, allowing developers to create
dynamic and interactive user interfaces within web browsers.

Yashwantrao Bhonsale Institute of Technology Page | 3

 Department of Computer Engineering Explore Goa Website

9. Highly Extensible:
 JavaScript can be easily extended through custom functions and libraries.
There is a vast ecosystem of third-party libraries and frameworks, such as React,
Angular, and Vue.js, that enhance development capabilities.
10. Server-Side Development:
 With the advent of technologies like Node.js, JavaScript can be used for server-side
development as well. This allows developers to use a single language for both client
and server-side, promoting code consistency.

Yashwantrao Bhonsale Institute of Technology Page | 4

 Department of Computer Engineering Explore Goa Website

4.Technology Used:-

1. HTML: HTML (Hypertext Markup Language) is the standard language for creating and
structuring web content. It uses tags to define elements such as headings, paragraphs,
links, and images. HTML provides the basic structure of a webpage and works in
conjunction with CSS and JavaScript to create a complete web experience.

2. CSS: CSS (Cascading Style Sheets) is a styling language used to enhance the visual
presentation of HTML documents. It enables the separation of content from design,
allowing developers to control layout, colors, fonts, and other stylistic aspects of a
webpage. CSS ensures a consistent and appealing look across different devices.

3. JavaScript: JavaScript is a versatile programming language primarily used for web

development. It enables the creation of dynamic and interactive content on websites.
JavaScript can manipulate the Document Object Model (DOM), handle events, and
communicate with servers, enhancing user interactivity and experience.

4. Visual Studio Code: Visual Studio Code is a popular, lightweight, and open-source code
editor developed by Microsoft. It supports various programming languages, including
HTML, CSS, and JavaScript. With features like syntax highlighting, debugging support,
and extensions, Visual Studio Code is widely used by developers for efficient code editing
and development.

5. Google Chrome: Google Chrome is a widely used web browser known for its speed,
simplicity, and performance. It supports the latest web technologies and developer tools,
making it a preferred choice for web developers. Chrome's Developer Tools provide
features for debugging, profiling, and analyzing web applications, making it an essential
tool for testing and optimizing web projects.

Yashwantrao Bhonsale Institute of Technology Page | 5

 Department of Computer Engineering Explore Goa Website

5.Program Code: -

JavaScript function to navigate webpage:

<script>
function goToMenuPage() {
window.location.href = 'menupage.html';
}
</script>

Fuction calling:
<button id="exploreNowButton" onclick="goToMenuPage()">Explore
Now</button>

JavaScript function to change URL of iFrame:

<script>
function loadPage(url) {
document.getElementById('contentFrame').src = url;
}
</script>

Function calling:
<a href="#" onclick="loadPage('Baga Beach.html')">Baga Beach</a>

<a href="#" onclick="loadPage('Bogmalo Beach.html')">Bogmalo Beach</a>

<a href="#" onclick="loadPage('Palolem Beach.html')">Palolem Beach</a>

Yashwantrao Bhonsale Institute of Technology Page | 6

 Department of Computer Engineering Explore Goa Website

<a href="#" onclick="loadPage('Dudhsagar.html')">Dudhsagar</a>

<a href="#" onclick="loadPage('Netravalli.html')">Netravalli </a>

<a href="#" onclick="loadPage('Dr Salim Ali.html')">Dr. Salim Ali</a>

<a href="#" onclick="loadPage('Casino.html')">Casino</a>

<a href="#" onclick="loadPage('Water Park.html')">Water Park</a>

<a href="#" onclick="loadPage('Snow Park.html')">Snow Park</a>

<a href="#" onclick="loadPage('Carnival.html')">Carnival</a>

<a href="#" onclick="loadPage('Chicken.html')">Chicken</a>

<a href="#" onclick="loadPage('Sea Food.html')">Sea Food</a>

<a href="#" onclick="loadPage('Meat.html')">Meat</a>

<a href="#" onclick="loadPage('Basilica.html')">Basilica</a>

<a href="#" onclick="loadPage('Aguada.html')">Aguada</a>

<a href="#" onclick="loadPage('Old Goa.html')">Old Goa</a>

<a href="#" onclick="loadPage('Museums.html')">Museums</a>

Yashwantrao Bhonsale Institute of Technology Page | 7

 Department of Computer Engineering Explore Goa Website

7.Output:-

Home Page

Menu Page

Yashwantrao Bhonsale Institute of Technology Page | 8

 Department of Computer Engineering Explore Goa Website

Sub-Page

Yashwantrao Bhonsale Institute of Technology Page | 9

 Department of Computer Engineering Explore Goa Website

8.Conclusion:-

The "Explore Goa" project represents a harmonious fusion of technology and culture, utilizing
JavaScript's dynamic capabilities to craft an immersive digital exploration of Goa, India. By
integrating interactive maps, image sliders, and dynamic content loading, the website transcends
traditional tourism platforms, inviting users to a visually enriching and user-friendly experience. The
seamless navigation facilitated by JavaScript functions and onclick event handlers ensures a fluid
journey through Goa's diverse attractions. This project not only addresses the immediate goal of
presenting Goa's beauty but also exemplifies the adaptability of JavaScript in enhancing user
interactivity. As we navigate through the intricate tapestry of Goa's cultural landscape, the website
stands as a testament to the power of JavaScript in shaping engaging, informative, and visually
appealing online experiences. Moving forward, the project serves as a springboard for continued
innovation, encouraging exploration not only of Goa but also of the dynamic possibilities inherent in
modern web development.

Yashwantrao Bhonsale Institute of Technology Page | 10

 Department of Computer Engineering Explore Goa Website

9.References:-

1. MDN Web Docs (Mozilla Developer Network):

 MDN JavaScript Guide
 MDN HTML
 MDN CSS

2. W3Schools:
 W3Schools JavaScript Tutorial
 W3Schools HTML Tutorial
 W3Schools CSS Tutorial

3. Visual Studio Code Documentation:

 Visual Studio Code Documentation

4. Google Chrome Developer Documentation:

 Google Chrome DevTools Documentation

Books that we referred:

Yashwantrao Bhonsale Institute of Technology Page | 11

 Department of Computer Engineering Explore Goa Website

Yashwantrao Bhonsale Institute of Technology Page | 12