This website is designed to privide the user with the posibility to search for holiday destinations. Here, the users will find their desired city, and will have the posibility to view their wanted points of interest.
- The customer wants the users to be able to find holiday destinations and points of interest. The search should be limited to five countries:
- JAPAN
- USA
- BRASIL
- UK
- SOUTH AFRICA
also, the user should be able to search for different countries, and for this the All
option has been introduced.
- The customer wants the user to be able to display points of interests individually:
- HOTELS
- RESTAURANTS
- MUSEUMS
-
The customer wants the users to be able to contact them if they have a request.
-
The customer wants the users to find some recommendations on the page.
This website is friendly, easy-to-use, and is made with responsive approach to provide the users with the best experience.
- as a user, I want to be able to search for destinations, and display them on a map for better visualisation
- as a user, I want to be able to display the results by category
- as a user, I want to be able to contact the company if a have any requirements
- as a user, I want to be able to find informations/ suggestions about a few destinations for better experience
- Searching on the map - allow users to search for their desired place.
- Autocomplete - allow user to receive predictions when they search for places, for a better experience.
- Country restriction - allow users to select a destination country before searching for a city. This is made to restrict predictions to the selected country, for a better experiece. Also, the user have the option to search for a place everywhere in the world by selecting
All
. - Results by place type - allow user to filter the results by selecting the place type (e.g.
hotel
,restaurant
,museum
). - Info window - allow users to find details about a place by selecting it.
- Contact form - allow users to contact the company for any information needed.
- Info buttons - allow users to find informations about five suggested cities.
- Live chat - this will allow the user to contact the company on much efficient way.
- Social websites - this will allow the user to see updates, offers, etc.
- Shop - this will allow the user to buy their holiday direct on the website.
- Flights - this will allow the user to search and book the flight for their holiday.
HTML5 was used for structure | CSS3 was used to style the page |
---|---|
JavaScript was used for functionality | jQuery was used for DOM tree manipulation |
Bootstrap was used for responsivity | Google Maps API was used to create the map |
Emailjs was used for the contact service | Jasmine was used for atomated tests |
This project has been developed using the Cloud9 IDE
This project has been tested both manually and automatic:
-
manually:
search
field - click on the search field - type the desired place - press enterautocomplete
- click on the search field - start typing the desired place - it will start giving predictions - choose the desired one and press enter (or just click on it)
NOTE: by default, the map will get results only for USA.
change the country search
- click on the country selector - click on the desired contry or selectAll
to search all around the worldgetting results
- once the steps mentioned above has been done, the map will start dropping markers - implicit for hotelsswitching to restaurants
- after the steps above check therestaurant
button - it will change the markers on the map according to the requested buttonswitching to museums
- after the steps above check themuseum
button - it will change the markers on the map according to the requested buttongetting place informations
- once the map display the markers, click on any of them - it will display informations ablut that placeinformation buttons
- the website provides five buttons which gives some informations about the five selected cities - in order to see those informations simply hover the mouse over the buttoncontact form
- click on thecontact
, on the navbar - it will display the contact form - try to submit an empty form - it won't work untill all fields are filled accordingly
-
automated:
Jasmine testing framework
was used to test the sendMail function
BROWSER | VERSION | COMPATIBILITY |
---|---|---|
GOOGLE CHROME | LATEST | 100% |
SAFARI | LATEST | 100% |
MOZILLA FIREFOX | LATEST | 100% |
SAFARI (mobile) | LATEST | 90% |
ANDROID | LATEST | 90% |
This project can be deployed to any hosting platform. However, the structure and file names must be kept as they are.
google-maps-project
-css
-pictures
travel.jpg
style.css
-js
jQuery.js
maps.js
sendemail.js
-test
spec.js
test.html
test.js
index.html
README.md
The map
and pieces of code have been inspired from Google Developers Console
The background image
have been downloaded from Google Images
The informations on the info buttons
have been written by Dave Owen
Special thanks to Moosa Hassan for the support and feedback on this project.