Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.
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: 22px; margin-right: -5px;"
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; 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>
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;
}
