briju-nit / weather-app

You can experience the "WeatherApp" through,

Weather App Description

Overview The Weather App is a simple and intuitive web application designed to provide users with current weather information for any city around the world. With a sleek and modern design, the app ensures a seamless user experience across both desktop and mobile devices.

Features Search Functionality: Users can enter the name of any city to fetch the latest weather data. A search button, accompanied by a clear icon, initiates the search.

Weather Display: Displays the current temperature in Celsius. Shows the city name to confirm the location. Provides an icon representing the current weather condition (e.g., clouds, clear, rain, drizzle, mist). Additional Details:

Humidity: Displays the current humidity level as a percentage. Wind Speed: Shows the current wind speed in kilometres per hour. Error Handling:

If an invalid city name is entered, an error message informs the user to correct their input.

Design and Responsiveness Visual Design: The app features a modern, visually appealing design with a linear gradient background on the main card. Text and icons are clear and easy to read, ensuring a pleasant user experience.

Mobile Responsiveness: The layout is fully responsive, adapting seamlessly to different screen sizes and orientations. Media queries adjust padding, margins, font, and element sizes to ensure usability on mobile devices.

Technical Details HTML: The structure includes a main card element that contains the search input, error message, and weather details. Responsive meta tags ensure proper scaling on mobile devices.

CSS: Uses a combination of flexible units and media queries to create a responsive design. Custom styles for different components such as the search bar, weather details, and icons.

JavaScript: Fetches weather data from the OpenWeatherMap API using asynchronous requests. Updates the UI dynamically based on the fetched data. Handles errors gracefully by showing or hiding elements as needed.

Usage Instructions Open the app in any web browser. Enter the name of the desired city in the search input field. Click the search button to fetch and display the weather information. The app will display the current temperature, city name, weather icon, humidity, and wind speed. If the city name is invalid, an error message will be shown.

This Weather App provides a user-friendly way to quickly check the weather conditions for any city, making it a handy tool for everyday use.