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

Подписаться 229 тыс.

Просмотров 78 тыс.

50% 1

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.
🗂️ Get Source Code of this Weather App
➤ buymeacoffee.c...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepa...
⭐ Hire me on Fiverr
➤ www.fiverr.com...
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.c...
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 ...

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 92

@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 11 месяцев назад

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 10 месяцев назад

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 7 месяцев назад

@@seemarai8427whar happened

@heretorule91 3 месяца назад

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

@SuleyStars Год назад

Now you know where lives the best RU-vidr ever 😂

@ashitarya9361 29 дней назад

Thank you!! Your video saved me last minute (I have my summer training program viva tomorrow)

@CodingNepal 29 дней назад

Happy to hear that. Best wishes!

@Growtion Год назад

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

@my_awsome_edits Год назад

First Comment ! BTW where from did you learn this?

@Юрий-с5е2к Год назад

React? Any small projects too.

@biplabsharma5344 Год назад

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

@gonz2944 Месяц назад

very clear! Love your video. Thank you!

@slowhilanything2576 8 месяцев назад

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

@bru3356 2 месяца назад

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

@user-saint Месяц назад

Awesome!!!

@godugukishorechandra 5 месяцев назад

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

@CodingNepal 5 месяцев назад

Glad to hear that

@Sahana-o6d 2 месяца назад

please can you help us for 7days forecast api key

@uditvish726 3 месяца назад

or shabji momoj khayenge ?

@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

@lukas.webdev Год назад

Awesome video! Keep it up 😉💪

@CodingNepal Год назад

Thank you! Will do!

@GameHubX263 3 месяца назад

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

@CodingNepal 3 месяца назад

API is free. Please watch the video for it.

@rm99997 Год назад

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

@imrankhan-tg1pc 3 месяца назад

sir please add hourly weather option in this

@CodingNepal 3 месяца назад

Sure, thanks for your suggestion.

@iamabhishekvyas 5 месяцев назад

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

@jeeshmajeeshu5652 8 месяцев назад

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

@sahanavd123 2 месяца назад

launch.json is not taking when running in vs code

@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.. ❤️❤️

@pujatiwari2594 5 месяцев назад

How can we download the project code

@CodingNepal 5 месяцев назад

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

@NikhilChaudhary-fc4gr 5 месяцев назад

Provide me this project related ppt

@pihubp6782 7 месяцев назад

Sir error is showing in geocoding api url while consoling

@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 😭😭😭😭

@9-xyz-cba Год назад

Please Create like and comment functionality using ajax and php.

@ColtonThomas-qv8zk 4 месяца назад

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

@richardlew3667 8 месяцев назад

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

@m.areeshrashid705 Год назад

Please Resume Generator HTML CSS JavaScript.

@abhinavagnihotri2595 10 месяцев назад

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

@dileepkr6069 2 месяца назад

Does it work properly or not

@CodingNepal 2 месяца назад

Yes, it works perfectly as of now.

@jojomuneza9908 9 месяцев назад

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

@monuit8938 2 месяца назад

good work bro thankyou very much

@surriiisama8528 7 месяцев назад

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

@mdsiddiq1579 4 месяца назад

How to add date and hour in this

@SanjayNG125 Год назад

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

@mohanasrisravya836 4 месяца назад

Hi,I need in react js

@pleasesubscribe7265 Год назад

Hi, learn css?

@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...

@richardlew3667 8 месяцев назад

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

@princenabish1228 Год назад

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

@prathikshagowda24 2 месяца назад

Thank you @codingNepal ❤ your video helps me lot 🙏

@CodingNepal 2 месяца назад

Happy to hear that :)

@infobusiness2246 9 месяцев назад

good job, I want you make a trading website too

@mahin_2_23 Год назад

How to create app like tiktok

@mightycheetah7203 Год назад

Which openweathermap subscription did you use?

@HemanthKumar-ng1dk 4 месяца назад

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

@CodingNepal 4 месяца назад

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

@Lelobac Год назад

how create referral website ?

@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.

@dipeshkale3398 9 месяцев назад

We need backend also sir

@sahilsiyotra6072 11 месяцев назад

can you mention about the backend technology

@loppin6154 Год назад

@SantoshKumarPati-i4v Год назад

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

@mohitparekh7878 Год назад

Import URL kahaselu error a raha hai

@dshadow5321 Год назад

14:30

@Sahana-o6d 2 месяца назад

Thank you so much..helped a lot 😊

@CodingNepal 2 месяца назад

Glad it helped :)

@surriiisama8528 7 месяцев назад

⁠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?

@CodingNepal 2 месяца назад

Apologise for the delayed response. You've double click on the index.html file and it will open on your default browser.

@nitikarajpoot9869 2 месяца назад

Source code broh😢@@CodingNepal

@alexeyvelkov7568 Год назад

Good job! Thank you very much)

@azuboof 9 месяцев назад

Youre amazing

@ishaansharma7140 Год назад

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

@seemarai8427 10 месяцев назад

Hii @ishaansharma7140 did the api start working?

@AhmedHany-sl4io 2 месяца назад

@@seemarai8427 did it work?

@seemarai8427 2 месяца назад

@@AhmedHany-sl4io it is working

@donramsey8119 10 месяцев назад

Great job! Thank you!

@wilsonmuita6835 Год назад

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

@bru3356 2 месяца назад

Thank u so much .. Helped a lot😊

@CodingNepal 2 месяца назад

You're welcome 😊

@Sahana-o6d 2 месяца назад

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

@CodingNepal 2 месяца назад

You’re welcome 😊