View Live

It is a web application built with VueJS framework. Here I used openweathermap API for collect realtime weather data of any city in the world. Here is a search box to search weather report of any city. Here Also I used conditional background to make the application attractive. For example if the weather is rainy then the background will show a rainy animation. Similarly sunny, cloudy, and snowy animated background changes depend on the weather. For the first time when the app will be load, there you can see two default location's weather "Dhaka" and "Tokyo", you can search for any city by typing the city name in search box.

• Create Api Key from OpenWeatherMap.

npm install

npm run serve

npm run build

npm run lint

See Configuration Reference.

Navigate to gitignore file and remove dist folder from the list:

Create vue.config.js file in the root level of project and paste following code:

module.exports = {
  publicPath: '/Weathear-Report/'
}

Create path: /src/router/index.js/ and pase this code:

import { createWebHistory, createRouter } from 'vue-router'
import BillPage from '@/views/BillPage.vue'
import Products from '@/views/Products.vue'

const routes = [
	{
		path: '/',
		name: 'products',
		component: Products
	},
    {
        path: '/billPage',
        name: 'BillPage',
        component: BillPage
    }
];

const router = createRouter({
	history: createWebHistory('/Weathear-Report/'),
	routes,
});

export default router;

Build production version of the project:

npm run build

Stage all changes.

Commit all changes

Push dist folder to the gh-pages remote branch on GitHub:

git subtree push --prefix dist origin gh-pages

Done!