historicalWeatherData.js

import React from "react";

import "./weatherForecastData.css";

const HistoricalWeatherData = (props) => {
    return (
        <div className="home-container">
          <div>
            <div className="thq-grid-5">
              <div class="filter">
              <div class="filter">
                <label for="location">Location:</label>
                <input type="text" id="city_text" placeholder="Location" />
                <br />
                <label for="region">Region:</label>
                <input type="text" id="region_text" placeholder="Region" />
                <br />
                <label>Country:</label>
                <input type="text" id="country_text" placeholder="Country" />
                <br />
                <label>Latitude:</label>
                <input type="text" id="latitude_text" placeholder="Latitude" />
                <label>Longitude:</label>
                <input type="text" id="longitude_text" placeholder="Longitude" />
                <br />
                <label>Time Zone:</label>
                <input type="text" id="timezone_text" placeholder="Timezone" />
                <br />
              </div>
                <input type="checkbox" id="latitude" class="checkBoxFilter" />
                <label for="latitude">Latitude</label>
                <br />
                <input type="checkbox" id="longitude" class="checkBoxFilter" />
                <label for="longitude">Longitude</label>
                <br />
                <input type="checkbox" id="generationtime_ms" class="checkBoxFilter" />
                <label for="generationtime_ms">Generation Time (ms)</label>
                <br />
                <input type="checkbox" id="utc_offset_seconds" class="checkBoxFilter" />
                <label for="utc_offset_seconds">UTC Offset (Seconds)</label>
                <br />
                <input type="checkbox" id="timezone" class="checkBoxFilter" />
                <label for="timezone">Timezone</label>
                <br />
                <input type="checkbox" id="timezone_abbreviation" class="checkBoxFilter" />
                <label for="timezone_abbreviation">Timezone Abbreviation</label>
                <br />
                <input type="checkbox" id="elevation" class="checkBoxFilter" />
                <label for="elevation">Elevation</label>
                <br />
                <p>Hourly</p>
                <br />
                <input type="checkbox" id="hourly_time" class="checkBoxFilter" />
                <label for="hourly_time">Hourly Time</label>
                <br />
                <input type="checkbox" id="temperature_2m" class="checkBoxFilter" />
                <label for="temperature_2m">Temperature 2m</label>
                <br />
                <input type="checkbox" id="relative_humidity_2m" class="checkBoxFilter" />
                <label for="relative_humidity_2m">Relative Humidity 2m</label>
                <br />
                <input type="checkbox" id="precipitation" class="checkBoxFilter" />
                <label for="precipitation">Precipitation</label>
                <br />
                <input type="checkbox" id="surface_pressure" class="checkBoxFilter" />
                <label for="surface_pressure">Surface Pressure</label>
                <br />
                <input type="checkbox" id="wind_speed_10m" class="checkBoxFilter" />
                <label for="wind_speed_10m">Wind Speed 10m</label>
                <br />
                <input type="checkbox" id="wind_direction_10m" className="checkBoxFilter" />
                <label for="wind_direction_10m">Wind Direction 10m</label>
                <br />
                <input type="checkbox" id="wind_gusts_10m" className="checkBoxFilter" />
                <label for="wind_gusts_10m">Wind Gusts 10m</label>
                <br />
                <p>Dayly</p>
                <br />
                <input type="checkbox" id="daily_time" class="checkBoxFilter" />
                <label for="daily_time">Daily Time</label>
                <br />
                <input type="checkbox" id="temperature_2m_max" class="checkBoxFilter" />
                <label for="temperature_2m_max">Temperature 2m Max</label>
                <br />
                <input type="checkbox" id="temperature_2m_min" class="checkBoxFilter" />
                <label for="temperature_2m_min">Temperature 2m Min</label>
                <br />
                <input type="checkbox" id="temperature_2m_mean" class="checkBoxFilter" />
                <label for="temperature_2m_mean">Temperature 2m Mean</label>
                <br />
                <input type="checkbox" id="precipitation_sum" class="checkBoxFilter" />
                <label for="precipitation_sum">Precipitation Sum</label>
                <br />
                <input type="checkbox" id="precipitation_hours" class="checkBoxFilter" />
                <label for="precipitation_hours">Precipitation Hours</label>
                <br />
                <input type="checkbox" id="wind_speed_10m_max" class="checkBoxFilter" />
                <label for="wind_speed_10m_max">Wind Speed 10m Max</label>
                <br />
                <input type="checkbox" id="wind_gusts_10m_max" class="checkBoxFilter" />
                <label for="wind_gusts_10m_max">Wind Gusts 10m Max</label>
                <br />
                <input type="checkbox" id="wind_direction_10m_dominant" class="checkBoxFilter" />
                <label for="wind_direction_10m_dominant">Wind Direction 10m Dominant</label>
                <br />
                <div class="output">
              <h2>Output:</h2>
              <br />
              <pre id="weatherData"></pre>
            </div>
            <div id="apiUrl">
              <label>API URL:</label>
              <br />
              <input className="input" type="text" id="apiUrloutput" readOnly />
            </div>
            <button className="APIButton" onClick={searchAPI}>
              City api
            </button>
            <br />
            <br />
          </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 HistoricalWeatherData;