Part 3 | Open Weather API | How To Create This Webpage | JS & API Part

Опубликовано: 14 Июль 2026
на канале: Coding Voyagers
8
0

Hi, thanks for hanging out here. I'm demonstrating how to create this Weather Webpage with Open Weather's API. It just has the basic stuff, and this is part three, the last part, of the three videos that will be showing how it can be done. This video only shows the JS/API part, the HTML and CSS part link is below.

If you want to check out the live webpage of it, click the link below. You will need your API key as well. There will be a prompt requesting it.
Link: https://weather-component-with-api-op...

Figma Community File(Free) - https://www.figma.com/community/file/...

If you haven't seen part one where it shows the HTML part, click the link below to check it out.
   • How To Create This Weather Webpage | OpenW...  

If you haven't seen part two where it shows the CSS part, click the link below to check it out.
   • Part 2 | Open Weather API | How To Create ...  

It can be done in different ways, this is just the way that I was able to figure it out.

If you need help getting you API key, check out this video,
'OpenWeather API Key: How To Get the API Key':
   • OpenWeather API Key: How To Get the API Key  .

If the first API key that is auto generated doesn't work, generate another one. The second one should work for you. Once you have placed your API key in your code, if it doesn't work, try refreshing the browser and giving it a few moments before trying again once you check to make sure your code is good.

I found that doing these things helped me a lot while troubleshooting, along with checking out what the console errors were within the browser.


Resources:
Here's the link to the OpenWeather website. (There is a free version and a student version avaliable.)
https://openweathermap.org/price


This is where I got the inspiration from for my design as well.
Figma Community Free Figma Template
Inspiring Design Link Here - https://www.figma.com/community/file/...


I believe that one way to get better at something is to do it, and this helped me learn more about API's and how to include them in the code. This is a jam session while learning. Meaning just music and this video.

Helpful Stuff:
Looking to host your WordPress site - Check out this site below. Bluehost
https://bluehost.sjv.io/5g9akD

If you need help with written content check out this site below: Copymatic AI
1.) https://copymatic.ai/?via=kay

Automatically Create Your Blogs from Videos or any link.: Blogify AI
2.)https://blogify.pxf.io/AWz15J

Want to get your site up and started at a discounted price? - Shopify(free trial link)
https://shopify.pxf.io/Mm6VNP

A Quick About Me
Name: Ka'Eatta Rankins
Enjoys: learning about tech stuff.
Happy: That you made it here.
Hopes: That this video was helpful.
Wants: You want to succeed in all your goals.
My Why: Seeing people crush their goals is awesome.

Let's Connect
YouTube Channel: ‪@codingvoyagers‬
Instagram Page: kaeattar (  / kaeattar  .
-----------------------



#openweather #apikey #api
Some links maybe an affiliate link, which I may receive a commission at no cost to you.