Giter VIP home page Giter VIP logo

weather-coding-challenge's Introduction

Coding-challenge

Build a weatherforcast application that displays a 3 day forecast

Tools

API: https://api.openweathermap.org/data/2.5/forecast?q={location}&cnt={DAYS}&units=metric&appid={API_KEY} DOC: https://openweathermap.org/forecast5#name5 Icons: https://najens.github.io/weather-icons-react/ API_KEY: 304fa7c159997852e50541c77c7f2f3a DAYS: 3

Task

  1. Add a searchinput to search for locations (e.g Saarbrücken - Saarlouis - Italien).
  2. Add API connection to receive weather forcast data.
  3. Display and style a list of Cards for the recieved forcast data. A card should at least contain Locationname, Temperature, Icon.

Bonus

  1. use Typescript
  2. save search inputs for already searched locations and add a autocompletion

Time left ?

  1. store data in localStorage
  2. error handling
  3. tests

Tips for Icon Ranges:

rangeId>=200 && rangeId<=232 = WiThunderstorm; rangeId>=300 && rangeId<=321 = WiSleet; rangeId>=500 && rangeId<=531 = WiRain; rangeId>=600 && rangeId<=622 = WiSnow; rangeId>=701 && rangeId<=781 = WiFog; rangeId===800 = WiDaySunny; rangeId>=801 && rangeId<=804 = WiDayFog;

Response Example

{ "cod": "200", "message": 0, "cnt": 1, "list": [ { "dt": 1629115200, "main": { "temp": 30.78, //current temperature "feels_like": 28.76, "temp_min": 30.78, "temp_max": 35.15, "pressure": 1015, "sea_level": 1015, "grnd_level": 959, "humidity": 14, "temp_kf": -4.37 }, "weather": [ { "id": 800, //rangeId "main": "Clear", "description": "clear sky", "icon": "01d" } ], "clouds": { "all": 0 }, "wind": { "speed": 2.35, "deg": 304, "gust": 3.21 }, "visibility": 10000, "pop": 0, "sys": { "pod": "d" }, "dt_txt": "2021-08-16 12:00:00" } ], "city": { "id": 2510769, "name": "Spain", // location name "coord": { "lat": 40, "lon": -4 }, "country": "ES", "population": 0, "timezone": 7200, "sunrise": 1629091724, "sunset": 1629141124 } }

weather-coding-challenge's People

Contributors

beargruug 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.