WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
मौसम ऐप
841
skullbomb
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
22 November 2024
ऐप कार्ड डाउनलोड करें
8 September 2024
एनिमेटेड मौसम कार्ड
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) */
