This interactive site is where I would be advertising some of the most beautiful countries within the Middle East (Lebanon, UAE, Eygpt, Turkey and Jordan). It will advertise the different attractions and restaurants and other places within the capital of the specific country. It will also advertise the top three places to visit and the three top cuisines known in that country. It will include a method for the user to reach out to the site admin if they would like to know more about a specific country.
This site would be utilising JavaScript from the Code Institute as well as using Google Places API. I will be using various technologies such as HTML5, CSS3, JavaScript, JQuery, Bootstrap, APIs (Google Places). This project will be responsive and accessible to different size browsers and devices.
The purpose of this site is to advertise the different countries within the Middle East (Lebanon, UAE, Eygpt, Turkey and Jordan) and there top places to visit and dine. The intended audience would be for users who would be interested in visiting these countries and plan an itinerary within the selected countries capital.
The website will advertise the following countries within the Middle East (Lebanon, UAE, Eygpt, Turkey and Jordan) for users who would like to visit or plan a visit to the selected countries. It will have a carousel of images within the home page which would rotate the images in sequence. Within the homepage, it will also have cardholders which flip when the user hovers over them which would then have a small description of the picture. When the user visits the country page, they would be introduced with the country and the three top places to visit and type of cuisine to try.
When the country is selected and scrolled down, the information would be pulled dynamically to keep the information easy to update. A Google Place API would be added to each of the specific countries webpage with the fixed coordinates of the capital of those selected countries where it would display the different attractions, restaurants and other google registered places. It will also enable the user to fill out a form which would then be sent to the site admin registered email address.
My objectives are going to be achieved by taking images from free stock websites which would have images of the countries that I want to advertise. The information of which would be used will be taken from other websites and from my personal experience when I have visited them. A drop-down menu would be on the countries page where they would be able to select which country they would like to see as the information would be pulled dynamically. Incorporating Google Places API will help users to plan their holidays if they choose to visit these countries. The users would also be able to contact the site admin if they have any queries or questions on planned itineraries as the site admin has the first-hand experience when visited those places as it would have a contact form which would be linked to a live email address.
I would be using the theme of "Sandy brown colour" as the Middle East is known for the sandy desert. The pictures used on the site would be the main representative of achieving the goal of advertising the countries. Within the footer, there would be social media links which would connect the user to the advertising agency social media links (this would be linked to just the home pages of the social media sites).
The intended type of users which this site would be targeted for are individuals, couples and/or families who are looking to plan a holiday to the Middle East.
- As a user, I want to be able to see images of the places in the middle east so I can see the beauty of the countries.
- As a user, I want to know more about a picture when hovering over it so I know more about what I am looking at.
- As a user, I want to be able to select a country from a drop-down so I can see what other countries I can see more information about.
- As a user, I want to see different attractions in the city of the chosen country so I can see the options to choose from.
- As a user, I want to click on an option that is presented to me within the Google Places API and have it appear on the marker within the map.
- As a user, I want to be able to select a different country and have the information change so I can see the new information without being transferred to another page.
- As a user, I want to be able to contact the site admin so I can ask questions that I would need further assistance on.
- As a user, I want to be able to click on the social media links to lead me to the "Advertising Agency" so I can follow their advertisement.
-
- I kept the colour scheme sandy orange/brown to advertise the desert of the middle east with the black writing to keep the text easy to read (Used WebAIM to check the contrast of the colour scheme).
-
- I have chosen to use Yatra One and Kalam font as the main fonts throughout the website with Sans Serif as the emergency font in the case for any reason the font is not being imported into the site correctly. Both Yatra One and Kalam are attractive fonts to use as it shows the middle eastern effect with the decorations and curves they use for their writing.
-
- The images that were used are based on the content of what it is portraying. Displaying the places to visit and cuisines to eat around the countries I am focusing on.
-
- Home Page Wireframe (Web Browser) - View PDF | View Image
- Home Page Wireframe (Tablet) - View PDF | View Image
- Home Page Wireframe (Mobile) - View PDF | View Image
- Country Wireframe (Web Browser) - View PDF | View Image
- Country Wireframe (Tablet) - View PDF | View Image
- Country Wireframe (Mobile) - View PDF | View Image
The wireframes matche to what has been developed apart from the amount of filters in the google places as i reduced due to make more space on the page
- Contact Us Wireframe (Web Browser) - View PDF | View Image
- Contact Us Wireframe (Tablet) - View PDF | View Image
- Contact Us Wireframe (Mobile) - View PDF | View Image
The wireframes for the Contact Us do not match what i have developed due to the fact i wanted to change it to a pop modal as it allows the user to be able to use the functionality of contacting the site admin without losing where they are within the page. The way how it has been designed will be how i will be creating contact forms in the future as it makes the users journey more streamlined and user friendly.
- Master Wireframe - View
The features that will be utilised in this project will be as follows:
- Responsive on devices sized 1024px, 768px, 425px, 375px and 320px.
- Allows the user to know the navigated hyperlinks, by having hoover over feature within the hyperlinks.
- All links within the navigation bar would take the user to its representable page.
- The layout of them would change on a mobile device with a hamburger icon.
- Active pages would be visible as the links would be in bold and underlined.
- All link on the navigation bar has a hover-over effect.
- Quick links would take you different pages of the website.
- Clickable social media icons which are connected to my personal social media homepages.
- Images that autorotate clockwise with a small description at the bottom of the image.
- A buttons on both sides of the images, it enables the user to change the picture on demand.
- Cards with images that flip when hovered over them.
- A button which opens another tab when clicked on that is related to the card hovered over.
- On a laptop screen and mobile screen, 9 cards are displayed on the screen. On a tablet screen, only 8 cards would be displayed.
- A drop down with the countries available would be selected. the information about the country would dynamically populate the web page.
- Google Places API would appear at the bottom of the page and will display the places once a city is entered and a filter is chosen.
- A popup modal which would appear in the middle of the page.
- A confirmation alert box appears in the top of the screen when the message has successfully sent.
- A button which would appear when the user begins to scroll down to automatically go back to the top.
- The information to be pulled dynamically from a JSON file instead of a constructor.
- Users to have more filters to choose from when searching the different types of places.
- Make the model close once the email has been successful sent.
- HTML5
- HTML5 was used to structure and present content on my website.
- CSS3
- CSS3 was used to provide my website with style
- JavaScript
- JavaScript was used to make the site interactive
- Google Places:
- Google Places API was used to find the places of interests for the countries I have chosen
- Bootstrap 4.5.3:
- Bootstrap was used to assist with the responsiveness and styling of the website.
- JQuery Core 3.5.1
- JQuery library was used to assist with the responsiveness of the nav bar.
- Google Fonts:
- Google fonts were used to import the font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- JQuery:
- JQuery was used to manipulate the API calling from my JSON file as well as the Google Places API
- Brackets:
- Brackets was used as my text editor to develop the site and with the Plugins available to Push to GitHub.
- Grammerly:
- Online tool which assists with the English grammar.
- GitHub:
- GitHub is used to store the code of the project after being pushed from GitHub Desktop and Brackets
- GitHub Desktop:
- A tool that allows you to interact with GitHub from the desktop
- Google Chrome:
- Default browser used to visually display the build process as well as utilising Chrome Dev Tools to assist where needed.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
- Webaim
- To check the contrast of my background colour and text that would be used on my site.
Testing was taken place during my build of the site. I was utilising Brackets plugin 'Live Preview' to visually see what my website looks like with every change that is made. I was also utilising Chrome Dev Tools to assist with changes when code was not working as planned. Within Chrome Dev Tools, I was also utilising the responsive views to see the development for the responsive sizes. To test the JS that i was using, i would be using Chrome Dev Tools and choosing Console to make sure everything was running smoothly.
In this section, I would be testing the User Stories taken from the User Experience Section (UX), testing the functionality and usability, testing the responsive views as well as browser testing.
On code completion, i ensured my code was validated with no snytax errors. I used W3C Markup Validator for HTML5, W3C CSS Validator for CSS3 to ensure my code is W3C Compliant. I used JSHint to helps to detect errors and potential problems in your JavaScript code.
| Page | Initial Errors | Resolved Errors | Error Notes |
|---|---|---|---|
| index.html | Initial Errors | Resolved Errors | The element 'a' must not appear as a descendant of the 'button' element. |
| country.html | Initial Errors | Resolved Errors | The 'type' attribute is being used with in the script. |
| style.css | No Errors Found | Resolved Errors | N/A |
| mapstyle.css | No Errors Found | Resolved Errors | N/A |
| script.js | No Errors Found | Resolved Errors | JSHint is using an old version of ES |
| maps.js | No Errors Found | Resolved Errors | JSHint is using an old version of ES |
| sendEmail.js | No Errors Found | Resolved Errors | JSHint is using an old version of ES |
User Stories Testing from User Experience (UX) Section - View Results
When carrying out the User Stories Testing, I placed my self as the user being provided instructions on how to achieve the goals that were identified. The intended type of users which this website is targeted for are travellers / individuals who are planning to go on holiday.. I displayed screenshots with the results of each finding to provide evidence of the stories being achieved successfully.
Functionality and Usability Testing - View Results
Testing all my functions and features within the site and ensuring that it is usable across different browsers and devices. I laid the results out in a table with each section defining the feature/function, a description of what I am testing as well as if it passes or fails.
All tests which have been mentioned in the link above has been tested on the following browsers: Chrome, Edge and Firefox. All features and functions worked as expected, including the addition of UX designs (excpet for the known issues mentioned below). The site was also tested on different size devices which consisted of a laptop 13 inch, a tablet as well as a mobile phone.
- With the Country page, the results section of the google api will have a blank white placeholder till the results appear.
- With the Google Places API, after you have completed a city search and selected the type of filter you are looking for, the results appear at the bottom. The Issue is, when you click on one of the places within the results, it does not take you automatically to the map and show you where it is, you would have scroll back up to the map to see the location of the place you have clicked on.
The project was deployed to Github Pages using the following method:
- Log into Github and found the Project Repository
- At the top of the Repository, i clicked the "Settings" option on the menu.
- I scrolled down the page until i found "Github Pages" section.
- Under the "Source" section, a drop-down option with the result of "None" is visible. I clicked on the drop-down option and selected "Master Brand".
- The page would automatically refresh itself to the top of the page.
- I scrolled down to 'Github Pages' again and found a published link which is my deployed site URL.
To make a clone, I had to get the SSH key from the repository which allowed me to clone the repository to my local hard drive.
Within brackets (Editing tool), I was able to download a plugin which enabled me to connect brackets to my GitHub repository. Whenever code was created and saved, I was given the option to commit and make notes on the upload. Once completed, I was able to push the changes to GitHub.
The alternative method which I used when I first started the project was Github Desktop. I was able to connect my Github repository and push my files through that method. I eventually stopped as the plugin within my code editor did the same job. This enabled me to have one less application to have running while developing.
The content which I used to take the information for the Cards within the Homepage is Wikipedia.
Utilising the code that was used taught from the Code Instute Lessons consisted of (HTML5, CCS3 and JavaScript), i also utilised other sources which assisted me in the developing the specific areas.
- Carousel
- Which was used for the homepage and the country page within the header of the site.
- Card Flip
- Utilising the flip of cards to advertise the picture with a description when being hovered. A button within the description to take them to the Wikipedia page.
- Hamburger Menu - Collapseable Menu
- I utilised bootstrap code to assist me with the build of the responsive navbar when it shrinks to mobile size.
- Contact Form
- Using emailJS service to send emails from the contact form
- Contact Form - Response Constructor
- To provide specfic messages and responses once the email has been sent.
- Google Places API
- Used for the Google Places API and result functionality.
The main souce i used for the images if from Pixabay:
- Fonts used - Site wide
- Home Page - Carousel
- Home Page - Card Flip Images
- Country Page
- Images for the places and cuisines that where used came from multiple of different sites however ontop of each image would have the code commented within script.js.
I want to thank my mentor Aaron Sinnott who guided me in the right direction and his support. This project has allowed me to experience the powers of APIs. It enabled the developer to utilise information of others and display it in their style.
The idea of the website came from how much I miss going on holidays, especially Middle East countries as covid has prevented that from happening. Using Google Maps all the time, and the knowledge which was taught from the Code Institute lessons. I came up with an idea to make a travel agent website which would inform users about the different places and cuisines in the Middle East.