diff --git a/index.html b/index.html new file mode 100644 index 0000000..642f5eb --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + Weather App + + + +
+
+

Weather App

+
+
+
+

Location

+
+

+ Temperature: --°C +

+

Condition: --

+
+
+
+ + +
+
+ +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..5cdbabc --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ +// weather app + +let city = document.getElementById("city").value; +let temperature = document.getElementById("temperature"); +let condition = document.getElementById("condition"); +let locationHeading = document.querySelector(".location"); + +console.log(city); + +async function fetchWeatherData() { + const url = + "https://weatherapi-com.p.rapidapi.com/current.json?q=53.1%2C-0.13"; + const options = { + method: "GET", + headers: { + "x-rapidapi-key": "73736933c8msh0e36fc0e81a021cp1634e9jsn68c86f8cf32e", + "x-rapidapi-host": "weatherapi-com.p.rapidapi.com", + }, + }; + + try { + const response = await fetch(url, options); + if (!response.ok) { + throw new Error("Network response not okay."); + } + const result = await response.json(); // extract data using result + console.log(result); + + updateLocation(result.location.name); + updateTemperature(result.current.temp_c, result.current.temp_f); + updateConditionAndIcon( + result.current.condition.text, + result.current.condition.icon + ); + } catch (error) { + console.error(error); + } +} + +function updateLocation(locationName) { + locationHeading.textContent = locationName; +} +function updateTemperature(temperatureC, temperatureF) { + temperature.textContent = `${temperatureC}°C / ${temperatureF}°F`; +} +function updateConditionAndIcon(text, icon) { + condition.innerHTML = ""; + condition.textContent = text; + + const ICON_IMG = document.createElement("img"); + ICON_IMG.src = icon; + ICON_IMG.alt = icon; + condition.appendChild(ICON_IMG); +} + +// Call the async function +fetchWeatherData(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..81ce53d --- /dev/null +++ b/styles.css @@ -0,0 +1,93 @@ +/* styles.css */ +* { + box-sizing: border-box; + margin: 0; +} + +body { + font-family: Arial, sans-serif; + background-color: #303030; + color: #333; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + max-width: 800px; + margin: auto; + padding: 20px; + background: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +header { + text-align: center; + margin-bottom: 20px; +} + +h1 { + margin: 0; + font-size: 2em; +} + +.weather-info { + text-align: center; + margin-bottom: 20px; +} + +.location { + font-size: 1.5em; + margin-bottom: 10px; +} + +.weather-details { + font-size: 1.2em; +} + +.search { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +#city { + padding: 10px; + font-size: 1em; + border: 1px solid #ddd; + border-radius: 4px; + margin-right: 10px; +} + +#search { + padding: 10px 20px; + font-size: 1em; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#search:hover { + background-color: #0056b3; +} + +footer { + text-align: center; + font-size: 0.8em; + color: #555; +} + +footer a { + color: #007bff; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +}