Build A Weather App in HTML CSS and JavaScript | Weather App Project HTML CSS and JavaScript

In this video tutorial, I've shown how to build a responsive weather app using HTML, CSS, and JavaScript. In this weather project, users can enter any city name to get the weather forecast or simply click on the "Use Current Location" button to get current location weather details, including temperature, wind speed, humidity, and more.
Live Demo or Download Code of this Weather App Project
codingnepalweb.com/demos/weat...
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
/ coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
Timestamps:
0:00: Weather App Demo
1:49: Starting with HTML & CSS
14:23: Getting into JavaScript
14:52: Retrieving Geocoordinates of the City
19:40: Fetching the Weather Data for the City
32:08: Working on "Use Current Location" Button
#javascript #html #css #javascriptprojects #js #chatbot
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Those Restless Nights - Artificial.Music
• Those Restless Nights ...

[@CodingNepal]

Please note that your newly created OpenWeatherMap API key may take minutes or hours to activate. During this time, you'll get an error like "Invalid API key" or something similar. So be patient until the key starts working.

[@benvink4682]

Hi @codingNepal. Thank you for your awesome video. my console is giving me an error This request has been blocked; the content must be served over HTTPS. How do I resolve this issue? thanks

[@seemarai8427]

I have done exactly the way you did in the video , api is not working it's been more than 24 hours and I'm getting errors in the list and div class while copying the code to javascript..... Don't know what to do......plz help me

[@raghadabdulaziz2243]

@@seemarai8427whar happened

[@heretorule91]

thanks a lot but i want to know how to deploy it on vercel or other app it is showing error on deploying however it is working in my computer

[@donramsey8119]

Great job! Thank you!

[@alexeyvelkov7568]

Good job! Thank you very much)

[@wilsonmuita6835]

Much gratitude Sir! TheWeather App project rocked! It seamlessly delivered forecasts, wowed users with a stunning interface, and made every day brighter! 🌞📱

[@lukas.webdev]

Awesome video! Keep it up 😉💪

[@CodingNepal]

Thank you! Will do!

[@TopGunTomCruise]

Now you know where lives the best CZcamsr ever 😂

[@azuboof]

Youre amazing

[@godugukishorechandra]

Thank you sir you have helped me for my project..👍

[@CodingNepal]

Glad to hear that

[@prathikshagowda24]

Thank you @codingNepal ❤ your video helps me lot 🙏

[@CodingNepal]

Happy to hear that :)

[@debrauwermichael2366]

Good job ! But the problem is that the card for the following days display the data for the following days at the time of 00:00:00.

[@mightycheetah7203]

Which openweathermap subscription did you use?

[@Sahana-o6d]

Thank you so much..helped a lot 😊

[@CodingNepal]

Glad it helped :)

[@bru3356]

Thank u so much .. Helped a lot😊

[@CodingNepal]

You're welcome 😊

[@surriiisama8528]

⁠i have a question, after finishing coding, how do you open to get to the dashboard, did it pop up after finishing coding or do you have to click anything to open the dashboard?

[@richardlew3667]

How did you add in the temperatures in the HTML file?

[@sahilsiyotra6072]

can you mention about the backend technology

[@infobusiness2246]

good job, I want you make a trading website too

[@ObamaEditz]

First Comment ! BTW where from did you learn this?

[@user-ws5px3dn2k]

please tell how to insert real feel and pressure option

[@janhavinanaware6337]

sir in this project you can show that the report of the weathers on daily basis

[@Growtion]

@codingNepal sir how to use your codes in blogger website 🥺

[@Lelobac]

how create referral website ?

[@princenabish1228]

can you plz suggest how to change yyyy/mm/dd format to dd/mm/yyyy

[@SanjayNG125]

I want to add rain probability persentage but I can't get rain probability persentage....how to get it sir...??

[@slowhilanything2576]

Sir, I got message as co ordinate are not found when city name is London what can i do next?
Anyone plz🙌

[@praveen.m1056]

sir, how to get whole web content in one web page as like yours. I'm getting webpage in scroll manner.
help me...

[@dshadow5321]

14:30

[@SanjayNG125]

Awesome sir 👌🔥 sir please make redmi countdown timer, means in that we can select hour, min , sec by scrolling style.hope you understand my English 😂 but please make it sir it's a humble request....🙏❤️ please sir....

[@CodingNepal]

Okay, noted!

[@SanjayNG125]

@@CodingNepal thank you so much sir.. ❤️❤️

[@abhinavagnihotri2595]

hey how to change the date format to DD-MM-YYYY. Please help

[@jojomuneza9908]

I already input my api_key but the error is no coordinates find in my city can you help me?

[@surriiisama8528]

how do i named my own link to the weather app? or i cant do that?

[@dipeshkale3398]

We need backend also sir

[@mdsiddiq1579]

How to add date and hour in this

[@mohanasrisravya836]

Hi,I need in react js

[@91221HelloWorld]

Please Create like and comment functionality using ajax and php.

[@m.areeshrashid705]

Please Resume Generator HTML CSS JavaScript.

[@pihubp6782]

Sir error is showing in geocoding api url while consoling

[@rm99997]

WEBSITE IS NOT WORKING HELP does not get information about an city

[@user-ek5sb4wz2x]

React? Any small projects too.

[@biplabsharma5344]

If you know javascript then you can convert this project in Javascript easily without any problem

[@iamabhishekvyas]

The logo of sun is appearing grey at some places. What should I do ?

[@awantikaawasthi165]

My console on live server is not responding to the inputs in the search bar...plz suggest what to do???

[@indianjohnwick3383]

bhai mera bhi kaam nhi krr rha
yr batana yrr kese hoga

[@jeeshmajeeshu5652]

Which text editor should i use someone plzz tell me I'm a beginner 🥲

[@richardlew3667]

24:59 What exactly did you do? It happened way too fast.

[@mohitparekh7878]

Import URL kahaselu error a raha hai

[@dileepkr6069]

Is it responsive

[@Sahana-o6d]

please can you help us for 7days forecast api key

[@imrankhan-tg1pc]

sir please add hourly weather option in this

[@CodingNepal]

Sure, thanks for your suggestion.

[@henaparvin9032]

Sir api kam nahi kar raha hain meri tho ak din ho gaya tab bhi fetching error dikha raha hain ..chat bot main bhi same problem hua tha ...meri har projects incomplete ho raha hain 😭😭😭😭

[@loppin6154]

Hi

[@GameHubX263]

How to get Api?how can i order or buy?

[@CodingNepal]

API is free. Please watch the video for it.

[@pujatiwari2594]

How can we download the project code

[@CodingNepal]

Here is the download link www.codingnepalweb.com/weather-app-project-html-javascript/

[@HemanthKumar-ng1dk]

Why it says No coordinates are found for ${cityName}

[@CodingNepal]

Make sure to use back ticks ` ` not single quotes ' '.

[@bru3356]

Sir provide api key for 7 days . Please sir we tried it was not activating..

[@NikhilChaudhary-fc4gr]

Provide me this project related ppt

[@mahin_2_23]

How to create app like tiktok

[@uditvish726]

or shabji momoj khayenge ?

[@ishaansharma7140]

This API is not working, even after 24 hrs it is responding as an error ..what to do ?

[@seemarai8427]

Hii @ishaansharma7140 did the api start working?

[@AhmedHany-sl4io]

@@seemarai8427 did it work?

[@seemarai8427]

@@AhmedHany-sl4io it is working

[@pleasesubscribe7265]

Hi, learn css?

[@ColtonThomas-qv8zk]

Did You Know for a div abbreviation you don't have to type "div.CLASSNAMEHERE" you can do ".CLASSNAMEHERE"!

[@Sahana-o6d]

Thank you so much your video helped us a lot 💫❤️‍🩹

[@CodingNepal]

You’re welcome 😊