├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather App 7 | 8 | 9 | 10 | 11 |
12 |

Weather App

13 |
14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | /* Background Image */ 3 | background: url('https://t4.ftcdn.net/jpg/06/41/91/85/360_F_641918542_bL3O5qWqKmaVrxM12Qa1pp1owFvKKP3k.jpg') no-repeat center center fixed; 4 | background-size: cover; 5 | } 6 | 7 | /* Card styles */ 8 | .weather-card { 9 | background: #fff; 10 | border: 1px solid #6c757d; 11 | border-radius: 8px; 12 | padding: 15px; 13 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 14 | color: #000; 15 | /* Ensure text is readable */ 16 | max-width: 450px; 17 | /* Set a maximum width */ 18 | width: 100%; 19 | /* Make the card responsive */ 20 | margin: 0 auto; 21 | } 22 | 23 | /* Responsive adjustments */ 24 | @media (max-width: 768px) { 25 | .weather-card { 26 | padding: 10px; 27 | } 28 | 29 | .weather-card h2 { 30 | font-size: 1.75rem; 31 | } 32 | 33 | .weather-card img { 34 | width: 120px; 35 | } 36 | } 37 | 38 | @media (max-width: 576px) { 39 | .weather-card { 40 | padding: 8px; 41 | } 42 | 43 | .weather-card h2 { 44 | font-size: 1.5rem; 45 | } 46 | 47 | .weather-card img { 48 | width: 100px; 49 | } 50 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.getElementById('form').addEventListener('submit', async function (event) { 2 | event.preventDefault(); 3 | const city = document.getElementById('city').value.trim(); 4 | if (!city) { 5 | alert('Please enter a city name'); 6 | return; 7 | } 8 | // secret 9 | const apiKey = '2aabea5f82e14886a5e131324242408'; 10 | const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}`; 11 | 12 | try { 13 | // fething the api 14 | const response = await axios.get(url); 15 | // convert the data using .data 16 | const data = response.data; 17 | 18 | if (data.error) { 19 | document.getElementById('weather-card').innerHTML = `

${data.error.message}

`; 20 | return; 21 | } 22 | 23 | const weatherHtml = ` 24 |
25 |

${data.location.name}

26 |

${data.location.localtime}, ${data.location.country}

27 |
28 |

${data.current.temp_c}°C

29 | Weather icon 30 |
31 |

${data.current.condition.text}

32 |
33 | `; 34 | document.getElementById('weather-card').innerHTML = weatherHtml; 35 | } catch (error) { 36 | document.getElementById('weather-card').innerHTML = `

Error: ${error.message}

`; 37 | } 38 | }); 39 | --------------------------------------------------------------------------------