WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Application météo
1101
skullbomb
Ouvrir dans l'éditeur
Publiez votre code
12 July 2025
L'application TheDoc Notes
8 September 2024
Carte météo animée
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) */
