Skip to content

A Vue app that fetches and renders the data of the current weather in the Dutch city of Amsterdam.

Notifications You must be signed in to change notification settings

bcostaaa01/current-weather-api.github.io

Repository files navigation

⛵🇳🇱 weather-amsterdam

A Vue app that renders the current weather data for the Dutch city of Amsterdam.

⚙️ Codebase

  1. In the WeatherComponent, we fetch the data from the Weather Forecast API for the current weather data in Amsterdam which is displayed in the component.

1.1 We first fetch the data using the fetch API:

methods: {
    getCurrentWeather() {
      fetch(
        "https://api.open-meteo.com/v1/forecast?latitude=52.3738&longitude=4.8910&hourly=temperature_2m&current_weather=true"
      )
        .then((data) => data.json())
        .then((json) => (this.weatherData = json))
        .then((current) => (this.currentWeather = current.current_weather));
    },
  }

Since the JSON object in the API has different objects and properties, I decided to set data from the different objects and their properties to two different data properties: weatherData and currentWeather.

  1. Then, the data from the different properties is displayed in two seperate container divs: one for the location data and the other one for the weather data
<div id="locationData">
      <p>Latitude: {{ weatherData.latitude }}</p>
      <p>Longitude: {{ weatherData.longitude }}</p>
      <p>
        Timezone: {{ weatherData.timezone }}
        {{ weatherData.timezone_abbreviation }}
      </p>
    </div>
    <div id="currentWeatherData">
      <p>Temperature: {{ currentWeather.temperature }}</p>
      <p>Windspeed: {{ currentWeather.windspeed }}</p>
      <p>Wind direction: {{ currentWeather.winddirection }}</p>
      <p>Weather code: {{ currentWeather.weathercode }}</p>
      <p>Time: {{ currentWeather.time }}</p>
    </div>

2.1 This data is then visible after the getCurrentWeather event is triggered with the "Display current weather data" button:

<button @click="getCurrentWeather()">Display current weather data</button>
  1. After this, the browser then displays the data from the API, which should look like this:

Screenshot 2022-10-29 at 15 31 56

🎉🎉🎉

📚 Useful resources

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

About

A Vue app that fetches and renders the data of the current weather in the Dutch city of Amsterdam.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published