diff --git a/index.html b/index.html new file mode 100644 index 0000000..4afb1e1 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + Weather API Homework + + + + +

Instructions: Enter a city's name into the textbox below. +

You can also enter a State or Country after the city's name if your city shares its name with another.

+

For example, to see the weather in Paris, Texas and not Paris, France, enter "paris texas" or "paris tx" in the search.

+

The search is pretty forgiving, so try multiple things. You can also use airport codes!

+
+
+
+ + +
+ +
+

+

+

+

+

+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..550ab04 --- /dev/null +++ b/script.js @@ -0,0 +1,42 @@ +const apiKey = 'dd026f059d6a4f90af5220509230504' +const button = document.querySelector('button') +const input = document.querySelector('input') + +const cityName = document.getElementById('cityName') +const cityTemp = document.getElementById('temp') +const cityCondition = document.getElementById('condition') +const cityIcon = document.getElementById('icon') +const cityTime = document.getElementById('cityTime') + + +// This code will let the user search by hitting the Enter key instead of having to click +input.addEventListener('keypress', function onEvent(event) { + if (event.key === 'Enter') { + document.getElementById('submitButton').click() + } +}) + +// This code controls the API call, which activates on click (or when Enter is pressed) +button.addEventListener('click', async () => { + let cityInput = input.value + let response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}%20&q=${cityInput}&aqi=no`) + console.log(response) + let responseCityName = response.data.location.name + let responseRegion = response.data.location.region //Region for overseas kind of sucks, but is state for US. how to remove for overseas? + let responseCountry = response.data.location.country + + let responseCityTemp = response.data.current.temp_c + let responseCityTime = response.data.location.localtime + let responseCityIcon = response.data.current.condition.icon + let responseConditions = response.data.current.condition.text + + if (responseRegion === '') { + cityName.innerText = `${responseCityName}, ${responseCountry}` + } else { + cityName.innerText = `${responseCityName}, ${responseRegion}, ${responseCountry}` + } + cityTemp.innerHTML = `Current Temperature: ${responseCityTemp}° Celsius` + cityTime.innerText = `Local Time: ${responseCityTime}` + cityCondition.innerText = `Current Weather Conditions: ${responseConditions}` + cityIcon.innerHTML = `` +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..58f0188 --- /dev/null +++ b/style.css @@ -0,0 +1,8 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: ghostwhite; +} + +div { + text-align: center; +} \ No newline at end of file