Vertiefung 10: Anwendung von Flexbox in CSS und Logik in JavaScript

Um Flexbox in CSS und Logik in JavaScript zu kombinieren, können wir ein einfaches Beispiel erstellen, das basierend auf der Temperatur und dem Wetter eine Nachricht anzeigt. Hier ist ein Beispiel: ```html

.weather-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
padding: 20px;
}
.temperature {
font-size: 24px;
}
.weather-state {
font-size: 18px;
}

let temperature = 25;
let isSunny = true;
 
if (temperature < 20 && isSunny) {
document.querySelector('.weather-state').innerText = "Sonnig";
} else if (temperature < 20) {
document.querySelector('.weather-state').innerText = "Wärmer";
} else if (isSunny) {
document.querySelector('.weather-state').innerText = "Wolkig";
} else {
document.querySelector('.weather-state').innerText = "Regen";
}