weatherForecastData.js

import React from "react";

import "./weatherForecastData.css";

const WeatherForecastData = (props) => {
    return (
        <div className="home-container">
          <div>
            <div className="thq-grid-5">
              <div class="filter">
                 <div>
                    <input type="checkbox" id="last_updated_epoch" class="checkBoxFilter" />
                    <label for="last_updated_epoch">Last Updated Epoch</label>
                    <br />
                    <input type="checkbox" id="last_updated" class="checkBoxFilter" />
                    <label for="last_updated">Last Updated</label>
                    <br />
                    <input type="checkbox" id="date" class="checkBoxFilter" />
                    <label for="date">Date</label>
                    <br />
                    <input type="checkbox" id="date_epoch" class="checkBoxFilter" />
                    <label for="date_epoch">Date Epoch</label>
                    <br />
                    <input type="checkbox" id="maxtemp" class="checkBoxFilter" />
                    <label for="maxtemp">Max Temperature</label>
                    <br />
                    <input type="checkbox" id="mintemp" class="checkBoxFilter" />
                    <label for="mintemp">Min Temperature</label>
                    <br />
                    <input type="checkbox" id="avgtemp" class="checkBoxFilter" />
                    <label for="avgtemp">Average Temperature</label>
                    <br />
                    <input type="checkbox" id="maxwind" class="checkBoxFilter" />
                    <label for="maxwind">Max Wind Speed</label>
                    <br />
                    <input type="checkbox" id="totalprecip" class="checkBoxFilter" />
                    <label for="totalprecip">Total Precipitation</label>
                    <br />
                    <input type="checkbox" id="avgvis" class="checkBoxFilter" />
                    <label for="avgvis">Average Visibility</label>
                    <br />
                    <input type="checkbox" id="avghumidity" class="checkBoxFilter" />
                    <label for="avghumidity">Average Humidity</label>
                    <br />
                    <input type="checkbox" id="daily_will_it_rain" class="checkBoxFilter" />
                    <label for="daily_will_it_rain">Daily Will it Rain</label>
                    <br />
                    <input type="checkbox" id="daily_chance_of_rain" class="checkBoxFilter" />
                    <label for="daily_chance_of_rain">Daily Chance of Rain</label>
                    <br />
                    <input type="checkbox" id="daily_will_it_snow" class="checkBoxFilter" />
                    <label for="daily_will_it_snow">Daily Will it Snow</label>
                    <br />
                    <input type="checkbox" id="daily_chance_of_snow" class="checkBoxFilter" />
                    <label for="daily_chance_of_snow">Daily Chance of Snow</label>
                    <br />
                    <input type="checkbox" id="condition_text" class="checkBoxFilter" />
                    <label for="condition_text">Condition Text</label>
                    <br />
                    <input type="checkbox" id="condition_icon" class="checkBoxFilter" />
                    <label for="condition_icon">Condition Icon</label>
                    <br />
                    <input type="checkbox" id="condition_code" class="checkBoxFilter" />
                    <label for="condition_code">Condition Code</label>
                    <br />
                    <input type="checkbox" id="uv" class="checkBoxFilter" />
                    <label for="uv">UV Index</label>
                    <br />
                    <input type="checkbox" id="sunrise" class="checkBoxFilter" />
                    <label for="sunrise">Sunrise</label>
                    <br />
                    <input type="checkbox" id="sunset" class="checkBoxFilter" />
                    <label for="sunset">Sunset</label>
                    <br />
                    <input type="checkbox" id="moonrise" class="checkBoxFilter" />
                    <label for="moonrise">Moonrise</label>
                    <br />
                    <input type="checkbox" id="moonset" class="checkBoxFilter" />
                    <label for="moonset">Moonset</label>
                    <br />
                    <input type="checkbox" id="moon_phase" class="checkBoxFilter" />
                    <label for="moon_phase">Moon Phase</label>
                    <br />
                    <input type="checkbox" id="moon_illumination" class="checkBoxFilter" />
                    <label for="moon_illumination">Moon Illumination</label>
                    <br />
                    <input type="checkbox" id="hour_time_epoch" class="checkBoxFilter" />
                    <label for="hour_time_epoch">Hour Time Epoch</label>
                    <br />
                    <input type="checkbox" id="hour_time" class="checkBoxFilter" />
                    <label for="hour_time">Hour Time</label>
                    <br />
                    <input type="checkbox" id="hour_temp" class="checkBoxFilter" />
                    <label for="hour_temp">Hour Temperature</label>
                    <br />
                    <input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
                    <label for="hour_is_day">Hour Is Day</label>
                    <br />
                    <input type="checkbox" id="hour_condition_text" class="checkBoxFilter" />
                    <label for="hour_condition_text">Hour Condition Text</label>
                    <br />
                    <input type="checkbox" id="hour_condition_icon" class="checkBoxFilter" />
                    <label for="hour_condition_icon">Hour Condition Icon</label>
                    <br />
                    <input type="checkbox" id="hour_condition_code" class="checkBoxFilter" />
                    <label for="hour_condition_code">Hour Condition Code</label>
                    <br />
                    <input type="checkbox" id="hour_wind" class="checkBoxFilter" />
                    <label for="hour_wind">Hour Wind</label>
                    <br />
                    <input type="checkbox" id="hour_wind_degree" class="checkBoxFilter" />
                    <label for="hour_wind_degree">Hour Wind Degree</label>
                    <br />
                    <input type="checkbox" id="hour_wind_dir" class="checkBoxFilter" />
                    <label for="hour_wind_dir">Hour Wind Direction</label>
                    <br />
                    <input type="checkbox" id="hour_pressure" class="checkBoxFilter" />
                    <label for="hour_pressure">Hour Pressure</label>
                    <br />
                    <input type="checkbox" id="hour_precip" class="checkBoxFilter" />
                    <label for="hour_precip">Hour Precipitation</label>
                    <br />
                    <input type="checkbox" id="hour_humidity" class="checkBoxFilter" />
                    <label for="hour_humidity">Hour Humidity</label>
                    <br />
                    <input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
                    <label for="hour_cloud">Hour Cloud</label>
                    <br />
                    <input type="checkbox" id="hour_feelslike" class="checkBoxFilter" />
                    <label for="hour_feelslike">Hour Feels Like</label>
                    <br />
                    <input type="checkbox" id="hour_windchill" class="checkBoxFilter" />
                    <label for="hour_windchill">Hour Wind Chill</label>
                    <br />
                    <input type="checkbox" id="hour_heatindex" class="checkBoxFilter" />
                    <label for="hour_heatindex">Hour Heat Index</label>
                    <br />
                    <input type="checkbox" id="hour_dewpoint" class="checkBoxFilter" />
                    <label for="hour_dewpoint">Hour Dew Point</label>
                    <br />
                    <input type="checkbox" id="hour_vis" class="checkBoxFilter" />
                    <label for="hour_vis">Hour Visibility</label>
                    <br />
                    <input type="checkbox" id="hour_gust" class="checkBoxFilter" />
                    <label for="hour_gust">Hour Gust</label>
                    <br />
                    <input type="checkbox" id="hour_uv" class="checkBoxFilter" />
                    <label for="hour_uv">Hour UV</label>
                    <br />
                <br />
                </div>
              </div>
            </div>
          </div>
        </div>
      );

  function getData() {
    const city = document.getElementById("city").value;
    const region = document.getElementById("region").value;
    const country = document.getElementById("country").value;
    const latitude = document.getElementById("latitude").value;
    const longitude = document.getElementById("longitude").value;
    const temperature = document.getElementById("temperature").checked;
    const isDay = document.getElementById("isDay").checked;
    const condition = document.getElementById("condition").checked;
    const pressure = document.getElementById("pressure").checked;
    const precipitation = document.getElementById("precipitation").checked;
    const humidity = document.getElementById("humidity").checked;
    const cloud = document.getElementById("cloud").checked;
    const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
    const visibility = document.getElementById("visibility").checked;
    const uv = document.getElementById("uv").checked;
    const gust = document.getElementById("gust").checked;
    const airquality = boolToWord(
      document.getElementById("airquality").checked
    );
    const unitTemperature = document.getElementById("unitTemperature").value;
    const unitWindSpeed = document.getElementById("unitWindSpeed").value;
    const unitPressure = document.getElementById("unitPressure").value;
    const unitPrecipitation =
      document.getElementById("unitPrecipitation").value;
    const output = document.getElementById("output").value;
    const format = document.getElementById("format").value;

    const apiKey = "1244099aeaee4b179e6111803241304";
    const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;

    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => {
        // Wetterdaten anzeigen
        document.getElementById("weatherData").innerText = JSON.stringify(
          data,
          null,
          2
        );
        document.getElementById("apiUrloutput").value = apiUrl;
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }
  function searchAPI() {
    const cityInput = document.getElementById("city").value;

    const apiKey = "1244099aeaee4b179e6111803241304";
    const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;

    fetch(apiUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }

        return response.json();
      })
      .then((data) => {
        // Wetterdaten anzeigen
        document.getElementById("weatherData").innerText = JSON.stringify(
          data,
          null,
          2
        );
      })
      .catch((error) => {
        console.error("There was a problem with the fetch operation:", error);
      });
  }

  function boolToWord(bool) {
    return bool ? "yes" : "no";
  }

};

export default WeatherForecastData;