|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>Calculator</title> |
| 6 | + <title>Weather App</title> |
7 | 7 | <script src="https://cdn.tailwindcss.com"></script> |
8 | 8 | </head> |
9 | | -<body class="bg"> |
10 | | - <div id="input"> |
11 | | - <input type="text"> |
12 | | - <button type="submit"></button> |
| 9 | +<body class="bg-[url('./download.jpeg')] bg-cover bg-center bg-no-repeat h-screen flex items-center justify-center backdrop-brightness-80"> |
| 10 | + |
| 11 | + <div class=" p-8 rounded-xl shadow-lg w-full max-w-md backdrop-blur-sm"> |
| 12 | + <form id="weather-form" class="flex gap-2 mb-6"> |
| 13 | + <input |
| 14 | + type="text" |
| 15 | + id="city-input" |
| 16 | + placeholder="Enter city name..." |
| 17 | + class="flex-1 p-2 rounded text-black focus:outline-none focus:ring-2 focus:ring-blue-500" |
| 18 | + autocomplete="off" |
| 19 | + > |
| 20 | + <button |
| 21 | + type="submit" |
| 22 | + class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition duration-300" |
| 23 | + > |
| 24 | + Search |
| 25 | + </button> |
| 26 | + </form> |
| 27 | + |
| 28 | + <div id="weather-data" class="text-center"> |
| 29 | + <h2 id="city-name" class="text-2xl font-bold mb-2"></h2> |
| 30 | + <div id="temperature" class="text-5xl font-bold mb-4"></div> |
| 31 | + <div id="weather-description" class="text-gray-400 capitalize mb-6"></div> |
| 32 | + |
| 33 | + <div class="grid grid-cols-2 gap-4 border-t border-gray-700 pt-4"> |
| 34 | + <div> |
| 35 | + <p class="text-gray-400 text-sm">Humidity</p> |
| 36 | + <p id="humidity" class="text-xl font-semibold"></p> |
| 37 | + </div> |
| 38 | + <div> |
| 39 | + <p class="text-gray-400 text-sm">Wind Speed</p> |
| 40 | + <p id="windspeed" class="text-xl font-semibold"></p> |
| 41 | + </div> |
| 42 | + </div> |
| 43 | + </div> |
13 | 44 | </div> |
14 | | - <div id="temperature"></div> |
15 | | - <div id="weather-description"></div> |
16 | | - <div id="humidity"></div> |
17 | | - <div id="windspeed"></div> |
18 | | - |
19 | 45 |
|
20 | 46 | <script src="script.js"></script> |
21 | 47 | </body> |
|
0 commit comments