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

Пікірлер: 87

  • @CodingNepal
    @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

    @benvink4682

    9 ай бұрын

    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

    @seemarai8427

    8 ай бұрын

    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

    @raghadabdulaziz2243

    4 ай бұрын

    @@seemarai8427whar happened

  • @heretorule91

    @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
    @donramsey81198 ай бұрын

    Great job! Thank you!

  • @alexeyvelkov7568
    @alexeyvelkov756810 ай бұрын

    Good job! Thank you very much)

  • @wilsonmuita6835
    @wilsonmuita6835 Жыл бұрын

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

  • @TopGunTomCruise
    @TopGunTomCruise Жыл бұрын

    Now you know where lives the best KZreadr ever 😂

  • @monuit8938
    @monuit89385 күн бұрын

    good work bro thankyou very much

  • @lukas.webdev
    @lukas.webdev Жыл бұрын

    Awesome video! Keep it up 😉💪

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thank you! Will do!

  • @godugukishorechandra
    @godugukishorechandra3 ай бұрын

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

  • @CodingNepal

    @CodingNepal

    3 ай бұрын

    Glad to hear that

  • @prathikshagowda24
    @prathikshagowda2423 күн бұрын

    Thank you @codingNepal ❤ your video helps me lot 🙏

  • @CodingNepal

    @CodingNepal

    23 күн бұрын

    Happy to hear that :)

  • @azuboof
    @azuboof6 ай бұрын

    Youre amazing

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

  • @Sahana-o6d
    @Sahana-o6d23 күн бұрын

    Thank you so much..helped a lot 😊

  • @CodingNepal

    @CodingNepal

    23 күн бұрын

    Glad it helped :)

  • @bru3356
    @bru335623 күн бұрын

    Thank u so much .. Helped a lot😊

  • @CodingNepal

    @CodingNepal

    23 күн бұрын

    You're welcome 😊

  • @infobusiness2246
    @infobusiness22467 ай бұрын

    good job, I want you make a trading website too

  • @mightycheetah7203
    @mightycheetah72039 ай бұрын

    Which openweathermap subscription did you use?

  • @SanjayNG125
    @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

    @CodingNepal

    Жыл бұрын

    Okay, noted!

  • @SanjayNG125

    @SanjayNG125

    Жыл бұрын

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

  • @my_awsome_edits
    @my_awsome_edits Жыл бұрын

    First Comment ! BTW where from did you learn this?

  • @Growtion
    @Growtion Жыл бұрын

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

  • @sahilsiyotra6072
    @sahilsiyotra60728 ай бұрын

    can you mention about the backend technology

  • @richardlew3667
    @richardlew36676 ай бұрын

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

  • @janhavinanaware6337
    @janhavinanaware6337 Жыл бұрын

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

  • @slowhilanything2576
    @slowhilanything25766 ай бұрын

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

  • @user-ws5px3dn2k
    @user-ws5px3dn2k10 ай бұрын

    please tell how to insert real feel and pressure option

  • @SanjayNG125
    @SanjayNG125 Жыл бұрын

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

  • @Lelobac
    @Lelobac Жыл бұрын

    how create referral website ?

  • @praveen.m1056
    @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...

  • @jojomuneza9908
    @jojomuneza99087 ай бұрын

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

  • @princenabish1228
    @princenabish122811 ай бұрын

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

  • @user-ek5sb4wz2x
    @user-ek5sb4wz2x Жыл бұрын

    React? Any small projects too.

  • @biplabsharma5344

    @biplabsharma5344

    Жыл бұрын

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

  • @abhinavagnihotri2595
    @abhinavagnihotri25958 ай бұрын

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

  • @surriiisama8528
    @surriiisama85285 ай бұрын

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

  • @awantikaawasthi165
    @awantikaawasthi165 Жыл бұрын

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

  • @indianjohnwick3383

    @indianjohnwick3383

    11 ай бұрын

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

  • @sahanavd123
    @sahanavd12318 сағат бұрын

    launch.json is not taking when running in vs code

  • @dipeshkale3398
    @dipeshkale33987 ай бұрын

    We need backend also sir

  • @pihubp6782
    @pihubp67824 ай бұрын

    Sir error is showing in geocoding api url while consoling

  • @surriiisama8528
    @surriiisama85285 ай бұрын

    ⁠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

    @CodingNepal

    5 күн бұрын

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

  • @9-xyz-cba
    @9-xyz-cba11 ай бұрын

    Please Create like and comment functionality using ajax and php.

  • @rm99997
    @rm9999710 ай бұрын

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

  • @iamabhishekvyas
    @iamabhishekvyas3 ай бұрын

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

  • @m.areeshrashid705
    @m.areeshrashid705 Жыл бұрын

    Please Resume Generator HTML CSS JavaScript.

  • @richardlew3667
    @richardlew36676 ай бұрын

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

  • @dshadow5321
    @dshadow5321 Жыл бұрын

    14:30

  • @mdsiddiq1579
    @mdsiddiq1579Ай бұрын

    How to add date and hour in this

  • @imrankhan-tg1pc
    @imrankhan-tg1pcАй бұрын

    sir please add hourly weather option in this

  • @CodingNepal

    @CodingNepal

    Ай бұрын

    Sure, thanks for your suggestion.

  • @mohanasrisravya836
    @mohanasrisravya8362 ай бұрын

    Hi,I need in react js

  • @mohitparekh7878
    @mohitparekh787810 ай бұрын

    Import URL kahaselu error a raha hai

  • @jeeshmajeeshu5652
    @jeeshmajeeshu56526 ай бұрын

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

  • @henaparvin9032
    @henaparvin903211 ай бұрын

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

  • @Sahana-o6d
    @Sahana-o6d22 күн бұрын

    please can you help us for 7days forecast api key

  • @HemanthKumar-ng1dk
    @HemanthKumar-ng1dk2 ай бұрын

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

  • @CodingNepal

    @CodingNepal

    2 ай бұрын

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

  • @GameHubX263
    @GameHubX263Ай бұрын

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

  • @CodingNepal

    @CodingNepal

    Ай бұрын

    API is free. Please watch the video for it.

  • @bru3356
    @bru335622 күн бұрын

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

  • @pujatiwari2594
    @pujatiwari25942 ай бұрын

    How can we download the project code

  • @CodingNepal

    @CodingNepal

    2 ай бұрын

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

  • @uditvish726
    @uditvish72625 күн бұрын

    or shabji momoj khayenge ?

  • @ishaansharma7140
    @ishaansharma71409 ай бұрын

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

  • @seemarai8427

    @seemarai8427

    8 ай бұрын

    Hii @ishaansharma7140 did the api start working?

  • @AhmedHany-sl4io

    @AhmedHany-sl4io

    18 күн бұрын

    @@seemarai8427 did it work?

  • @seemarai8427

    @seemarai8427

    18 күн бұрын

    @@AhmedHany-sl4io it is working

  • @loppin6154
    @loppin6154 Жыл бұрын

    Hi

  • @NikhilChaudhary-fc4gr
    @NikhilChaudhary-fc4gr3 ай бұрын

    Provide me this project related ppt

  • @mahin_2_23
    @mahin_2_23 Жыл бұрын

    How to create app like tiktok

  • @dileepkr6069
    @dileepkr60695 күн бұрын

    Does it work properly or not

  • @CodingNepal

    @CodingNepal

    3 күн бұрын

    Yes, it works perfectly as of now.

  • @pleasesubscribe7265
    @pleasesubscribe72659 ай бұрын

    Hi, learn css?

  • @ColtonThomas-qv8zk
    @ColtonThomas-qv8zk2 ай бұрын

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

  • @Sahana-o6d
    @Sahana-o6d23 күн бұрын

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

  • @CodingNepal

    @CodingNepal

    23 күн бұрын

    You’re welcome 😊