Advanced Weather App with Javascript and Weather API | Complete Weather Application

How to create a full weather web application using HTML, CSS, Javascript and weather API.

What you will learn:
How to-
- Use Fetch to get data from an API
- Use an API on your application
- Display data from an API into your app
- Create a search bar, and search through
the weather API for a specific city
- Create a beautiful glassmorphism app design with HTML & CSS
- Responsive Design with CSS
- Reformatting API data to something more suitable for the UI
- Working and manipulating strings in JS
- Using template literals in Javascript
- Conditionally changing the background image
of the app based on current weather
- Catching errors when fetching from an API
- Basic CSS animations

Free Weather API:

Weather Icons:

Google Font Used:

Images Used:
Day:
Night:

Original Design:

Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)

Get The Source Code From All Of My Videos:

Follow me on Instagram:

My Products:

Support Me To Keep Creating And Improving My Content:

Tags:
#api
#javascript
#weather

[sahanashreeg]

Sir tqs a Lott finally I got full output I learned more from this api, javascript accessing json fetching data all new it's my first experience in project and coding upto three days I struggle more and more for this at last I got tqs thanks sir 🙏🙏

[floyd]

Awesome! It worked wonderfully so far, some struggles here and there with CSS responsiveness and the string interpolations in JS (I always miss one damn character lol) but that's the joy of learning. Thank you very much for sharing!

[shaquibhussain]

@quickcodingtuts i have finished the coding of all the files that is html css and javascript and changed the opacity to 0 in css after completing all but on launching the project on liveserver its just showing me the gray coloured background nothing else..plz help urgent

[sayandeeproy]

Background image not changing respect to weather condition and day-night ..My file path directory same as you but still not changing background image.

[moumitamondal]

const app =
^

ReferenceError: document is not defined
how to get rid of this?

[germanrico]

hi, txs for te tuto, i wanna know why the day in leters displays as "undefined", everyelse works fine, i look the entire code more than 3 times and i dont find any typo, could you help me?

[kaungyankaung]

Hello idol, why the weather does not change. it's cause of weather api ? Please help me.

[dank]

TypeError: cities.forEach is not a function. What do i do? Can someone help?

[compaqcleaningsolutions]

@QuickCodingTuts my api is not working at all, because every thing like temp app, etc is showing undefined, could you help pls.

[devstuff]

Can't seem to update the location details when I click on one of the cities on the panel or when I search in the search bar. It keeps throwing that catch error at the end of the fetchWeatherData function "Location not found, please try again". I get the data in the console though, I'm new with javascript. Can't seem to find a solution for this issue

[leason]

Even if I regenerate the api several times, it always tells me invalid api. :( error code 2006

[jodynurcahyadi]

hi mate, need help here.. I just wrote ur entire code from this video and when I try, there is no work at all and there is no error response, did I miss something???

[moumitamondal]

hey it is saying that the api has been disabled
what to do

[rishavraj]

i have written all the code but my icons time and image are not changing instead it is show city not found and weather of that city is displaying plzz help

[jonasvirsila]

Sorry again, how would you create a button that lets you randomly display a location each time you press it? I mean, I want to add a button and what it does, it uses the fetchWeatherData function to randomly display weather locations.

[zeljkooanicic]

Hello, can I send you my js code? I need help, there is an error somewhere because of which the images do not load and the search bar does not work for me, when I type any city it does not work, it does not throw out anything

[ramusapram]

How to get our own API key? I'm facing the trouble for fetching the data. Can you please tell us... @QuickCodingTuts

[abdulazizabduraximov]

Hello my project isnot working console log is watching forEach isnot function

[divine-developers]

hey...i am unable to integrate the icons in my code. i have tried multiple times but its still not visible... can anyone help me ?

[saipriyapatnaik]

Heyy can u help me out my background is not changing as per the code