Maharashtra State Board of Technical Education

Mumbai. (M.S.B.T.E)

MICRO PROJECT
On
“Tourist Website”

Submitted by
Mayur Mahajan
Gaurav kakde

G.S. Mandal’s
Department of Computer
Engineering Marathwada Institute of
Technology, Polytechnic, Chhatrapati
Sambhaji Nagar.
Academic Year: - 2023-2024
 MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION

CERTIFICATE
This is to certify that: -
Roll Enrollment Exam
Name of Student
No. No. Seat No.
45 Mayur Mahajan 2100660143

32 Gaurav kakde 2100660117

We have successfully completed “Tourist website” Micro-project for the

subject Client Side Scripting as in the enclosed ‘Portfolio’ during his tenure of
Completing the Diploma in Computer Engineering CO5I in Academic Year
2023-2024 from M.I.T. Polytechnic, Chhatrapati Sambhaji Nagar with Institute
Code 0066.
Date:

Prof. S.U. kakde Prof. A. S. Nagrik

Guide H.O.D.

Principal
Marathwada Institute of Technology,
Polytechnic, Chhatrapati sambhaji
Nagar
 INDEX
Annexure-IV Micro Project Teacher Evaluation Sheet
Annexure-I A “Format for Micro-Project Proposal”
1.0 Aim/Benefits of Micro Project (minimum 30-50 words)

2.0 Course Outcomes Addressed

3.0 Proposed Methodology (procedure in brief that will be followed to do the micro-
project in about 100-200 words.)

4.0 Action Plan (Sequence and time required for major activity.)

5.0 Resources required (major resources such as row material, some machining facility,
software etc.)

Annexure-II A “Format for Micro-Project Report”

1.0 Rationale (Importance of the project, in about 30 to 50 words. This is a modified

version of the earlier one written after the work)

2.0 Aim/Benefits of Micro Project:

3.0 Course Outcomes Achieved (Add to the earlier list is more Cos are addressed)

4.0 Literature Review

5.0 Actual Methodology Followed (Write step wise work done, data collected and its
analysis (if any). The contribution of individual member may also be noted.)

6.0 Actual Resources Used (mention the actual resources used).

7.0 Outputs of the micro projects (Drawings of the prototype, drawing of survey,
presentation of collected data, findings etc.)

8.0 Skill Developed/Learning outcome of this micro project

9.0 Applications of this micro project

 Annexure-I
Micro Project
Name of Programme: Diploma in Computer Engineering Semester: -4th
Course Title: Client-side scripting Code: 22519
Title of Micro Project: Tourist Website
Course Outcomes Achieved:
1. Create Menu and navigations in web pages
2. Create interactive webpage using program flow control structure.

Process and Individual Total

Roll Enrollment Exam Product Presentation Marks
Name of Student
No. No. Seat No. Assessment / Viva (10)
(06) (04)
45 Mayur Mahajan 2100660143

32 Gaurav kakde 2100660117

Comments / Suggestions about work:

Signature of Teacher :

Name of the Teacher : S.U. Kakde

 Annexure-I
Micro-Project Proposal
(Format for Micro-Project Proposal About 1-2 pages)

Title of Micro-Project: Tourist Website

1.0 Aim/Benefits of Micro Project (minimum 30-50 words)

This project intends to create an interactive and user-friendly platform for travelers, applying our
coding skills while focusing on enhancing the website's functionality, speed, and user experience.
Here are some of the following benefits of our website:

1. Enhanced User Experience: Client-side scripting allows us to add cool features like interactive
maps, image sliders, and real-time search, making our website more fun and engaging for
tourists
2. Faster Loading Times: With client-side scripting, our website will load quickly because some of
the processing happens on the user's device, reducing the need for constant server requests.
That means tourists won't have to wait long to access our site.
3. Personalization: We can customize the website based on the user's location and preferences. So,
if a tourist is interested in hiking, we can show them hiking trails nearby. This personal touch
makes our site more helpful.
4. Cross-Device Compatibility: Our website will work smoothly on various devices and browsers,
like smartphones, tablets, and laptops. This means tourists can access our information no matter
what they're using.

2.0 Course Outcomes Addressed

1. Create Menu and navigations in web pages

2. Create interactive webpage using program flow control structure.
3.0 Proposed Methodology (Procedure in brief that will be followed to do the micro-
project in about 100-200 words.)

1. Firstly, we did discussion on topic and finally came to a conclusion and decided a topic.
2. After proper selection of topic, we started to prepare proposal for acceptance of our
project topic.
3. After acceptance of our microproject topic. then we used Figma to design a template
of our website.
4. After we started writing coding for our microproject
5. After all we successfully executed the program on Vscode.
6. And the program was giving the required output as expected.
4.0 Action Plan (Sequence and time required for major activity.)
Name of
Sr. Planned Planned
Details of Activity Responsible
No Start Date Finish Date
Team Members

1 Topic selection 29/07/23 30/7/23 Mayur, Gaurav

2 Preparation of proposal 01/08/23 06/08/23 Mayur, Gaurav

3 Submitting proposal 10/08/23 15/08/23 Mayur, Gaurav

4 Collecting information &

detailed study of project 16/08/23 20/08/23 Mayur, Gaurav

5 Literature survey 21/08/23 30/08/23 Mayur, Gaurav

6 Stepwise Methodology 1/09/23 10/09/23 Mayur, Gaurav

7 Writing code & output 11/09/23 18//09/23 Mayur, Gaurav

8 Final Preparation of report 19/09/23 26/09/23 Mayur, Gaurav

9 Submission of report 27/09/23. 27/09/23 Gaurav, Mayur

5.0 Resources required (major resources such as row material, some machining
facility, software etc.)
Sr. Name of Resource/Material Specification Qty. Remarks
No
1 Laptop I5 11th gen

2 Vscode Version 1.7

Names of Team Members with Roll No.: -

Roll No. Name of Student

45 Mayur Mahajan

32 Gaurav kakde
 Annexure-II
Micro-Project Report
(Format for Micro-Project Report minimum 4 pages)

Title of Micro-Project: - Tourist website

1.0 Rationale (Importance of the project, in about 30 to 50 words. This is a modified

version of the earlier one written after the work)

As our Microproject topic is Creating a tourist website with client-side scripting is crucial for delivering
an engaging, responsive, and personalized user experience. It enhances speed, offline access, and cross-
platform compatibility, making it easier to attract and serve a diverse range of tourists effectively. This
project allows us to apply what we've learned in class to a real-world scenario, enhancing our coding
skills. It also presents a practical challenge in terms of user experience, cross-device compatibility, and
personalization, which are valuable skills in today's web development landscape. Moreover, the project
offers a chance to create something useful and engaging for potential tourists, making it not only
educational but also rewarding.

2.0 Aim/Benefits of Micro Project:

This project intends to create an interactive and user-friendly platform for travelers, applying our
coding skills while focusing on enhancing the website's functionality, speed, and user experience.
Here are some of the following benefits of our website:

1. Enhanced User Experience: Client-side scripting allows us to add cool features like interactive
maps, image sliders, and real-time search, making our website more fun and engaging for
tourists
2. Faster Loading Times: With client-side scripting, our website will load quickly because some of
the processing happens on the user's device, reducing the need for constant server requests.
That means tourists won't have to wait long to access our site.
3. Personalization: We can customize the website based on the user's location and preferences. So,
if a tourist is interested in hiking, we can show them hiking trails nearby. This personal touch
makes our site more helpful.
4. Cross-Device Compatibility: Our website will work smoothly on various devices and browsers,
like smartphones, tablets, and laptops. This means tourists can access our information no matter
what they're using.
3.0 Course Outcomes Achieved (Add to the earlier list is more Cos are addressed)

1. Create Menu and navigations in web pages

2. Create interactive webpage using program flow control structure.

4.0 Literature Review: -

As Our project topic is Tourist website in this, we learned detail about creating Gui in
which button, textbox etc. For this to collect brief information about the topic we referred
various websites and also saw various YouTube videos and gathered the information in
detail.

 https://www.youtube.com/watch?v=htznIeWKgg8
from this website we learn the JavaScript for the backend of our project and also learn
event Handling, buttons and different thing from the video
we learn what is exactly JavaScript is JavaScript is a text-based programming
language used both on the client-side and server-side that allows you to make web
pages interactive. Where HTML and CSS are languages that give structure and style
to web pages, JavaScript gives web pages interactive and Adaptive

 https://www.figma.com/files/recents-and-sharing?fuid=1290364335048635817
we know that while developing the website the important part is the template of the
website form the figma.com we learn the how to build template of the website, which
gives the friendly environment for the user, and which make the website more
interactive

 https://code.visualstudio.com/
we use this ide for the basic code editing which are follows following charters tics
Visual Studio Code is a streamlined code editor with support for development
operations like debugging, task running, and version control. It aims to provide just
the tools a developer needs for a quick code-build-debug cycle and leaves more
complex workflows to fuller featured IDEs, such as Visual Studio IDE.
 https://www.geeksforgeeks.org/event-handling-in-java/
from this website we learn about the event handling and it classification
An event can be defined as changing the state of an object or behaviour by
performing actions. Actions can be a button click, cursor movement, keypress
 through keyboard or page scrolling, etc. The java.awt. event package can be used
to provide various event classes.
Classification of Events
Foreground Events
Background Events

 https://www.w3schools.com/html/
from this we learn the basic html tags which are necessary for the template building
like href. heading, paragraph tag

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
 https://in.pinterest.com/
from this website we taken the images that are needed for the website development related to
travelling

 https://en.wikipedia.org/wiki/CSS
from this website we learn the what is exactly CSS
What CSS means?
Cascading Style SheetCSS is the acronym of “Cascading Style Sheets”. CSS is a computer
language for laying out and structuring web pages (HTML or XML). This language contains
coding elements and is composed of these “cascading style sheets” which are equally called
CSS files.

 https://www.microsoft.com/en/microsoft-365/word
 from this website we done the report writing, and we edit the report form here

5.0 Actual Methodology Followed (Write step wise work done, data collected and its
analysis (if any). The contribution of individual member may also be noted.)

1. The first and the foremost task was to decide the topic and we were so confused and
after discussed with the teacher and we finally chose the topic creating a tourist
website.
2. After the selection of topic, the next task was to prepare the proposal of the micro-
project
3. After the preparation of proposal, it was supposed to be accepted to the subject guide.
4. Once the proposal, was submitted then the main task starts then we started to
collecting detailed information about our project.
5. As work was distributed so one of us was responsible for collecting and it has given a
fixed deadline.
6. After that we immediately start making the report where Gaurav was supposed to
write the aim and benefits, course outcomes related to our project and it has fixed
time slot.
7. The then main task was to write the literature for the project topic which is the main
part of the report, Gaurav and Mayur took the charge to write the literature review
which includes all the detailed information and the additional and external help
acquired from various websites and YouTube channels.
8. As some of the information was collected by Mayur and some by Gaurav so whatever
information collected and learnt by Mayur he shared and discussed with Gaurav so
that he also gets to know and vice versa.
9. After that we both wrote the actual methodology in which it is supposed to write the
detailed contribution of each team member.
10. Once literature review & methodology is written Then, we were all set to write the
program and before we referred one you tube channels to understand implementation.
11. After that we know about the Figma which help us to create template for
developing the website.
12. After that we took some of the support from teacher and also with the help of self-
think, we wrote a program and although we wrote the program as per our ability there
were somewhat errors found.
13. The then next main task was to find errors and eliminate it.
14. After finding errors and eliminating it the developed.
 15. After completing program work, we started writing report for our microproject.

16. after that we successfully completed our microproject

6.0 Actual Resources Used (mention the actual resources used).

Sr. Name of Specification Qty. Remarks

No Resource/Material
1 Laptop I5 11th gen

2 Vscode Version 1.7

7.0 Outputs of the micro projects (Drawings of the prototype, drawing of

survey, Presentation of collected data, findings etc.)
8.0 Skill Developed/Learning outcome of this micro project

a. Prepare project proposals before starting the project.

b. Work independently for the responsibility undertaken.
c. Work persistently to achieve the targets.
d. Collect relevant data form different sources.
e. Confidently answer the questions asked regarding the project.
f. Ask help from others including subject guide whenever required,

9.0 Applications of this micro project: -

1. Interactive Maps: We can create dynamic maps that allow tourists to explore destinations, find
attractions, and plan routes easily.
2. Real-Time Weather Updates: Implementing weather widgets helps travelers check current
conditions and prepare accordingly.
3. Booking and Reservations: Through client-side scripting, we can enable tourists to make real-time
bookings for hotels, flights, tours, and activities, providing convenience.
4. Multilingual Support: Adding language translation features ensures our website is accessible to
tourists from different parts of the world.
5. User Reviews and Ratings: We can use scripting to allow users to leave reviews and ratings,
helping others make informed choices.
6. Interactive Galleries: Creating dynamic image galleries showcases destinations and
accommodations effectively, making our site more engaging.
7. Personalized Recommendations: With scripting, we can offer personalized recommendations for
dining, events, and activities based on user preferences and location.