Build A Weather App With React JS | Hourly And Daily Forecast | 2024

Поделиться
HTML-код
  • Опубликовано: 14 май 2024
  • 🚀 React 18 + TypeScript Course - 50% Discount
    codewithyash.com/
    ✅ Source Code & Assets
    buy.stripe.com/4gw6p0d9CeC28D...
    🌎 Connect:
    Instagram: bit.ly/3rtx0aw
    Twitter: bit.ly/3rl0NC1
    Email: yashpatel26@gmail.com
    I will show you how to build a weather app with React JS and Tailwind CSS using OpenWeatherMap API. API is completely free to use. The build will also include hourly and daily forecasts.
    Technologies that we will use for this project are JavaScript, React, Tailwind CSS, luxon, react icons, and react-toastify. It is going to be amazing to work on this build. We will fetch data from OpenWeather endpoints. We will be getting temperature, max, min, humidity, real feel, sunrise, sunset, hourly, and daily forecast. We will also display the local time at the selected location. For input, there are some quick links on top along with a text box for searching a city and also a current location-based search.
    📚 Material:
    Openweather API: openweathermap.org/
    Tailwind CSS: tailwindcss.com/docs/guides/c...
    IconScout: iconscout.com/unicons
    luxon: www.npmjs.com/package/luxon
    react-toastify: www.npmjs.com/package/react-t...
    #react #weatherapp

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

  • @Mohitsahachowdhury
    @Mohitsahachowdhury 8 дней назад

    Just a quick note about wind speed in OpenWeather: for the metric system, it is shown in meters per second (m/s), and for the imperial system, it is shown in miles per hour (mph). Thank you so much for the updated video; it has been very helpful for my learning journey.

  • @viniciusm.m.7822
    @viniciusm.m.7822 Месяц назад

    Thanks, Yash!
    Best regards from Brazil.
    God bless u!

  • @emmanuelchukwuma9589
    @emmanuelchukwuma9589 7 дней назад

    can not see the video on the typescripts and react course i love your weather app

  • @bestvideos103
    @bestvideos103 Месяц назад

    thank you so much for this amazing video

  • @mishalqamar7302
    @mishalqamar7302 17 дней назад

    How did you get the 5 day forecast from the 3 hourly forecast not clear ? You took average?

  • @utkarshshahare699
    @utkarshshahare699 Месяц назад +2

    Thanks❤ bro watched your (building portfolio website) video and It helped me a lot .This project will also help me to add in my portfolio. I want to talk to you where we can talk?

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

      Thank you for watching my videos. I am sure they will help you level up your skills. Feels free to message me on twitter or email me(email in description).

  • @lavkeshprasad7040
    @lavkeshprasad7040 Месяц назад

    thank you bro , you are the best

    • @yashpatel1O1
      @yashpatel1O1  Месяц назад

      I am glad that you watched. Thank you :)

    • @lavkeshprasad7040
      @lavkeshprasad7040 Месяц назад

      @@yashpatel1O1 i have also made the previous weather application same as this, with react

    • @yashpatel1O1
      @yashpatel1O1  Месяц назад

      amazing. previous is not working anymore because of API changes.

    • @guggliamsaiprabhat8513
      @guggliamsaiprabhat8513 11 дней назад

      you got the same dimension how he got or any change

  • @user-ot4ek1pj5u
    @user-ot4ek1pj5u 22 дня назад +1

    Why horizontalDetails it not definite

  • @RaviRaJ-mz1cf
    @RaviRaJ-mz1cf Месяц назад

    Hello, Yash!
    I was following your previous video on Weather App but I got error there .
    Now I followed this video and completed the project and every thing looks fine.
    thank you🤗

    • @yashpatel1O1
      @yashpatel1O1  Месяц назад

      you missed something during the video. Just follow it again, I am sure you will be able to fix it.

    • @RaviRaJ-mz1cf
      @RaviRaJ-mz1cf 29 дней назад

      @@yashpatel1O1 thank you so much

  • @martinyates353
    @martinyates353 11 дней назад

    Hi, very good tutorial, I just have 1 issue the 3 hour step forecast repeats across the screen? the daily is fine, I just can't track the error??

    • @martinyates353
      @martinyates353 10 дней назад

      I found it! was the slice I'd entered (0.5) instead of (0, 5) 😁

  • @DalazG
    @DalazG 27 дней назад

    Thanks for the tutorial! i have been trying to follow along. up to 25 minutes but one problem
    For some reason, the blue background is not loading. Any idea? would love to see the github for this

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

      Thank you for watching. You may have made spelling mistake somewhere in tailwind classes. Double check it.

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

      @@yashpatel1O1 i think i triple checked it, maybe some mess up with installing the react library but not sure

  • @shubham-ri4re
    @shubham-ri4re 28 дней назад

    at 1:33:19 instead of ahmedabad i am getting undefined