Frage
Antwort
Hier mein alter Javascript code welcher zu C# werden soll (damit ihr versteh was ich haben möchte):
const apiKey = "ApiKey";
const apiUrl = "ApiUrl";
const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");
async function checkWeather(city)
{
const response = await fetch(apiUrl + city + `&appid =${ apiKey}`);
var data = await response.json();
console.log(data);
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";
const body = document.querySelector("body");
if (data.weather[0].main == "Clouds")
{
weatherIcon.src = "images/suncloud.png";
}
else if (data.weather[0].main == "Clear")
{
weatherIcon.src = "images/image1.png";
}
}
searchBtn.addEventListener("click", () => {
checkWeather(searchBox.value);
}
Hier Mein Css Code:
.backgroundimage {
background-image: url('../images/sun_background.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.cloud-background {
background-image: url('../images/cloud.png');
/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */
}
.card {
width: 90%;
max-width: 470px;
color: #fff;
margin: 10px auto 0;
border-radius: 20px;
}
.search{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.search input{
border: 0;
outline: 0;
background: #ebfffc;
color: #555;
padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
}
.search button{
border: 0;
outline: 0;
background: #ebfffc;
border-radius: 60%;
width: 60px;
height: 60px;
cursor: pointer;
}
.weather-icon{
margin-bottom: -30px;
}
.weather h1 {
font-size: 80px;
font-weight: 500;
color: floralwhite;
}
.weather h2 {
font-size: 40px;
font-weight: 400;
margin-top: -10px;
color: floralwhite;
}
.details {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
margin-top: 50px;
}
.col {
display: flex;
align-items: center;
text-align: left;
margin-top: 150px;
}
.col img {
width: 20px;
margin-right: 20px;
margin-bottom: 70px
}
.humidity, .wind{
font-size: 28px;
margin-top: -6px;
color: floralwhite;
}
.speed{
font-weight: bold;
}
.temp {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.search button img{
width: 55%;
}
.center {
display: flex;
justify-content: center;
}
.top-left{
display: flex;
justify-content:left
}
.top-left
{
margin-left: 10px;
}
.margin-top{
margin-top: 20px;
}
.hr1 {
width: 390px;
height: 2px;
color: black;
}
.line{
margin-bottom: -100px;
margin-top: 10px;
}
.line1{
margin-top: 30px;
margin-bottom: -20px;
}
.line0{
margin-top: 70px;
margin-bottom: -90px;
font-size: 14px;
font-weight: bold;
color: black;
}
.imageline {
margin-top: 5px;
margin-bottom: -90px;
}
.imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
.imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
.title {
display: inline-block;
color: lightgray;
}
.margin-left{
margin-left: 14px;
}