Click here to view the project on GitHub pages.
- Clone the GitHub project into your local machine
- Navigate into the project
- Open the project into VSCode
- Open the 'index.html' into your default browser
git clone git@github.com:natasha-mann/travel-app/.git
cd travel-app
code .
- Otilia: https://github.com/otivisan22
- Michael: https://github.com/Cratesy
- Pamela: https://github.com/PDUBB3
- Natasha: https://github.com/natasha-mann
- Hakel: https://github.com/Hakkelo89
The concept for this project was to develop a travel app which allows the user to find information about the countries of the world. As travel hasn't been possible for the past year due to Covid-19, we wanted to provide users with a way to discover new countries to be able to plan their post-covid travels.
On the home page a user can search for a country of their choice or click a button to generate a random country. The user can also click a button to view their last three searches.
Once the user has searched, the app navigates to the results page. On the results page the user is presented with various elements showing information about the searched country.
The elements include:
- A country card which displays the flag and gives information about the country's language, capital city and currency. The user can also click a button to add or remove the country from favourites.
- A places to see card which gives the user a list of places in the country's capital. When the user clicks on a place in the list, they are shown an image, a description and a button linking to an external site about the place.
- A health and vaccine card displaying information about the vaccines needed to travel to that country. On click of the vaccine, a modal appears with more information.
- A currency converter allowing the user to convert between the currency of the searched country and any other country in the world.
From either the home page or the results page, the user can click a button to navigate to the favourites page. On the favourites page the user is presented with cards for any country they have added to favourites. On click of the favourites card, the user is returned to the results page of the clicked country card.
For this project we used the following technologies:
- HTML
- CSS
- Semantic UI framework
- JavaScript
- jQuery
We used three different APIs to get the required data for this project:
Note: During implementation some of these features were improved or changed.
- Skeleton loading
- Animation
- Home page animation on search box
- Micro-interactions
- Search bar on places card to allow the user to search for different cities
- Other features: Other third party APIs integrations such as hotel bookings or flight searches.
