Hilfe für c# code mit HTML &CSS in Blazor?
Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:
1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.
2.
Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display
Hier mein Html Code:
<body class="backgroundimage">
<div class="card">
<div class="search">
<button><img src="/images/SuchIcon.png"></button>
<input type="text" placeholder="Search" spellcheck="false" />
</div>
</div>
<div class="weather">
<div class="center margin-top">
<img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
</div>
<div>
<h1 class="temp">22°c</h1>
</div>
<div class="center">
<h2 class="city center margin-top">New York</h2>
</div>
<hr class="hr1 line1" />
<div id="imagesMain">
<img src="/images/image1.png" width="75" height="75" class="imageline " />
<img src="/images/image1.png" width="75" height="75" class="imageline " />
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>
</div>
<div>
<p style="color:black;" class="line0 title margin-left ">Monday</p>
<p style="color:black;" class="line0 title margin-left ">Tuesday</p>
<p style="color:black;" class="line0 title margin-left ">Wednesday</p>
<p style="color:black;" class="line0 title margin-left ">Thursday</p>
<p style="color: black;" class="line0 title margin-left ">Friday</p>
</div>
<hr class="hr1 line" />
<div class ="details">
<div class="col">
<img src="images/humidity.png"/>
<div>
<p class="speed">Humidity</p>
<p class="humidity">50%</p>
</div>
</div>
<div class="col">
<img src="images/wind.png" />
<div>
<p class="speed">Wind Speed</p>
<p class="wind">15 km/h </p>
</div>
</div>
</div>
</div>
</body>
Im unteren Kommentar werd ich die restlichen Codes posten
1 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;
}
Wäre cool wenn mir wer helfen könnte, habe leider nicht mehr soviel Zeit und bin ziemlich am verzweifeln.
Draussen ist voll schönes Wetter ess doch lieber ein Eis mit mir 😂😜