React Weather App

├── .env ├── .github └── FUNDING.yml ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── preview.png ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── Weather.js └── index.js /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: ['https://www.buymeacoffee.com/PJijin'] 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## React Weather App ⛅ 2 | 3 | Simple react weather application. 4 | 5 | 6 | [![React Weather Application](https://github.com/PJijin/react-weather/blob/master/preview.png?raw=true "React Weather Application")]() 7 | 8 | 9 | ## Stack 10 | 11 | Twitter Bootstrap 4.2 (https://getbootstrap.com) 12 | 13 | Tailwind Css 0.7.4 (https://tailwindcss.com/) 14 | 15 | 16 | ## Dependencies 17 | 18 | Axios 19 | 20 | API Used: https://www.metaweather.com/api/ 21 | 22 | 23 | ## Bugs, Update, License 24 | 25 | - Feel free to report bugs to jijin@devzstudio.com 🐞 26 | 27 | - Feel free to customize ✒️ 28 | 29 | - Open source 🎉 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-weather", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "react": "^16.8.2", 8 | "react-dom": "^16.8.2", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PJijin/React-Weather/c474408b71dd5eca52483aef9afdaf1a1049d958/preview.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PJijin/React-Weather/c474408b71dd5eca52483aef9afdaf1a1049d958/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 16 | 17 | 23 | 27 | React Weather App 28 | 29 | 30 | 31 |

32 | 33 | 34 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Varela Round; 3 | } 4 | .details { 5 | font-size: 13px; 6 | animation: 1s ease-out 0s 1 slideInFromLeft; 7 | } 8 | .details p { 9 | line-height: 1.4rem; 10 | animation: 1s ease-out 0s 1 slideInFromLeft; 11 | } 12 | input { 13 | background: rgba(0, 0, 0, 0.1); 14 | border: 0.5px solid #525050; 15 | border-radius: 250px; 16 | display: block; 17 | width: 100%; 18 | height: calc(1.5em + 0.75rem + 2px); 19 | padding: 0.575rem 0.95rem; 20 | font-size: 1rem; 21 | font-weight: 400; 22 | line-height: 1.5; 23 | margin-top: 25px; 24 | margin-bottom: 25px; 25 | color: #fff; 26 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 27 | } 28 | .center { 29 | justify-content: center; 30 | animation: 1s ease-out 0s 1 slideInFromRight; 31 | } 32 | .weather-name { 33 | font-size: 14px; 34 | font-weight: 600; 35 | } 36 | .temp { 37 | font-size: 12px; 38 | } 39 | .cityText { 40 | font-size: 210%; 41 | animation: 1s ease-out 0s 1 slideInFromLeft; 42 | } 43 | 44 | .App { 45 | text-align: center; 46 | } 47 | 48 | .App-logo { 49 | animation: App-logo-spin infinite 20s linear; 50 | height: 40vmin; 51 | pointer-events: none; 52 | } 53 | 54 | .App-header { 55 | background-color: #282c34; 56 | background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), 57 | url(https://images.pexels.com/photos/1118873/pexels-photo-1118873.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); 58 | background-size: cover; 59 | min-height: 100vh; 60 | display: flex; 61 | flex-direction: column; 62 | align-items: center; 63 | justify-content: center; 64 | font-size: calc(10px + 2vmin); 65 | color: white; 66 | } 67 | 68 | .App-link { 69 | color: #61dafb; 70 | } 71 | 72 | .w-250 { 73 | width: 150px; 74 | padding: 5px; 75 | } 76 | 77 | .w-250:hover { 78 | background: #33333329; 79 | border-radius: 8px; 80 | } 81 | 82 | @keyframes slideInFromLeft { 83 | 0% { 84 | transform: translateX(-100%); 85 | } 86 | 100% { 87 | transform: translateX(0); 88 | } 89 | } 90 | 91 | @keyframes slideInFromRight { 92 | 0% { 93 | transform: translateX(+100%); 94 | } 95 | 100% { 96 | transform: translateX(0); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import './App.css'; 4 | import Weather from './Weather'; 5 | class App extends Component { 6 | state={ 7 | weather: {}, 8 | parent: {}, 9 | details: {title:null}, 10 | }; 11 | 12 | componentDidMount(){ 13 | // Fetch data from JSON Api 🔥 14 | axios.get('https://api.myjson.com/bins/x3iey') 15 | .then(res => { 16 | const {consolidated_weather:weather,parent} = res.data; 17 | const details = { 18 | title: res.data.title, 19 | latt_long: res.data.latt_long, 20 | type: res.data.location_type, 21 | tzone: res.data.timezone 22 | }; 23 | this.setState({ weather , parent, details}); 24 | }) 25 | 26 | } 27 | 28 | render() { 29 | const {details} = this.state; 30 | return ( 31 |

32 |

33 |

{details.title}

34 |

35 |

{details.type}

36 |

Timezone: {details.tzone}

37 |

38 |

{Object.keys(this.state.weather).map(key => )}

39 |

40 |

41 | ); 42 | } 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /src/Weather.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | const Weather = (props) => { 4 | return ( 5 |

6 |

{props.details.weather_state_name}

7 |

${props.details.weather_state_name}$

8 |

{props.details.the_temp}^o

9 |

{props.details.applicable_date}

10 |

11 | ); 12 | } 13 | 14 | export default Weather; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | 7 | --------------------------------------------------------------------------------