This website contains a web application that offers the ability to connect visitors and users with Gyms and Exercise Centres either nearby to their location or around a desired location. The web application uses a suite of Google APIs to provide a map display and make use of the Places database and autocomplete search feature to display the locations and retrieve their details and ensure a more accurate user-friendly search experience.

The Gym Search feature offers two search options to the user. The first allows them to select their desired country and then enter an address in the field that will autocomplete and offer suggestions and predictions. The second is to use the Device location search which uses the Geolocation Web API to read the device’s location and then initiates a map search on that location.

The purpose of the website is to connect visitors with potential exercise locations as easily and conveniently as possible within a space that could be expanded to provide a more comprehensive workout planner service in the future.

The main principle behind the design of the website was to create a space that was easy to navigate, that offered clear and easy to understand information and easy to use. The driving force behind the design was my desire to create a website that melded high energy colour and imagery with clear and legible information and an immediately understandable structure.

The colour scheme is quite simple, essentially consisting of only three colours. The primary colour, which is used frequently throughout the design is #F39237. This is a very strong and eye-catching colour that conveys the sense of energy and activity that I wanted to associate with the website. I believe that by using an energetic colour in this manner it will help to build the identity of the website as well as subconsciously create a link between the website and the energetic activities involved in exercising in the mind of any visitor to the site. The other two colours in use are #F9F9F9 and #1E3231, and they used for accent and contrasting purposes. #1E3231 is a shade of dark – grey navy and I find that it stands out quite well against both the white background of certain sections and the reduced opacity #F39237 which is used as a background colour in other sections. #1E3231 is therefore used as the primary font colour for most instances of text on the website as I believe it to be more comfortable and easy on the eyes than a typical black font colour. #F9F9F9 is an offwhite shade that is used as the text colour for navbar elements and any links or CTA buttons. Reserving this colour only for actionable elements helps a visitor to understand the navigation and structure of the site more quickly and easily as they can identify clickable links just through their colour.

There are two fonts used on the website. The first, Montserrat is a very minimal and clean font and is used for the navigation options and important headings. The second font used is Raleway and is used for information paragraphs, I chose this font for this function because I consider it to be a very readable font and it allows for fast legibility and information digestion. I intentionally used two separate fonts for these functions to enable a user to discern the content and importance of text from a quick scan and allow a user to intuit and learn the structure of the website more easily than they would have been able to if the website used only one font type.

There are not a lot of images used in the design of the website. The most notable example, however, is the background image of the landing page. This is an energetic image of a man in the process of working out. This image I believe is very effective at setting the tone and further reinforcing the theme and purpose of the website alongside the name and general branding. This image ties in with the theming of the design well, evoking high energy but by overlaying a low opacity screen on it does not overpower the page.

Additionally, whenever a user selects a gym on the map, an image of the gym is supplied in the additional information section. Using JavaScript I was able to access the photos attached to the location in the Google Places Library, and then loop through the images until one with a suitable landscape orientation was encountered. This image is then be displayed alongside the other location details and with the screening process, the layout and display of information would be consistent and clear while clicking between different locations. I believe that this was necessary to not only maintain the neat display of information but to provide a pleasurable experience to the user, as they clicked through different gyms to compare their details and appearance.

If a location did not have any images associated with it in the Google Places Library or that it did not have any available images in the correct orientation. A simple placeholder image is used. This image, created by me, contains the text “No Image Available” with a background colour of #F39237 to maintain the site’s consistent theme while also informing the user for the reason that no image is displayed as I believe that this provides a better user experience than just displaying a blank space.

The wireframes for the website were developed using Figma

• Landing Page Wireframe - View

• Landing Page - Mobile Wireframe - View

• Gym Finder Wireframe - View

• Gym Finder - Mobile Wireframe - View

The landing page is the user's first introduction to the site and as such, it was important to not only provide information that will inform the user about the purpose and functionality of the website but to set the tone of the website and to start to instil the identity of the website onto the user. The landing page, therefore, contains three primary elements. A large eye-catching callout with a CTA button that links to the gym finder application. A text section containing information about the website and explaining some of how the gym finder application works and a large hero image in the background of a man in the middle of working out that helps to set the tone of the website and create a sense of energy and activity.

The most important feature of the site is the gym finder page. The gym finder application allows a user to search around a target location for gyms and other businesses related to exercise and fitness. It visually displays the results on a map that is powered by the Google Maps API, with the 20 nearest locations displayed with custom markers. These markers can be selected to bring up the name of the location on the map, and on the sidebar, to the left of the page, an information window will open with more extensive details including the address, location rating and website along with an image of the location.

The autocomplete search utilises the Google Place Autocomplete API. It reads any string typed into the text input field and turns that into an autocomplete request. The results are limited to addresses to streamline the experience for the user rather than allow for businesses and other locations to fill up the prediction options. Using the country selection dropdown input which contains a full list of countries a user can select a specific country in which they want to search. After selecting a country the map will relocate to that country and all predictions suggested to users will be located within that country. This allows for much more accurate autocomplete suggestions, and again improves the user experience of the feature.

The geocode search uses a Google Geocode API request. If a user decides to hit enter or to click the button to submit their text input, the string will be sent in a Geocoder request and be returned as lat, lng coordinates that are then used to centre the map on the location where the gym search will be carried out. As with the autocomplete search it is possible to specify a country to search in which will recenter the map, however in the case of the geocoder search it only biases the result and if no location within the specified country is found it will not return any result. Using a country-specific search increases the accuracy of the search but restricts the results.

The geolocation search uses the Web Geolocation API to first request from the user permission to use their location and if the user approves it will use their device's functionality to provide a location for them. The result of this search again contains the lat, lng coordinates which are used to centre the map with great accuracy. This method of searching is the most convenient for searching in the immediate local area of the user as it's not necessary to know any addresses to search.

The results of the search are displayed as so, with orange markers on the map. Each of these markers represent a gym or similar location around the radius of the search location. To provide a good selection of results without overloading the map, only the closest 20 locations are displayed. If a user selects one of these markers a small window will pop up above the marker with the location's name. As well as that a side panel below the search input section will open and display further details about the location.

After a marker is selected on the map a display opens beneath the search options. This panel will display important information about the location selected to help the user make their decision to enable them to conduct further research and more effectively compare their options. As is visible above, to provide accurate information and consistent feedback to the user, if a location does not have value for a certain property in the Google Place database a predetermined placeholder response will display. In the case above the location had no affiliated website, so the gym finder application notifies the user as such instead of leaving the space blank or allowing the previous location's information to persist and cause confusion.

• HTML5
• CSS3
• JavaScript

1. Bootstrap 4.1.3:

• Bootstrap was used to create the initial base template of the design that was then built on top of and customised further using CSS.

2. Google Fonts:

• Google fonts was used to import the fonts that were used as the primary typography on the website.

3. Font Awesome:

• Font Awesome's icon library was used to reinforce sections and information points throughout the website.

4. jQuery:

• Bootstrap's jQuery library is in use on the website to increase the functionality of some Bootstrap components.

5. Git

• Git was used as the primary version control software for the project. It was operated using the Gitpod terminal.

6. GitHub:

• GitHub is where the project is stored. It was also used to view version control changes.

7. Gitpod

• Gitpod was the IDE used to program the website.

8. Coolors

• Coolors was used to generate colours for a scheme that was harmonious and evoked the desired aesthetic.

9. Figma

• Figma was used to generate the initial wireframes and mockups that were used to inform the programming of the website.

10. Responsive Viewer

• This chrome web extension was used as it allows for multiple views of a website at multiple scales and device sizes at once. It was used for testing of responsive design.

11. Chrome DevTools

• DevTools was used for analysing the code and design of the practice during development. Also used to test changes in real-time.

12. Google Cloud Platform

• The Google Cloud Platform was used to manage the Google APIs used in the project. It is also where I styled the Map used in the project.

13. Google Maps API

• The Google Maps API is used to support and display the map in the gym finder application.

14. Google Places API

• The Google Places API is used to search for locations in the Places library and also to access information and details about the locations.

15. Google Geocoding API

• The geocoding API is used to convert an address string into a lat lng attribute that can then be used in a search.

16. Google Autocomplete API

• This API is used to supply autocomplete suggestions for the address search input.

17. Geolocation Web API

• This API was used to request the user's permission to use their device's location in a search.

18. Papa Parse

• Papa Parse was used to parse the CSV file containing the full list of countries and their two-character country codes.

19. gtMatrix

• GTmatrix was used to test website performance and page load speed.

20. Multi Device Website Mockup Generator

• This website was used to generate the image at the top of the readme.md file.

I tested the website thoroughly, throughout development I would ensure that it looked and behaved as designed and laid out in the wireframes. The website was tested at multiple scales, through desktop and mobile devices with no bugs or issues remaining in the deployed version. The website was viewed and tested through the following browsers and devices:

• Mozilla Firefox

• Google Chrome

• Microsoft Edge

• Opera

• A full range of sizes and devices using Chrome DevTools, Responsive Viewer and Am I Responsive?

At the end of the project, the code was put through CSS and HTML validators to ensure there were no errors presented.

To ensure that the website performed well without any major delays or issues especially on the initial load I tested it using GTMatrix where both pages received positive results.

Expected: When the user accesses the website for the first time they should be presented with information about the website and the web application.

Result: When the user arrives at the landing page they are presented with a text paragraph giving an overview of the purpose for the website and the functionality of the web application.

Expected: Wherever the user is on the website they should be able to immediately identify and locate the navigation structure for the website.

Result: At all times the navigation bar is fixed at the top of the screen providing clear navigation opportunities to the user.

Expected: Upon loading landing page, the user should be presented with clear navigation options to the gym search application. When they navigate to the gym finder application they should find it easy to understand and use.

Result: When the landing page is accessed, there is a clear navigation option “Gym Search” at the top of the page. There is also a large CTA button in the page heading. Both of these options will navigate the user directly to the gym search page. On the gym search page the user is presented with several clear input options with labels and example search options of “Ireland” and “Dublin” as placeholders. The map by default is centred on this location to provide the user with an example search result.

Expected: The user should be able to enter their desired address or area and submit. They should then be presented with a selection of potential locations around that area.

Result: The user can enter their desired address, they will then be presented with autocomplete options. When the user selects an option the map will navigate to that spot and display markers on the map representing identified locations.

Expected: The user should be able to use their device's location to search the map quickly and conveniently.

Result: The user can click the "Use device's location" button which will then send a request to the user to allow permission to use their device's location. When they accept, the map will navigate to their device's location and display results.

Expected: The user should be able to submit a search and then click on any of the displayed locations to access information for them.

Result: After submitting the desired search location the user is presented with 20 potential locations marked on the map. When the user clicks on any of the markers the application will display a window containing important information regarding the location.

Expected: The user should be able to click on multiple markers to compare rating information for them.

Result: The user can click on a marker which will then display the information for that gym. They can then either close their selection using the "x" and click a new marker or they can simply click on a new marker to overwrite the existing information to view the new results.

Issue: Some locations do not have rating information available through the Google Places Library which results in the previous location’s rating persisting incorrectly.

Fix: Upon clicking on a new location, a check is done to determine whether the location has a rating attribute. If it does not have a rating available the website now provides a “No available rating” message to ensure accurate feedback for the user.

Expected: The user should be able to search for more general areas such as "London" or "East London" and not have to find the exact address to search.

Result: The user can enter their desired location and hit submit. The application will use a geocoder search to convert their address to coordinates and navigate the map to that location.

Expected: The user should be able to narrow down the search area to a country to guarantee a more accurate result.

Result: The user can select any country from the dropdown list. This will recenter the map to display the centroid coordinates of that country. Both the autocomplete search and the address search will then restrict the results to locations within the chosen country when possible.

One noteworthy bug that was discovered towards the end of the project that had to be addressed was the tendency of the landing page elements to compress upwards on short screen sizes. This resulted in text elements being displayed on top of each other and white font being displayed against a white background.

I solved this problem by first identifying that the issue was being caused by the image container element having a height that was set with vh as its unit. This would normally not be a large issue however on a screen with a small width the text would wrap and push downwards as the image it was supposed to be overlaying on was compressing upwards. I solved this issue by assigning a min-height attribute to the image container so that it would not compress past a certain height, and as the window got shorter the content would simply overflow the page. Since the overflow setting of the parent container was set to scroll this was an acceptable solution that allowed the page to maintain it's sctructure while allowing all of the content to be accessible.

.image-container {
    position: absolute;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-content: center;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 50vh;
    max-height: 50vh;
    min-height: 35rem;  /* This was the fix that enabled the page to retain it's shape as it was made shorter*/ 
} 

Another noteworthy bug that I found interesting was one that caused the gym image to stretch and flex outside of its original ratio when the webpage was open in Google Chrome but not when it was open in Firefox, or Edge or Opera.

This was a strange bug and took me a while to figure out the reason why it would be affected one browser and not the others. In the end I believe it has something to do with the way that Google Chrome and Firefox differ in the way that they interpret flex items when they don't have specified heights and widths. In this case because all of the images were going to be different sizes and ratios, resolutions etc I decided it wasn't feasible to be too strict with the size constraints so I was trying to use max-width and max-height elements with the elements height set to 100% and width set as auto in the idea that it would expand to fit the container.

.location-image {
        display: flex;
        text-align: center;
        padding: 0;
        margin-bottom: 1rem;
        height: 100%;
        width: auto;
        max-height: 30vh;
        max-width: 100%;
}

I believe the issue arose becuase I also had the height of the image container set to 100% so the image had no specific number to be 100% the height of.

.gym-image-container {
        display: flex;
        padding: 0;
        height: 100%;
}

After a little research i determined that by changing the height attribute to be auto and maintaining the max height and width attributes the image would behave as intended. It would no longer attempt to fill the vertical space at all times but it would still be as tall as it was possible to maintain it's ratio for within the max-width and max-height constraints.

.location-image {
        display: flex;
        text-align: center;
        padding: 0;
        margin-bottom: 1rem;
        height: auto;
        max-height: 30vh;
        max-width: 100%;
}

1. Go into the settings of the GitHub repository where the project is hosted.

2. Inside the settings scroll down to GitHub Pages section, set the branch to master.

3. Then set the directory to root and click the save button.

3. After filling out these two options and selecting the "Save" button and you will be presented with a URL on which the project is now hosted.

The master branch is fully up to date.

1. Navigate to the home page of the repository.

2. To the top right of the repository file directory click the "Code" button.

3. Make sure that the HTTPS tab is open and click the copy to clipboard button.

4. Navigate to your IDE and open the directory to which you want to clone the repository

5. Open the terminal and type "git clone" followed by the contents of the clipboard which will be "https://github.com/zackgithuboriginal/workout-plus-milestone-project-2.git" click enter and the repository will then clone to that directory.

1. Navigate to the home page of the repository.

2. To the top right of the repository file directory click the "Code" button.

3. Halfway down the tab click the "Open with GitHub Desktop" option.

4. If the GitHub Desktop application is installed and open it will be presented with this prompt.

5. Enter the desired location to clone the repository to and click the clone button.

6. The repository will then be cloned to that location.

Running the project locally after either method of cloning is as straight forward as opening the directory location of the project using your preferred IDE.

• Google Codelabs Tutorial Was used to learn how the basic gym finder functionality could work using Google Maps API and Google Places API.

• Harvard World Map is the source of the original CSV file I edited to use for the country restrictions feature of the gym finder.

• Bootstrap library ver. 4.1.3 is used throughout the project to make the site responsive and provide the base components/ structure.

• All of the text content on the site was produced by myself.

• All icons were sourced and imported from FontAwesome
• Map marker was downloaded from FontAwesome and used as an SVG.

• Karsten Winegeart is the original creator of this image used as the background of the landing page.

• All images of businesses and locations supplied by the Google Places library are owned by their respective creators.

• My mentor Oluwafemi for his guidance and advice throughout the project.