https://onderguler35.github.io/city-wonderer/
Our first project as a group. Quite exciting!
Kamen Ivanov; Pavel Naumovic; Onder Guler; Iryna Lototska; Desmond Ieong (Hok Man)
An application that returns information about the map and weather of different cities including the cities’ popular places and landmarks.
As a frequent traveller, I want the website to be able to find the map, weather for the next 5 days and popular destinations for any city that I would like to visit. As a frequent traveller, I want to be able to add any city or point of interests to a wishlist for future reference. As a frequent traveller, I want to see some suggestions for popular destinations on the welcome page
- The City Wonderer webpage includes a header with a dropdown wish-list;
- The webpage includes a search bar;
- The webpage has its custom designed logo;
- The user can select different categories of point of interests that they are interested;
- The user can type in the search bar and press on the search button to get results of a map and weather for the next 5 days of any city;
- The webpage includes styling in Bootstrap v4.6 as well as custom CSS;
- CSS display grid is essential for displaying the map, the weather information and point of interest of any city;
- The webpage uses Opensource map embedded (leafletjs.com) to display the city map and points of interest;
- The webpage fetches data using JQuery from two open source APIs: OpenTripMap and OpenWeather;
- The webpage includes JavaScript functions to render point of interests of a city on the map as well as in the side bar on the right;
- The webpage’s HTML follows a logical structure with semantic elements throughout the code; and
- The webpage is made responsive using Media Query in CSS stylesheet.
- How to collaborate and work as a team;
- How to pseudo code and wire-frame before the actual coding;
- How to structure data on the webpage by using HTML+CSS;
- How to get map and weather data by open-source APIs;
- How to capture data and pass it as JavaScript functions to render those data on the webpage;
- How to add data to the wish-list and store data in the user's browser local storage;
- How to use "Date format" by Moment.js;
- How to create a simple CSS display grid for a better layout of the website;
- How to create a wish-list in form of a drop-down menu by JavaScript and Bootstrap; and
- How to design and style the website by adding different color tone to improve the overall aesthetic of the webpage.
The following image shows the web application's appearance and functionality:
- Overall appearance of our landing page with css grid to display news
- Webpage search bar, user input and button for results
- User can select different genre of point of interests
- Webpage returns results of a map and weather for the next 5 days of any city
- User can add point of interests by button
- Header wish-list dropdown and remove button
- Options for the user to choose / confirm between two cities with identical names in different countries and revealed in the map;
- Youtube API to embed influencers’ travel videos about the city;
- More API and partners to pull in latest news and information about the city;