From df0857a2a8259ae184ff552c6c387cd8d134ad29 Mon Sep 17 00:00:00 2001 From: jzhupan Date: Thu, 6 Apr 2023 21:16:48 -0400 Subject: [PATCH 1/2] First commit for Mini Weather App using API, I styled it a bit as well. --- app.js | 27 +++++++++++++++++++++++++++ index.html | 27 +++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..3ca9a77 --- /dev/null +++ b/app.js @@ -0,0 +1,27 @@ +const apiKey = '298f3c5d10d141d5843153415230404'; +const button = document.getElementById('submitButton'); +const input = document.getElementById('textInput') +const weatherImg = document.getElementById('weatherImg'); +const cityNameDisplay = document.getElementById('cityName'); +const weatherTemperature = document.getElementById('temp'); +const weatherCondition = document.getElementById('weatherText'); + +button.addEventListener('click', async () => { + let cityName = input.value; + let response = await axios.get( + `http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityName}&days=1&aqi=no&alerts=no` +) + let todaysWeather = response.data.current.temp_f + + let weatherText = response.data.current.condition.text + let weatherIcon = response.data.current.condition.icon + + weatherCondition.innerHTML = weatherText; + weatherImg.src = weatherIcon; + + cityNameDisplay.innerHTML = cityName.toUpperCase(); + weatherTemperature.innerHTML = `${todaysWeather}ºF` + console.log(response) + console.log(cityName) + console.log(todaysWeather) +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0c4106b --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + Mini Weather App + + +
+

Mini Weather App

+ + + +

+

+ +

+ + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..807f3d4 --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ +*{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + +} +input{ + padding: 5px; + background-color: aliceblue; + color: rgb(128, 128, 128); +} +button{ + border-radius: 5px 5px 5px 5px; + background-image: linear-gradient( 135deg, #72EDF2 10%, #a0e551 100%); + border: solid white; + height: 30px; + text-align: center; + animation: color-change 3s infinite; +} + +@keyframes color-change{ + 0% { color: rgb(0, 255, 51); } + 50% { color: rgb(0, 136, 255); } + 100% { color: rgb(229, 255, 0); } +} + +#cityName{ + margin-top: 10%; +} +#weatherText{ + margin-top: 10%; +} +#weatherContainer{ + margin-top: 5%; +} +div { + color: white; + margin: auto; + width: 50%; + padding: 10px; + width: 500px; + height: 500px; + text-align: center; + background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%); + border-radius: 5% 5% 5% 5%; +} +img{ + height: 100px; +} \ No newline at end of file From 8bf29506de19a167d70e785db31703524ed33db6 Mon Sep 17 00:00:00 2001 From: jzhupan Date: Fri, 7 Apr 2023 21:26:28 -0400 Subject: [PATCH 2/2] Updated the weather app to display location and country. --- app.js | 13 +++++++++---- index.html | 4 ++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index 3ca9a77..51fd7ae 100644 --- a/app.js +++ b/app.js @@ -7,20 +7,25 @@ const weatherTemperature = document.getElementById('temp'); const weatherCondition = document.getElementById('weatherText'); button.addEventListener('click', async () => { - let cityName = input.value; + let cityNameInput = input.value; let response = await axios.get( - `http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityName}&days=1&aqi=no&alerts=no` + `http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityNameInput}&days=1&aqi=no&alerts=no` ) - let todaysWeather = response.data.current.temp_f + let cityName = response.data.location.name + let countryName = response.data.location.country + let todaysWeather = response.data.current.temp_f let weatherText = response.data.current.condition.text let weatherIcon = response.data.current.condition.icon weatherCondition.innerHTML = weatherText; weatherImg.src = weatherIcon; - cityNameDisplay.innerHTML = cityName.toUpperCase(); + let cityAndCountryName = `${cityName} , ${countryName}`; + cityNameDisplay.innerHTML = cityAndCountryName; weatherTemperature.innerHTML = `${todaysWeather}ºF` + + console.log(countryName) console.log(response) console.log(cityName) console.log(todaysWeather) diff --git a/index.html b/index.html index 0c4106b..bd245de 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,9 @@

Mini Weather App

-

+

-

+