WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Application météo
1450
skullbomb
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 July 2025
L'application TheDoc Notes
13 June 2025
Interface utilisateur de l'application Réveil et Chronomètre
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="weather-container"> <h1>WEATHER APP</h1> <input type="text" id="city-input" placeholder="Enter city name"> <button id="get-weather">Get Weather</button> <div id="weather-result" class="hidden"> <h2 id="city-name"></h2> <p id="temperature"></p> <p id="condition"></p> <p id="humidity"></p> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #87ceeb; } .weather-container { text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px; } .hidden { display: none; } #city-input { padding: 10px; width: 80%; margin-bottom: 10px; font-size: 1em; } button { padding: 10px 20px; font-size: 1em; color: #ffffff; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #005663; } #weather-result p { margin: 5px 0; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
