├── src ├── assets │ ├── bg-img.jpg │ ├── bg-img1.jpg │ ├── bg-img2.jpg │ └── weather.png ├── index.js ├── App.js └── index.css ├── .gitignore ├── public └── index.html ├── README.md ├── package.json └── LICENSE /src/assets/bg-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arjuncvinod/Weather-App/HEAD/src/assets/bg-img.jpg -------------------------------------------------------------------------------- /src/assets/bg-img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arjuncvinod/Weather-App/HEAD/src/assets/bg-img1.jpg -------------------------------------------------------------------------------- /src/assets/bg-img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arjuncvinod/Weather-App/HEAD/src/assets/bg-img2.jpg -------------------------------------------------------------------------------- /src/assets/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arjuncvinod/Weather-App/HEAD/src/assets/weather.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import "./index.css"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | weather App 9 | 10 | 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Weather App 2 | ### Built using React.js and openweathermap API 3 | ### live demo : [www.liveweather.com](https://liveweatherupdates.netlify.app/) 4 | ### screenshots: 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Mobile view

Desktop View

13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.4.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Arjun C Vinod 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React , {useState} from "react"; 2 | import axios from "axios"; 3 | 4 | function App() { 5 | const[data,setData]=useState({}); 6 | const [location,setLocation]=useState('') 7 | 8 | const url =`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=bdc1146c700b7ab3cbbd22c72a75063f`; 9 | 10 | const searchLocation = (event)=>{ 11 | if(event.key==="Enter"){ 12 | axios.get(url).then((response)=>{ 13 | setData(response.data) 14 | console.log(response.data); 15 | }) 16 | setLocation('') 17 | } 18 | 19 | } 20 | 21 | return ( 22 |

23 |

24 | setLocation(event.target.value)} 27 | onKeyPress={searchLocation} 28 | placeholder="Enter Location" 29 | /> 30 |

31 |

32 |

33 |

34 |

{data.name}

35 |

36 |

37 | {data.main &&

{data.main.temp.toFixed()}°C

} 38 |

39 |

40 | {data.weather &&

{data.weather[0].main}°F

} 41 |

42 |

43 | {data.name !== undefined && ( 44 |

45 |

46 | {data.main && ( 47 |

{data.main.feels_like.toFixed()}°C

48 | )} 49 |

Feels Like

50 |

51 |

52 | {data.main &&

{data.main.humidity} %

} 53 |

Humidity

54 |

55 |

56 | {data.wind && ( 57 |

{data.wind.speed.toFixed()} MPH

58 | )} 59 |

Wind speed

60 |

61 |

62 | )} 63 |

64 |

65 |

Made with 🤍 by Arjun

66 |

69 |

70 |

71 | ); 72 | } 73 | 74 | export default App; 75 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: 'Outfit', 'Segoe UI', 'Roboto', 'Oxygen', 11 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 12 | sans-serif; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | overflow: hidden; 16 | } 17 | 18 | p { 19 | font-size: 1.6rem; 20 | } 21 | 22 | h1 { 23 | font-size: 6rem; 24 | } 25 | 26 | .app { 27 | width: 100%; 28 | height: 100vh; 29 | position: relative; 30 | background-color: rgba(0,0,0,0.4); 31 | color: #fff; 32 | } 33 | 34 | .app:before { 35 | content: ''; 36 | background: url('./assets/bg-img.jpg') no-repeat center center/cover; 37 | position: absolute; 38 | width: 100%; 39 | height: 110%; 40 | top: 0; 41 | left: 0; 42 | z-index: -1; 43 | } 44 | 45 | .app .search { 46 | text-align: center; 47 | padding: 1rem; 48 | } 49 | 50 | .app input { 51 | padding: .7rem 1.5rem; 52 | font-size: 1.2rem; 53 | border-radius: 25px; 54 | border: 1px solid gray; 55 | background: rgba(255,255,255, 0.1); 56 | color: #f8f8f8; 57 | outline: none; 58 | } 59 | .app input:focus{ 60 | border-color: white; 61 | } 62 | 63 | ::placeholder { 64 | color: #f8f8f8; 65 | } 66 | 67 | .container { 68 | max-width: 700px; 69 | height: 620px; 70 | margin: auto; 71 | padding: 0 1rem; 72 | position: relative; 73 | top: 10%; 74 | display: flex; 75 | flex-direction: column; 76 | justify-content: space-between; 77 | } 78 | 79 | .app .top { 80 | width: 100%; 81 | margin: 1rem auto; 82 | } 83 | .app .description { 84 | position: relative; 85 | right: -90%; 86 | transform-origin: 0 0; 87 | transform: rotate(269deg); 88 | } 89 | .app .bottom { 90 | display: flex; 91 | justify-content: space-evenly; 92 | text-align: center; 93 | width: 100%; 94 | margin: 8rem auto; 95 | padding: 1rem; 96 | border-radius: 12px; 97 | background-color: rgba(255,255,255, 0.2); 98 | } 99 | .bold { 100 | font-weight: 700; 101 | } 102 | 103 | .copyright{ 104 | display: flex; 105 | flex-direction: column; 106 | align-items: center; 107 | } 108 | .copyright p{ 109 | color: gray; 110 | font-size: small; 111 | } 112 | .made a{ 113 | color: white; 114 | text-decoration: none; 115 | z-index: 1000; 116 | } 117 | .made a:hover{ 118 | color: red; 119 | } 120 | .copyright .made{ 121 | position: relative; 122 | width: 100%; 123 | text-align: center; 124 | letter-spacing: 2px; 125 | background-color: transparent; 126 | color: white; 127 | font-weight: bold; 128 | } --------------------------------------------------------------------------------