Weather App

Weather application made with JavaScript and webpack. Uses HTTP requests to return info from a weather API, and is deployed on GitHub Pages

Desktop view

Mobile view

Javascript with Webpack project from The Odin Project curriculum

Built With:

• HTML,CSS,Javascript
• Webpack
• npm manager
• HTTP Request

Live Demo

Live Demo Link

Future Features:

• Auto-populate your current location
• Change background according to the current weather

Getting Started

Prerequisites

-Before running this project you will need to install webpack and configure the live server on your webpack.config file. You can learn more about it on this page.

npm install and config:

Setup

To use this project you will need to download this repository onto your computer. Afterwards, you will need to install webpack and npm to correctly run this project. In the package.json file, input this:

 "scripts": {
 "test": "echo \"Error: no test specified\" && exit >1",
 "build": "webpack --mode production",
 "builddev": "webpack --mode development",
 "start": "webpack-dev-server --mode development >--open"
 }

In the webpack.config.js file we are going to input this config in order to use live-sync browser reloaded automatically using npm run start

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(\_\_dirname, 'dist'),
},
watch: true,
module: {
rules: [
{
test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
};

module.exports = {
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3001,
files: [
'./dist/*.html',
'./dist/*.js',
'./dist/*.css',
'./src/*.js',
'./src/img/*.jpg',
],
server: { baseDir: ['dist'] },
}),
],
};

Deployment

To deploy the application and view it on your browser, open your project folder terminal and run these commands:

`npm install`
`npm run build`
`npm i -D webpack-dev-server`
`npm i browser-sync --save`

To run the linter files you will need to run these command on the terminal

`npm install eslint eslint-config-airbnb --save-dev`
`npx eslint --init`
`npx client`

Afterwards, open the Stickler Page and activate your repository. and activate your repository

Author

👤 Cristian Ines Hernandez A. - MephistoDevelop

• Github: @MephistoDevelop
• Twitter: @MephistoDevelop
• Linkedin: Cristian Hernandez

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give an ⭐️ if you like this project!

📝 License

This project is MIT licensed.