├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── components
    │   ├── img
    │   │   └── searchicon.jpg
    │   └── Weather.jsx
    ├── index.js
    ├── App.js
    └── App.css
├── .gitignore
├── README.md
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sakilk130/react-weather-app/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sakilk130/react-weather-app/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sakilk130/react-weather-app/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/components/img/searchicon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sakilk130/react-weather-app/HEAD/src/components/img/searchicon.jpg


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './App.css';
 3 | import Weather from './components/Weather';
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="App">
 8 |       <Weather />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/.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/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 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Weather App🌤🌤
 2 | 
 3 | This is a sample react weather app.
 4 | 
 5 | Live Demo [here](https://react-weather-app-v1.netlify.app/).
 6 | 
 7 | ## Instructions
 8 | 
 9 | First clone this repository.
10 | 
11 | ```bash
12 | $ git clone https://github.com/sakilk130/react-weather-app.git
13 | ```
14 | 
15 | Install dependencies. Make sure you already have [`nodejs`](https://nodejs.org/en/) & [`npm`](https://www.npmjs.com/) installed in your system.
16 | 
17 | ```bash
18 | $ npm install # or yarn
19 | ```
20 | 
21 | Run it
22 | 
23 | ```bash
24 | $ npm start # or yarn start
25 | ```
26 | 
27 | ## Built with
28 | 
29 | - Reactjs
30 | - React Hooks
31 | - Display API Data Using Axios with React
32 | - [API](https://openweathermap.org/api)
33 | - React | [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/react)
34 | - React loader [spinner](https://www.npmjs.com/package/react-loader-spinner)
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-weather-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^1.2.32",
 7 |     "@fortawesome/free-solid-svg-icons": "^5.15.1",
 8 |     "@fortawesome/react-fontawesome": "^0.1.11",
 9 |     "@material-ui/core": "^4.11.0",
10 |     "@material-ui/icons": "^4.9.1",
11 |     "@testing-library/jest-dom": "^4.2.4",
12 |     "@testing-library/react": "^9.5.0",
13 |     "@testing-library/user-event": "^7.2.1",
14 |     "axios": "^0.20.0",
15 |     "react": "^16.13.1",
16 |     "react-dom": "^16.13.1",
17 |     "react-loader-spinner": "^3.1.14",
18 |     "react-scripts": "3.4.3"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": "react-app"
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Weather App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 3 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 4 | }
 5 | html {
 6 |   background-color: darkseagreen;
 7 | }
 8 | .app-name {
 9 |   font-size: 2.3rem;
10 | }
11 | 
12 | /* app box */
13 | .App {
14 |   display: flex;
15 |   flex-direction: column;
16 |   justify-content: start;
17 |   width: 500px;
18 |   min-height: 440px;
19 |   /* background-color: #ffffff; */
20 |   background-color: rgba(226, 226, 226, 0.2);
21 |   text-align: center;
22 |   margin: 128px auto;
23 |   border-radius: 10px;
24 |   padding-bottom: 32px;
25 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
26 | }
27 | 
28 | /* City Search  */
29 | .city-search {
30 |   width: 200px;
31 |   box-sizing: border-box;
32 |   border: 2px solid #ccc;
33 |   outline: none;
34 |   border-radius: 20px;
35 |   font-size: 16px;
36 |   background-color: white;
37 |   /* background-color: rgba(226, 226, 226, 0.6); */
38 |   background-image: url(./components/img/searchicon.jpg);
39 |   background-position: 10px 10px;
40 |   background-repeat: no-repeat;
41 |   padding: 12px 20px 12px 40px;
42 |   -webkit-transition: width 0.4s ease-in-out;
43 |   transition: width 0.4s ease-in-out;
44 | }
45 | .city-search:focus {
46 |   width: 60%;
47 |   /* background-color: white; */
48 | }
49 | 
50 | /* city name */
51 | .city-name {
52 |   font-size: 1.25em;
53 | }
54 | h2 {
55 |   margin-bottom: 10px;
56 | }
57 | 
58 | /* current date */
59 | .date {
60 |   font-size: 1.25em;
61 |   font-weight: 500;
62 | }
63 | 
64 | /* weather icon and temp */
65 | .icon-temp {
66 |   font-size: 4rem;
67 |   font-weight: 700;
68 |   color: #1e2432;
69 |   text-align: center;
70 | }
71 | .deg {
72 |   font-size: 2rem;
73 | }
74 | 
75 | /* weather description and wind speed */
76 | .des-wind {
77 |   font-weight: 500;
78 | }
79 | 
80 | /* Error message */
81 | .error-message {
82 |   display: block;
83 |   text-align: center;
84 |   color: rgb(20, 2, 2);
85 |   font-size: 30px;
86 |   margin-top: auto;
87 | }
88 | 


--------------------------------------------------------------------------------
/src/components/Weather.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from 'react';
  2 | import { useState } from 'react';
  3 | import axios from 'axios';
  4 | import Loader from 'react-loader-spinner';
  5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  6 | import { faFrown } from '@fortawesome/free-solid-svg-icons';
  7 | 
  8 | function Weather() {
  9 |   const [query, setQuery] = useState();
 10 |   const [weather, setWeather] = useState({
 11 |     loading: false,
 12 |     data: {},
 13 |     error: false,
 14 |   });
 15 | 
 16 |   const toDate = () => {
 17 |     // let date = new Date();
 18 |     // const today = date.toDateString();
 19 |     // return today;
 20 |     const months = [
 21 |       'January',
 22 |       'February',
 23 |       'March',
 24 |       'April',
 25 |       'May',
 26 |       'June',
 27 |       'July',
 28 |       'August',
 29 |       'September',
 30 |       'October',
 31 |       'Nocvember',
 32 |       'December',
 33 |     ];
 34 |     const days = [
 35 |       'Sunday',
 36 |       'Monday',
 37 |       'Tuesday',
 38 |       'Wednesday',
 39 |       'Thursday',
 40 |       'Friday',
 41 |       'Saturday',
 42 |     ];
 43 |     const currentDate = new Date();
 44 |     const date = `${days[currentDate.getDay()]} ${currentDate.getDate()} ${
 45 |       months[currentDate.getMonth()]
 46 |     }`;
 47 |     return date;
 48 |   };
 49 | 
 50 |   const search = async (event) => {
 51 |     if (event.key === 'Enter') {
 52 |       event.preventDefault();
 53 |       setQuery('');
 54 |       setWeather({ ...weather, loading: true });
 55 |       const url = 'https://api.openweathermap.org/data/2.5/weather';
 56 |       const appid = 'f00c38e0279b7bc85480c3fe775d518c';
 57 |       //console.log('Enter');
 58 | 
 59 |       await axios
 60 |         .get(url, {
 61 |           params: {
 62 |             q: query,
 63 |             units: 'metric',
 64 |             appid: appid,
 65 |           },
 66 |         })
 67 |         .then((res) => {
 68 |           console.log('res', res);
 69 |           setWeather({ data: res.data, loading: false, error: false });
 70 |         })
 71 |         .catch((error) => {
 72 |           setWeather({ ...weather, data: {}, error: true });
 73 |           setQuery('');
 74 |           console.log('error', error);
 75 |         });
 76 |     }
 77 |   };
 78 | 
 79 |   return (
 80 |     <div>
 81 |       <h1 className="app-name">
 82 |         Weather App<span>🌤</span>
 83 |       </h1>
 84 |       <div className="search-bar">
 85 |         <input
 86 |           type="text"
 87 |           className="city-search"
 88 |           placeholder="Search City.."
 89 |           name="query"
 90 |           value={query}
 91 |           onChange={(event) => setQuery(event.target.value)}
 92 |           onKeyPress={search}
 93 |         />
 94 |       </div>
 95 | 
 96 |       {weather.loading && (
 97 |         <>
 98 |           <br />
 99 |           <br />
100 |           <Loader type="Oval" color="black" height={100} width={100} />
101 |         </>
102 |       )}
103 |       {weather.error && (
104 |         <>
105 |           <br />
106 |           <br />
107 |           <span className="error-message">
108 |             <FontAwesomeIcon icon={faFrown} />
109 |             <span style={{ 'font-size': '20px' }}> Sorry, City not found</span>
110 |           </span>
111 |         </>
112 |       )}
113 | 
114 |       {weather && weather.data && weather.data.main && (
115 |         <div>
116 |           <div className="city-name">
117 |             <h2>
118 |               {weather.data.name}, <span>{weather.data.sys.country}</span>
119 |             </h2>
120 |           </div>
121 |           <div className="date">
122 |             <span>{toDate()}</span>
123 |           </div>
124 |           <div className="icon-temp">
125 |             <img
126 |               className=""
127 |               src={`https://openweathermap.org/img/wn/${weather.data.weather[0].icon}@2x.png`}
128 |               alt={weather.data.weather[0].description}
129 |             />
130 |             {Math.round(weather.data.main.temp)}
131 |             <sup className="deg">&deg;C</sup>
132 |           </div>
133 |           <div className="des-wind">
134 |             <p>{weather.data.weather[0].description.toUpperCase()}</p>
135 |             <p>Wind Speed: {weather.data.wind.speed}m/s</p>
136 |           </div>
137 |         </div>
138 |       )}
139 |     </div>
140 |   );
141 | }
142 | 
143 | export default Weather;
144 | 


--------------------------------------------------------------------------------