WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Application météo
1226
skullbomb
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
10 February 2025
application météo
23 August 2025
Météo en Turquie : prévisions météo instantanées à 7 jours
23 August 2025
Solutions technologiques : Web, applications, cloud, IA et cybersécurité
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) */
