The aim of this project is to serve as a tool for the user, helping them to find hotels with a simple search by city and country with results showing in the map that for default is centered in Ireland. Another map of Ireland shows heritage sites of national and tourist interest in Ireland, as an option to the user make their decision where to stay.
- As a First Time Visitor, I want to find a hotel in the Republic of Ireland.
- As a First Time Visitor, I want to learn where are located the heritage sites in Ireland.
- As a Returning Visitor, I want to get details about hotels in different countries to plan my holidays.
- As a Returning Visitor, I want to increase my knowledge about Ireland culture.
- As a Frequent User, I want to get information like the rating and website of a hotel to decide the best place to stay.
This website was planned for mobile first, with a clean and simple design, and heavily relied on google maps javaScript API samples. On the first page, is the main part of this project a map where the user can search for hotels with place autocomplete. The search can be in a specified place within a given country and show details of each hotel. The about section explains the website and guides the user on how to use it. With the second map, the user gets a bird's eye view of Ireland's heritage sites.
As future features would be interesting add Geolocation API and Google Photos API.
- Git Was used for version control by utilizing the Gitpod terminal to commit to Git and push it to GitHub.
- GitHub Used to store the project after it has been pushed from Git.
- Boostrap The Bootstrap library was used throughout the project to assist with the responsiveness and styling of the website.
- FontAwesome The project uses Font Awesome icons.
- Google Fonts Google fonts were used to homogenize the project. The font imported to the style.css file was 'Oswald'.
- Google Maps Platform APIs Google maps and places API.
It was used light color in the background to not distract the user neither compete with the map's content.
The font Oswald was used throughout all pages.
Navbar in the small screen was kept without dropdown menu because it has only 3 items and it doesn't take much space, this way the menu stays visible all the time.
Tablet Wireframe Mobile Wireframe
- HTML 5
- CSS 3
- JavaScript
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
- The Website was tested on Google Chrome, Windows, Linux Opera, and Safari browsers.
- The website was viewed on a variety of devices such as iMac, Dell laptop, iPad Air1, Samsung S9, iPhone8, iPhoneX, iphone12 pro & galaxy A30.
Because the map is already loaded in Ireland the user just needs to type a city and find a hotel to stay.
The map in the Heritage page gives to the user a bird's eye view of all heritage sites in the Republic of Ireland.
* As a Returning Visitor, I want to get details about hotels in different countries to plan my holidays.
The user can search in any city and country of their choice.
In the heritage map, the user can find where is a specific site of tourist interest.
* As a Frequent User, I want to get information like the rating and website of a hotel to decide the best place to stay.
They can click on a specific mark on the map and see useful information about that hotel.
To ensure there were no syntax errors in the project, the W3C Markup Validator, W3C CSS Validator Services and Jshint were used to validate every page of the project.
-
W3C HTML Validator All HTML pages of this project went through W3C Markup validation service, With no errors to show.
-
W3C CSS Validator The CSS of this project went through W3C CSS Validation Service, With no error found.
-
Jshint No errors found.
-
Lighthouse Google Chrome Tools
After writing the code on Gitpod, I used the Git Commands:
- git add and file or directory name adds files to the staging area for Git.
- git commit -m "message", record the changes made to the files to a local repository.
- git push, sends local commits to the remote repository on GitHub.
- The deployment was deployed to the GitHub pages. From my GitHub web page, I open the repository I want to deploy, in this case, “Username-projectname”. Then at the top right of the page click on the 'Settings' link, and scroll down to the GitHub Pages section, I selected the master branch as the source, click on save, and I was provided with the following message: Your site is published at (project URL)/
- Once you locate the repository you want to fork, at the top right of the page below the right items in the navigation bar the fork button can be located.Now you should have a copy of the original repository in your GitHub account.
- important not forget GitHub repositoryYou find step by step how to clone a repository from GitHub to your computer on GitHub Docs Cloning a repository from GitHub.
-
MediaGeoJson Map data.gov.ie
- My Mentor Reuben Ferrante for his help and feedback during very early calls.
- Tutor support at Code Institute for their support.