diff --git a/index.html b/index.html new file mode 100644 index 0000000..9805fdf --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + Weather + + + + + + + + +
+

Current Weather

+ + +

+
+

+ +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..eed8723 --- /dev/null +++ b/script.js @@ -0,0 +1,27 @@ +const apiKey = "fb24dfeacb134b2f96c220226230504"; +const button = document.querySelector('button'); +const cityInput = document.querySelector('input'); +const cityName = document.querySelector('#cityName'); +const cityTemp = document.querySelector('#cityTemp'); +const weatherIcon = document.querySelector('#weatherIcon') + +button.addEventListener('click', + async ()=>{ + console.log('button clicked') + let city = cityInput.value; + let response = await axios.get( + `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}&aqi=no` + ) + let temp = response.data.current.temp_f; + let icon = response.data.current.condition.icon; + cityName.textContent = `The temperture in ${city} is:`; + // cityName.textContent = `Is:`; + cityTemp.textContent = `${temp}ºF`; + weatherIcon.setAttribute('src', icon) + // console.log(response.data.error.message) + // if (response.data.error.message = "No matching location found."){ + // cityName.textContent = response.data.error.message + // } + } + +) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..48f0076 --- /dev/null +++ b/style.css @@ -0,0 +1,39 @@ +section{ + color: white; + text-align: center; + font-family: 'Open Sans', sans-serif; + max-width: 300px; + height: 300px; + margin: auto; + padding: 3rem; + margin-top: 10vh; + background-image: linear-gradient(rgb(36, 100, 230), rgb(46,206,242)); + border-radius: 15px; +} +input , button{ + background-color: white; + border-radius: 5px; + border: none; + padding: .5rem; + text-align: center; +} +#cityName{ + font-size: 1rem; + margin-top: 2rem; +} +#cityTemp{ + /* border: lightgrey solid 1px; */ + /* width: fit-content; */ + margin: auto; + padding: .5rem; + /* font-size: 2rem; */ +} +#results{ + display: flex; + width: fit-content; + margin: auto; +} + +h1{ + font-size: 2rem; +} \ No newline at end of file