Skip to content
GitLab
Commit 3ee7a473 authored by Weiser's avatar Weiser
Browse files

asdf

parent 8659d39c
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.js
View file @ 3ee7a473
......@@ -24,9 +24,6 @@ const Currentdata = (props) => {
<br />
</div>
<div>
<input type="checkbox" id="location" className="checkBoxFilter" />
<label> Location</label>
<br />
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
......
frontend/src/components/weather/historicalWeatherData.js 0 → 100644
View file @ 3ee7a473
import React from "react";
import "./currentData.css";
const HistoricalWeatherData = (props) => {
return (
<div className="home-container">
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="location">Location:</label>
<input type="text" id="location" placeholder="Location" />
<br />
<label for="region">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input type="checkbox" id="localtime_epoch" className="checkBoxFilter" />
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input type="checkbox" id="last_updated_epoch" className="checkBoxFilter" />
<label> Last Updated Epoch</label>
<br />
<input type="checkbox" id="last_updated" className="checkBoxFilter" />
<label> Last Updated</label>
<br />
<input type="checkbox" id="temp_c" className="checkBoxFilter" />
<label for="temp_c">Temp C</label>
<br />
<input type="checkbox" id="temp_f" className="checkBoxFilter" />
<label for="temp_f">Temp F</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox" id="condition_text" className="checkBoxFilter" />
<label for="condition_text">Condition Text</label>
<br />
<input type="checkbox" id="condition_icon" className="checkBoxFilter" />
<label for="condition_icon">Condition Icon</label>
<br />
<input type="checkbox" id="condition_code" className="checkBoxFilter" />
<label for="condition_code">Condition Code</label>
<input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind">Wind </label>
<br />
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
<input type="checkbox" id="air_quality_co" className="checkBoxFilter" />
<label for="air_quality_co">Air Quality CO</label>
<br />
<input type="checkbox" id="air_quality_no2" className="checkBoxFilter" />
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input type="checkbox" id="air_quality_o3" className="checkBoxFilter" />
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input type="checkbox" id="air_quality_so2" className="checkBoxFilter" />
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input type="checkbox" id="air_quality_pm2_5" className="checkBoxFilter" />
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input type="checkbox" id="air_quality_pm10" className="checkBoxFilter" />
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input type="checkbox" id="air_quality_us_epa_index" className="checkBoxFilter" />
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input type="checkbox" id="air_quality_gb_defra_index" className="checkBoxFilter" />
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
<br />
<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;
\ No newline at end of file
frontend/src/components/weather/weatherForecastData.js 0 → 100644
View file @ 3ee7a473
import React from "react";
import "./weatherForecastData";
const WeatherForecastData = (props) => {
return (
<div className="home-container">
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="location">Location:</label>
<input type="text" id="location" placeholder="Location" />
<br />
<label for="region">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input type="checkbox" id="localtime_epoch" className="checkBoxFilter" />
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input type="checkbox" id="last_updated_epoch" className="checkBoxFilter" />
<label> Last Updated Epoch</label>
<br />
<input type="checkbox" id="last_updated" className="checkBoxFilter" />
<label> Last Updated</label>
<br />
<input type="checkbox" id="temp_c" className="checkBoxFilter" />
<label for="temp_c">Temp C</label>
<br />
<input type="checkbox" id="temp_f" className="checkBoxFilter" />
<label for="temp_f">Temp F</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox" id="condition_text" className="checkBoxFilter" />
<label for="condition_text">Condition Text</label>
<br />
<input type="checkbox" id="condition_icon" className="checkBoxFilter" />
<label for="condition_icon">Condition Icon</label>
<br />
<input type="checkbox" id="condition_code" className="checkBoxFilter" />
<label for="condition_code">Condition Code</label>
<input type="checkbox" id="wind" className="checkBoxFilter" />
<label for="wind">Wind </label>
<br />
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
<input type="checkbox" id="air_quality_co" className="checkBoxFilter" />
<label for="air_quality_co">Air Quality CO</label>
<br />
<input type="checkbox" id="air_quality_no2" className="checkBoxFilter" />
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input type="checkbox" id="air_quality_o3" className="checkBoxFilter" />
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input type="checkbox" id="air_quality_so2" className="checkBoxFilter" />
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input type="checkbox" id="air_quality_pm2_5" className="checkBoxFilter" />
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input type="checkbox" id="air_quality_pm10" className="checkBoxFilter" />
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input type="checkbox" id="air_quality_us_epa_index" className="checkBoxFilter" />
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input type="checkbox" id="air_quality_gb_defra_index" className="checkBoxFilter" />
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
<br />
<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 WeatherForecastData;
\ No newline at end of file
frontend/src/views/historicalweather.js
View file @ 3ee7a473
......@@ -2,228 +2,23 @@ import React from "react";
import Navbar4 from "../components/homepage/navbar4";
import Footer15 from "../components/homepage/footer15";
import HistoricalWeatherData from "../components/weather/historicalWeatherData";
import "./home.css";
import "./data.css";
const Historicalweather = (props) => {
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";
}
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="city">City:</label>
<input type="text" id="city" placeholder="City" />
<br />
<label for="city">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input
type="checkbox"
id="temperature"
className="checkBoxFilter"
/>
<label> Temprature</label>
<br />
<input type="checkbox" id="isDay" className="checkBoxFilter" />
<label> Is it day?</label>
<br />
<input type="checkbox" id="condition" className="checkBoxFilter" />
<label> Condition</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label> Pressure</label>
<br />
<input
type="checkbox"
id="precipitation"
className="checkBoxFilter"
/>
<label> Precipitation</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label> Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label> Cloud</label>
<br />
<input
type="checkbox"
id="feelslikeTemp"
className="checkBoxFilter"
/>
<label> Feelslike Temp.</label>
<br />
<input type="checkbox" id="visibility" className="checkBoxFilter" />
<label> Visibility</label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label> UV-Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label> Gust</label>
<br />
<input type="checkbox" id="airquality" className="checkBoxFilter" />
<label> Airquality</label>
<br />
</div>
<div class="filter">
<label>Temperature Unit:</label>
<select id="unitTemperature">
<option value="temp_c">Celsius</option>
<option value="temp_f">Fahrenheit</option>
</select>
<label>Wind speed Unit:</label>
<select id="unitWindSpeed">
<option value="wind_kph">km/h</option>
<option value="wind_mph">Mph</option>
</select>
<label>Pressure Unit:</label>
<select id="unitPressure">
<option value="pressure_mb">Millibar</option>
<option value="pressure_in">Inch</option>
</select>
<label>Precipitation Unit:</label>
<select id="unitPrecipitation">
<option value="precip_mm">Millimeter</option>
<option value="precip_in">Inch</option>
</select>
</div>
<div class="filter">
<label>Output:</label>
<select id="output">
<option value="local">Local</option>
<option value="database">API</option>
</select>
<br />
<label>Data format:</label>
<select id="format">
<option value="json">JSON</option>
<option value="csv">CSV</option>
<option value="xml">XML</option>
</select>
<br />
<button className="APIButton" onClick={searchAPI}>City api</button>
</div>
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
return(
<div>
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div className="HistoricalWeatherData">
<HistoricalWeatherData></HistoricalWeatherData>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
......
frontend/src/views/weatherforecast.js
View file @ 3ee7a473
......@@ -2,229 +2,24 @@ import React from "react";
import Navbar4 from "../components/homepage/navbar4";
import Footer15 from "../components/homepage/footer15";
import WeatherForecastData from "../components/weather/weatherForecastData";
import "./home.css";
import "./data.css";
const Weatherforecast = (props) => {
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";
}
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div>
<div className="thq-grid-5">
<div class="filter">
<label for="city">City:</label>
<input type="text" id="city" placeholder="City" />
<br />
<label for="city">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input
type="checkbox"
id="temperature"
className="checkBoxFilter"
/>
<label> Temprature</label>
<br />
<input type="checkbox" id="isDay" className="checkBoxFilter" />
<label> Is it day?</label>
<br />
<input type="checkbox" id="condition" className="checkBoxFilter" />
<label> Condition</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label> Pressure</label>
<br />
<input
type="checkbox"
id="precipitation"
className="checkBoxFilter"
/>
<label> Precipitation</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label> Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label> Cloud</label>
<br />
<input
type="checkbox"
id="feelslikeTemp"
className="checkBoxFilter"
/>
<label> Feelslike Temp.</label>
<br />
<input type="checkbox" id="visibility" className="checkBoxFilter" />
<label> Visibility</label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label> UV-Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label> Gust</label>
<br />
<input type="checkbox" id="airquality" className="checkBoxFilter" />
<label> Airquality</label>
<br />
</div>
<div class="filter">
<label>Temperature Unit:</label>
<select id="unitTemperature">
<option value="temp_c">Celsius</option>
<option value="temp_f">Fahrenheit</option>
</select>
<label>Wind speed Unit:</label>
<select id="unitWindSpeed">
<option value="wind_kph">km/h</option>
<option value="wind_mph">Mph</option>
</select>
<label>Pressure Unit:</label>
<select id="unitPressure">
<option value="pressure_mb">Millibar</option>
<option value="pressure_in">Inch</option>
</select>
<label>Precipitation Unit:</label>
<select id="unitPrecipitation">
<option value="precip_mm">Millimeter</option>
<option value="precip_in">Inch</option>
</select>
</div>
<div class="filter">
<label>Output:</label>
<select id="output">
<option value="local">Local</option>
<option value="database">API</option>
</select>
<br />
<label>Data format:</label>
<select id="format">
<option value="json">JSON</option>
<option value="csv">CSV</option>
<option value="xml">XML</option>
</select>
<br />
<button className="APIButton" onClick={searchAPI}>City api</button>
</div>
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
return(
<div>
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
);
<div className="WeatherForecastData">
<WeatherForecastData></WeatherForecastData>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
export default Weatherforecast;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal