Giter Club home page Giter Club logo

howtogeo's Introduction

HowToGeo

Objective

HowToGeo aims to help people choose which is the best travelling method available by providing them with the appropriate data to make an informed decision


Work structure

  1. Select an API: Firstly, I researched which Maps API I was going to use for this project. I opted to go for Google Maps API.

  2. Plan and Design the Project: Once I have selected an API, it was time to plan and design your project. I started by creating a first sketch of the web pages I needed for the project. Given the task I opted to go for 2 different HTML web pages, both connected to the Google Maps API:

    • WelcomePage.html: A web page to explain what this web app do as well as some suggestion on where to go with the map
    • Directions.html: A web page that gets 2 inputs from the user and returns a way to get from one to the other
  3. Develop the Webpage: With your plan and design in place, it was time to start developing my webpages. I used a mix of HTML, CSS, and JavaScript to build my webpage. Start by creating the basic HTML structure and then add CSS to style the webpage. Next, add JavaScript code to load, parse and display the data from the API on the map. The webpages:

    • WelcomePage.html: image
    • Directions.html: image
      • The user is going to be able to decide its city of origin and city of destination. Autocompletition will be available thanks to the Google Places API: image
      • By pressing the 'Directions' button the map will show the journey set to be made from for each of the 3 different travel options as well as the distance and time of travel image
      • In case of an impossible route, the website will advise you to check out a new place ๐Ÿ˜‰ image
  4. Test and Debug: Once I had built the webpage, it was time to test it thoroughly to ensure that it works as expected.

  5. Possible improvements: Some possible improvements I could implement to the project are:

    • Use CSS and Bootstrap to work more on the graphics of the website
    • Add more travelling options such as plane or train
    • Use React.js to make the website dynamic
    • Add the carbon footprint emissions for every type of journey
    • Create a table to recap what is the best travelling option
    • Create a sort of search engine that according to your priorities suggests the best option

howtogeo's People

Contributors

niccoborg22 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.