code-institute-submissions / project-2-interactive-frontend-development-milestone-project Goto Github PK

Project 2 interactive-frontend-dev-project

The goal of the project was to design a interactive frontend only website. The website is designed for people planning a holiday to allow them to search for different activities they can partake in while on holiday.

-UX-

The process for designing this website began my searching [1] and [2] for design ideas along with travel websites. The websites used for design ideas included [3] and [4]. The basic design for the navbar was taken from [5]. The google maps platform has various guides and support [6] thats useful when designing map functionality.

1. https://www.awwwards.com/
2. https://tympanus.net/codrops/
3. http://psd.la/startravel/#
4. https://www.tui.co.uk/
5. https://getbootstrap.com/docs/3.3/components/#navbar
6. https://developers.google.com/places/web-service/intro Other website I looked at for design ideas https://www.w3schools.com/ (used as a reference for basic commands)

Place Types https://developers.google.com/places/supported_types#table3

CCS ratings script https://www.cssscript.com/radio-input-based-star-rating-control-pure-css/

-page by page walkthrough of website features- This project consists of one webpage. The page consists of a navbar with internal links for each continent and the contact form. The map part of the page allowing the user to search difference cities, towns and postcodes within various countries to obtains infomation on various places including hotels,art galleries museums bars restaurants and cafes. Clicking on each marker provides information about each location including the address, Telephone number, aggregate review and website of the location. Below the map is the list of the various places listed on the map corrisponding alphabetically to the markers on the map. Below that are the travel locations that are searchable within each continent and the contact form below that.

Potential future features.

1. A website forum allowing people to discuss there holiday experieces with other customers.
2. Sign in / profile page
3. Email subscribe list
4. Add Google maps APi function to show multiple place types at one time.

-Technologies used-

• Bootstrap ( https://getbootstrap.com/ ) o Bootstrap was used for the mobile-first design of the website.

• Cdnjs ( https://cdnjs.com/libraries ) o Cdnjs add the font awesome library for fonts and CSS framework.

• Hover ( http://ianlunn.github.io/Hover/# )Hover ( http://ianlunn.github.io/Hover/# ) o Hover was used to add hover effects to buttons,links etc

• JQuery (https://jquery.com/ ) o JQuery is used to provide DOM manipulation.

-Code Testing-

I’ve tested the code in chrome, Firefox, Microsoft edge browser and safari as well as the mobile versions of these browsers. I used W3C for CSS https://jigsaw.w3.org/css-validator/and HTML https://validator.w3.org/ to remove errors. The email.js code in the booking form has been tested and functions properly. The Google Maps API has been tested to search for cities, towns & postcodes. The expand and collapse functionality have all been tested. The maps country selection and radio button selection has been tested. The navbar is functionality works.

-Code Deployment-

The project is pushed to github process used - link cloud9 to github git remote add origin https://github.com/GrantMCA93/Project-2-Interactive-Frontend-Development-Milestone-Project.git git add . git commit -m "" <-- in quote marks describe changes made --> git push -u origin master

The projects is hosted on Github pages

-Credits-

Content Google Cloud Platform APIs being used

1. Places API
2. Maps Javascript API

The longitude and latitude coordinates being used for the locations on the map were obtained from google maps.

-Media- The images used for each continent are all images founds from yahoo images, all the images licenses are Free to modify, share and use commerically Europe Image(europe-backgroundimage.jpg) - https://upload.wikimedia.org/wikipedia/commons/9/9f/Old_Town_Square_Praga_01.jpg North America Image(northamerica-backgroundimage.jpg) - https://www.flickr.com/photos/dipfan/932088080?ytcheck=1&new_session=1 South America Image(southamerica-backgroundimage.jpg) - https://www.flickr.com/photos/110331586@N06/11159285123 Africa image(africa-backgroundimage.jpg) - https://en.wikipedia.org/wiki/Clifton,_Cape_Town#/media/File:Clifton_Beachs.jpg Australia Image(australia-backgroundimage.jpg) - https://3.bp.blogspot.com/-Y2Cv0ulZjVc/WNglvEFeFCI/AAAAAAAAJSY/cQshrHpVrNs_BsFahxsrFhgljD52Zd2gQCLcB/s1600/The%2BTop%2B21%2BCountries%2Bfor%2BQuality%2Bof%2BLife%2BHave%2BBeen%2BRanked%2B-%2BAustralia.jpg Oceania Image(oceania-backgroundimage.jpg) - https://en.wikivoyage.org/wiki/Queenstown-Lakes#/media/File:Lake_Hayes_by_queenstown.JPG

The plane image used within the title was found on yahoo images, the images license is Free to modify, share and use commerically plane image(Airplane.svg.png) - https://upload.wikimedia.org/wikipedia/commons/e/e9/Airplane.svg

-Acknowledgements-

Mentor:- Chris Zielinski [email protected]