Deployed app

Welcome to the Vue Weather App! This project is a simple and intuitive weather application built using Vue.js, designed to provide real-time weather information for any location around the world.

• Vue.js
• JavaScript
• Yarn
• Open Weather Map API

npm -g i @vue/cli or yarn global add @vue/cli
Choose default (babel, eslint)

vue create vue-weather. vue-weather is name of folder, so you can change the name of folder

Open this link and create your own API KEY. Then copy your key.
App.vue -> line 34 -> you can paste your own key that you got before.

yarn serve

The Vue Weather App follows a component-based architecture, a core principle of Vue.js development. It's organized into multiple Vue components that each have a specific responsibility, enhancing code readability, maintainability, and reusability.

Key Components:

• App.vue: The main application component that serves as the entry point for the app. It manages the main layout, user input, and data display.
• SearchBox.vue: Handles user input and triggers weather data fetching upon pressing the Enter key.
• WeatherDisplay.vue: Displays the fetched weather data, including location, date, temperature, and weather condition.

The project adheres to best practices and coding standards to ensure clean and maintainable code.

Key Code Styles:

• Component Structure: Each Vue component is organized into sections, including template, script, and style, ensuring a clear separation of concerns.
• CSS Styling: Styles are scoped to the respective components using CSS modules, preventing global style conflicts.
• Data Management: The app effectively uses Vue's reactivity system to update the UI based on data changes.
• API Interaction: The OpenWeatherMap API is integrated to fetch weather data based on user input.
• Error Handling: Proper error handling is implemented, such as displaying a help message when no weather data is available.

The Vue Weather App offers the following features:

• Weather Data: Fetches and displays real-time weather information, including temperature and weather conditions.
• Search Functionality: Enables users to search for weather data by entering the name of a city.
• Responsive Design: The app is designed to be responsive, adapting to various screen sizes and devices.
• User-Friendly UI: Clear and intuitive user interface with helpful messages for better user experience.