This app allows users to quickly and easily check the current weather conditions for their location, as well as see a forecast for the next few days. The app is built using the latest technologies, including HTML, CSS, and JavaScript, and makes use of a reliable third-party weather API to retrieve accurate and up-to-date weather data.
The user simply have to enter the location whose weather details the user want to find the textbox. While searching the textbox will be populated with the city of that the user want to find. Then the system will show us the status by changing the icon and displaying the values for Wind, Temperature and Precipitation/Humidity. Based on the location, the unit of measurement will change depending on the state or city of the country. The app has also been made functional to search for the city on the Enter Key press.
In the starting, the app is defined to bring the details of Islamabad. While the fetch request is proceeding, the content will display a loading... content to show the user that the request generated in in process. After searching the background image will change corresponding to the searched city.
Following are some of the new features and learning encountered while creating this amazing project:
- The background image is chosen randomly using unsplash feature by importing the following code in css file:
body{
background-image: url('https://source.unsplash.com/1600x900/?landscape');
}
- The API calling sequence statement was
https://api.openweathermap.org/data/2.5/weather?q={city-name}&appid={api-key}&units=metric
- Provided completed support to all the cities of all the countries.
- Search is implemented on Enter key press.
Follwing resources have been used in maintaining this project:
- OpenWeatherMap API to get the weather details using requests to the server and getting responses as details of the weather.
- BoxIcons to import the icons inside the project.
- Google Fonts to import the Open Sans Font into the CSS file
- Unsplash to randomly pick the background image using their API
The Demo of this working portfolio can be found on
https://rebrand.ly/WeatherApp_MABCORP
You can exclusively watch the video on this project from the making to deploying on my channel with the link given below
If you like my video then do Like the Video and share it with others.
Follwing technologies have been used at the core of this application to make it stand in the market place:
- HTML
- CSS
- JavaScript
- Open Weather Map API
If no response is got, then the error message should be displayed.
The website is deployed using the free hosting provided by Vercel
Later on the link was customized using the well-known URL shortener and customizer **Rebrandly**:
Muhammad Abdullah Butt
abdullahbutt12292210@gmail.com