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

Поделиться
HTML-код
  • Опубликовано: 20 июн 2023
  • 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 ...

Комментарии • 62

  • @CodingNepal
    @CodingNepal  11 месяцев назад +28

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

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

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

      @@seemarai8427whar happened

  • @wilsonmuita6835
    @wilsonmuita6835 9 месяцев назад +1

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

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

    Great job! Thank you!

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

    Good job! Thank you very much)

  • @FunFactsFactory91
    @FunFactsFactory91 11 месяцев назад +6

    Now you know where lives the best RUclipsr ever 😂

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

    Which openweathermap subscription did you use?

  • @godugukishorechandra
    @godugukishorechandra Месяц назад +1

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

  • @lukas.webdev
    @lukas.webdev 11 месяцев назад +2

    Awesome video! Keep it up 😉💪

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

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

  • @user-ws5px3dn2k
    @user-ws5px3dn2k 8 месяцев назад

    please tell how to insert real feel and pressure option

  • @azuboof
    @azuboof 4 месяца назад

    Youre amazing

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

    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.

  • @surriiisama8528
    @surriiisama8528 2 месяца назад

    ⁠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
    @richardlew3667 4 месяца назад

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

  • @ObamaEditz
    @ObamaEditz 11 месяцев назад +2

    First Comment ! BTW where from did you learn this?

  • @SanjayNG125
    @SanjayNG125 10 месяцев назад +1

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

      Okay, noted!

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

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

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

    can you mention about the backend technology

  • @praveen.m1056
    @praveen.m1056 10 месяцев назад

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

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

    Import URL kahaselu error a raha hai

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

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

  • @Growtion
    @Growtion 10 месяцев назад +2

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

  • @slowhilanything2576
    @slowhilanything2576 4 месяца назад +1

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

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

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

  • @91221HelloWorld
    @91221HelloWorld 8 месяцев назад

    Please Create like and comment functionality using ajax and php.

  • @infobusiness2246
    @infobusiness2246 4 месяца назад

    good job, I want you make a trading website too

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

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

  • @BOMBES-X4
    @BOMBES-X4 10 месяцев назад

    how create referral website ?

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

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

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

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

  • @iamabhishekvyas
    @iamabhishekvyas 26 дней назад

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

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

    14:30

  • @surriiisama8528
    @surriiisama8528 2 месяца назад

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

  • @awantikaawasthi165
    @awantikaawasthi165 10 месяцев назад +1

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

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

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

  • @pihubp6782
    @pihubp6782 2 месяца назад

    Sir error is showing in geocoding api url while consoling

  • @user-ek5sb4wz2x
    @user-ek5sb4wz2x 11 месяцев назад +4

    React? Any small projects too.

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

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

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

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

  • @jeeshmajeeshu5652
    @jeeshmajeeshu5652 4 месяца назад

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

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

    We need backend also sir

  • @richardlew3667
    @richardlew3667 4 месяца назад

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

  • @m.areeshrashid705
    @m.areeshrashid705 11 месяцев назад

    Please Resume Generator HTML CSS JavaScript.

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

    Is it responsive

  • @HemanthKumar-ng1dk
    @HemanthKumar-ng1dk 9 часов назад

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

    • @CodingNepal
      @CodingNepal  8 часов назад

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

  • @pujatiwari2594
    @pujatiwari2594 14 дней назад

    How can we download the project code

    • @CodingNepal
      @CodingNepal  14 дней назад

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

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

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

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

      Hii @ishaansharma7140 did the api start working?

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

    Hi

  • @NikhilChaudhary-fc4gr
    @NikhilChaudhary-fc4gr Месяц назад

    Provide me this project related ppt

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

    How to create app like tiktok

  • @pleasesubscribe7265
    @pleasesubscribe7265 7 месяцев назад +1

    Hi, learn css?