Adding Weather Conditions/Forecast to Page

Hello,
I am interested in adding a line of text to my page that displays the current weather in Brooklyn, NY. It ties into the concept of my website. I would like to insert a line at the bottom of the page, right after the copyright. Ideally, the line would read something like “It is currently 68ºF and sunny in Brooklyn, NY.” Does anyone know where to begin with something like this? I have limited knowledge of HTML/CSS. My site can be accessed at http://colehowell.com.

THANK YOU!

Hi @WidowsAndOrphans,

I made a mockup to demonstrate how to pull in live weather data here: https://brooklyn-weather.webflow.io/

I used text spans with IDs that will get replaced by the live data using the code in Page Settings > Custom Code > Before </body> tag.

Here’s the read-only link so you can see how it works: Webflow - Brooklyn Weather

If you end up using this method, I’d recommend getting your own API key and replacing mine with yours. You can get the API key from here: https://developer.accuweather.com/

It’s surprisingly difficult to find a weather API with the right wording to use in a sentence - for example, this will show ‘sunny’ and ‘cloudy’ which are fine but then it will show ‘light rain’ which doesn’t work so well in the sentence.

If you get stuck along the way, please let me know and I’ll be happy to help!

Hi @mww! Wow, thanks! I don’t think I am able to see your code though, would you be able to paste it here?

Best,
Cole :slight_smile:

Hi @WidowsAndOrphans,

You should be able to see it in Home Page Settings > Custom Code > Footer Code but I’ll paste it here (without the API key):

<script>
fetch('https://dataservice.accuweather.com/currentconditions/v1/334651?apikey=YOUR_API_KEY')
.then(res => res.json())
.then(data => {
const condition = data[0].WeatherText.toLowerCase()
const temp = data[0].Temperature.Imperial.Value

document.querySelector('#condition').innerText = condition
document.querySelector('#temp').innerText = temp

})
</script>

Hope this helps!

You’re the best, I got it working!

Thank you!
Cole

1 Like