This website is for a travel company who will take requests froma a form that people looking for vacations submit.
The website can be viewed here.
This website has 3 main purposes:
- Introduce perspective clients as to what the company can offer including testimonials.
- Allow people to search map, weather and currency coversions for destinations.
- Allow people to submit queries via a form that emails the company.
The initial design for the UX can be found here
The website is broken into 3 pages:
- Home/Index
- Search
- Contact Us
This page gives people an insight into the company and a top 5 list of popular travel destinations.
On this page the user will be able to search destinations on a google map via the places API from google. There is a search box in the map that users can enter a destination. There is a 3 day weather search also. Users enter a destination and the results are returned via an API from openweathermap. Finally there is a currency converter that users can get up to date currency exchange rates provided via the fixer.io API.
This page gives the customer a form that they can use to seek assistance from the company in finding holidays for them. It also contains a number of previous customer testimonials.
- responsive design to handle smaller devices
- interactive form that sends email response to the company
- Use of APIs for up to date information on weather and currentcy
- Use of google maps API for searching destinations.
- links to different media links including facebook, twitter and instagram.
- Future features include adding a hotel room search engine.
- Add an activities/excursions search function.
The tools used for the creation and management of this project were GitPod abd GitHub.
HTML and CSS were used to write this project. The project aslo makes use of
- Javascript/JQuery, used for the menu bars for mobile responsive mode
- fontawesome and bootstrap
- google font
Responsive testing
- Change layouts/sizes of fonts, forms and sections for mobile and tablet size devices.
- This was done by using both developer tools during development and for final testing using mobile, ipad mini and laptop to test the 2 media queries against the original styling.
- Testing the form on contact page.
- Trying to submit the form with fields left empty to make sure the requirement does not allow user to submit.
- Testing that when forms are submitted that emails get sent to the company.
- Trying the reset button wipes the fields clean when pressed.
- Testing the footer links work correctly.
- pressing the contact us link brings you to the contact form.
- pressing the social media links opens facebook and twitter respectively.
- Testing the google maps functionality brings you to the search result.
- Confirm it brings you to the map for the destination.
- Testing links and navbar.
- Confirming links and buttons send users to the correct pages.
- Testing the currency converter works.
- Tested all currencies to confirm that the conversions worked
- Testing the weather app works correctly and provides 3 days weather.
- Tested a number of locations.
- Tested that an error message is given when the user enters an incorrect destination
This project was deployed to GitHub on on every push to master. This allowed for version control.
Versions of the deployed code can be viewed here
##Bugs Issues with Google API Key have meant that although the search function in the map was initially working at time of development and testing, access to this has been revoked by Google since then. This issue has not been resolved with google at time of submission.
Acknowledgements
- Google for use of their maps API, code and documentation on how to use.
- Fixer.io for use of their API for currencies.
- EmailJS for use of their services of sending form inputs to emails.
- Openweathermap for their API for weather.