Advanced Weather App with Javascript and Weather API | Complete Weather Application
66.5 هزار بار بازدید -
3 سال پیش
-
How to create a full
How to create a full weather web application using HTML, CSS, Javascript and weather API.
What you will learn:
How to-
- Use Fetch to get data from an API
- Use an API on your application
- Display data from an API into your app
- Create a search bar, and search through
the weather API for a specific city
- Create a beautiful glassmorphism app design with HTML & CSS
- Responsive Design with CSS
- Reformatting API data to something more suitable for the UI
- Working and manipulating strings in JS
- Using template literals in Javascript
- Conditionally changing the background image
of the app based on current weather
- Catching errors when fetching from an API
- Basic CSS animations
Free Weather API:
www.weatherapi.com/
Weather Icons:
www.weatherapi.com/docs/#weather-icons
Google Font Used:
fonts.google.com/specimen/Rubik?query=rubik
Images Used:
Day:
unsplash.com/photos/h-rP5KSC2W0
unsplash.com/photos/eXHeq48Z-Q4
unsplash.com/photos/bWtd1ZyEy6w
unsplash.com/photos/duo-xV0TU7s
Night:
unsplash.com/photos/PzhmEp_aDU4
unsplash.com/photos/QjR_snVQn4c
unsplash.com/photos/rk2s0sm8xF4
unsplash.com/photos/uj-w-v7OFT4
Original Design:
dribbble.com/shots/7118235-Weather-DailyUI-037
Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)
Get The Source Code From All Of My Videos:
www.buymeacoffee.com/webcode/posts
Follow me on Instagram:
www.instagram.com/quickcodingtuts/
My Products:
www.buymeacoffee.com/webcode/extras
Support Me To Keep Creating And Improving My Content:
paypal.me/quickcodingtuts?locale.x=en_US
Tags:
#api
#javascript
#weather
3 سال پیش
در تاریخ 1400/07/18 منتشر شده
است.
66,577
بـار بازدید شده