haroonabdulrazaq / geo-search

Geo-Search is a tool that allows users to search for a location and extract information such as timezone, map and local weather conditions like temperature, wind speed, humidity, and precipitation.

geo-search

Geo-Search is a tool that allows people to search for places and extract information such as timezone, map and local weather conditions like temperature, wind speed, humidity, and precipitation.

Getting Started

To get started on your Local machine you can go to https://haroonabdulrazaq.github.io/geo-search/ Or Clone to your local machine from Github github.com/Haroonabdulrazaq/geo-search. The system is a webpage which includde resources like the CSS,JS,img folder. The index.html is divided into Five sections First Header section, Second Map section, Third Search section, Fourth notable Landmarks section, Fifth is the Footer. The map section Includes a Map with customize map marker the marker is suppose to change base on User's search. when the user navigates to the Search Input and Inputs the location of interest the system should provide the Local weather condition of the place and also the geographical coordinate(Longitude and Latitude) of the location. The notable landmark section shows images of notable Landmark such that when a user mouseover or clicks(for mobile user) on the images the name appears on the image. The footer contains the Social media links of the developer and also a section where you can support or contribute to the project and also leave comment. the third section in footer is a navigation button that makes it easier to navigate back to the top of the project.

Prerequisite

Eslint using Airbnb Style guide. This guide gives detail of how to intsall and use Eslint with the specified style guide (Airbnb) https://medium.com/@Tunmise/set-up-eslint-with-airbnb-style-guide-in-5-minutes-d7b4cc5707f8 .

Classes and Functions

Classes-None

Functions

onreadystatechange -

This function makes an API call and also handles the result that is returned from the server

convertToFahrenheit -

This function converts the Temperature returned by the openweather map API into Fahrenheit

convertToCelsius -

This function converts the Temperature returned by the openweather map API into Celsius

carousel() -

This function changes the notable landmark image in 4s It's an automatic image slider and it also includes names of the notable landmark that appears on the image during mouseover or clicks for (Mobile users)

initMap() -

This function initialize the map from google MAP API

addMarker(location, map) -

This function includes a customized map maker this marks where a user has clicked on labeling them from A-Z

Deployment

THe system is deployed on github pages using gh-pages you can access url: https://haroonabdulrazaq.github.io/geo-search/

Built with

HTML, CSS, JavaScript

Author

Haroon Abdulrazaq

Acknowlegdment

Anifowose Habeeb, Yusuf Abdulkareem, W3Schools, Google API, Openclassrooms

geo-search's Issues

User Interface

• Implement media query

• Improve the User interface

View Images of notable places

• Load images of notable places
• Images should scroll automatically every 3 seconds

User can see the local weather conditions

• Display local weather conditions
• Displays the temperature, wind speed, precipitation and humidity of place of interest.

View map

• use customized map marker
• Display map on the page

Add temperature Conversion

• ConvertToCelsius Convert temperature in Fahrenheit to Celsius
• ConvertToFahrenheit convert temperature in Celsius to Fahrenheit
• Connect the above function to the toggle button created in #4
• It should toggle between the functions to execute based on current state temperature scale in use

Convert between temperature units

• Displays temperature to users
• Include toggle button to switch between units

Get a static map Image

• Leverage a public API to create a static map Image of place of interest
• Add it to the DOM

Display weather condition

• Make an HTTP request to get local weather conditions of places of interest
• Add it to the DOM

Geocode the search string

• Retrieve search string from the search input element
• Make an HTTP network request to convert the search string to geographic coordinate

Improve Layout

• Remove Image background
• Reduce the header
• Remove the background color of header
• Minimize scroll

Share local weather conditions to Facebook

• Post weather conditon to Facebook

User can search for a place

• Design the input field

• implement the search button

• JavaScript form validation

• Display information such as timezone, map and local weather conditions

• input fields can Suggest /autocomplete

• [ ]

Share to Facebook

• implement a share button
• I can share location of interest and local weather condition to Facebook

Setting Up Eslint (Linting Library)

• Set Up Linting Library
• Use specified Style Guide (Airbnb)