weatherApp v 1.1

.eslintcache

@@ -0,0 +1 @@
+[{"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\index.js":"1","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\App.js":"2","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\reportWebVitals.js":"3","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\container\\WeatherApp.jsx":"4","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\Header\\Header.jsx":"5","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\chart\\Chart.jsx":"6","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\citytemp\\CityTemp.jsx":"7","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\Search\\Search.jsx":"8","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\helpers.js":"9","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\loading\\Loading.jsx":"10","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\imgs\\imgs.js":"11","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\weektemp\\WeekTemp.jsx":"12","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\TableHelper.jsx":"13","C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\oneWeekTemp.js":"14"},{"size":500,"mtime":1612039871283,"results":"15","hashOfConfig":"16"},{"size":200,"mtime":1613130001814,"results":"17","hashOfConfig":"16"},{"size":362,"mtime":1612039871283,"results":"18","hashOfConfig":"16"},{"size":4328,"mtime":1613214687083,"results":"19","hashOfConfig":"16"},{"size":1168,"mtime":1613158676099,"results":"20","hashOfConfig":"16"},{"size":1298,"mtime":1613159581304,"results":"21","hashOfConfig":"16"},{"size":1776,"mtime":1613158290957,"results":"22","hashOfConfig":"16"},{"size":894,"mtime":1613150596619,"results":"23","hashOfConfig":"16"},{"size":129,"mtime":1613079795020,"results":"24","hashOfConfig":"16"},{"size":574,"mtime":1613077278255,"results":"25","hashOfConfig":"16"},{"size":457,"mtime":1613079243443,"results":"26","hashOfConfig":"16"},{"size":1027,"mtime":1613134104258,"results":"27","hashOfConfig":"16"},{"size":912,"mtime":1613134123815,"results":"28","hashOfConfig":"16"},{"size":169,"mtime":1613149857083,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"oin49t",{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\index.js",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\App.js",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\reportWebVitals.js",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\container\\WeatherApp.jsx",["58","59","60"],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\Header\\Header.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\chart\\Chart.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\citytemp\\CityTemp.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\Search\\Search.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\helpers.js",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\loading\\Loading.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\imgs\\imgs.js",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\components\\weektemp\\WeekTemp.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\TableHelper.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\WeatherApp\\weather_app_js\\src\\helper\\oneWeekTemp.js",[],{"ruleId":"61","severity":1,"message":"62","line":19,"column":12,"nodeType":"63","messageId":"64","endLine":19,"endColumn":17},{"ruleId":"65","severity":1,"message":"66","line":68,"column":11,"nodeType":"67","endLine":68,"endColumn":16,"suggestions":"68"},{"ruleId":"65","severity":1,"message":"66","line":76,"column":11,"nodeType":"67","endLine":76,"endColumn":24,"suggestions":"69"},"no-unused-vars","'error' is assigned a value but never used.","Identifier","unusedVar","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'fetching'. Either include it or remove the dependency array.","ArrayExpression",["70"],["71"],{"desc":"72","fix":"73"},{"desc":"74","fix":"75"},"Update the dependencies array to be: [URL, fetching]",{"range":"76","text":"77"},"Update the dependencies array to be: [WeatherURL, fetching]",{"range":"78","text":"79"},[2058,2063],"[URL, fetching]",[2238,2251],"[WeatherURL, fetching]"]

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,125 +1,31 @@
 # Weather App
+Weather App is a web based Application which is there show weather data based on the location that the user wants, and the data is loaded from  [Metaweather](https://www.metaweather.com/api/)  Api. 
 
-One of these APIs should do the job.
-1- [here](https://www.metaweather.com/api/) or [here](https://weatherstack.com/documentation) or [here](https://api.windy.com/)
-If you face issue fetching the data maybe [this](https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors/43268098) helps.
+it has a very simple and elegant interface as shown below: 
+![Section 1](./top-app.PNG) 
 
-## Requirements
-Create an application that fetches data from one of the above API. 
 
-1- the app functionallity should look like this you are free to change design be as creative as possible .check the examples down for inspirations**
-![weather](Weather.png) 
+## Main Components of section 1:
+1- Header: the header component is there to show (Rain predictability, Humidity ratio, Wind speed, Wind Direction, Pressure, Visibility) of the current day of the location that the user specifies. 
 
+2- Search: the sarch component waits for the user to type the location they want to know the weather data about, and then it does a fetching requiest based on the user data to the API and returns the data. 
 
+3- City Tempreature: after reciving the data from the API, this component shows data of the current day to the user. 
 
-## Optional
+4- chart: the chart component uses a ling graph to show teampreatur differences within each day of the week starting from current date along side humidity of each day. 
 
 
-1- Background image of the web page changes according to the Weather.
+## Section 2
+![Section 2](./bottom-app.PNG) 
 
-***PS**: You are free to use a CSS framework.*
+in this section we have one table which is showing teampreatur data of the week as shown in the image. 
 
-**Those are some [images](https://static.dribbble.com/users/2158940/screenshots/7376567/media/35649246137de1ce1d3f68d4ad1e1ffa.png) for [inspiration](https://static.dribbble.com/users/2158940/screenshots/7118235/media/1ea59d43e8e99a529220bed091f8eb84.png).* 
 
-## Coding Phase
+**React-Bootstrap** is used to deal with the design aspect of the project. 
+**react-chartjs-2** is used for creating the chart. 
 
-- Use `projects` in github, they can be useful in arranging the tasks or issues with description and image so everyone knows what they should do
-- to track their work its better to add columns like `in progress`, `done` , and `closed`
-- minimize the communication required in Slack, try to make them depend on review comments and task descriptions
-- They should create a branch locally with the naming convention `[issue id + issue title]` and then push it and submit a Pull Request that must be attached to the issue after
-- Make the tasks small but more, this can reduce conflicts and won't overwhelm them, not sure if it a good idea but I’m just experiencing here so they may do more than one task a week depending on how fast they are
 
-## Git
 
-**Pull Requests**
 
-- Go to the issues board and create a new issue with the task assigned to you.
-- Assign the issue to yourself so others know who is working on this issue.
-- Create a new pull request from that issue and also assign it to yourself, Github will automatically create a branch for you and give you instructions how to check it out.
-- After finishing the work, push your code and assign the team leader on that pull request so they can review the code.
 
-**Commit Message Format**
-
-Each commit message consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type** and a **subject**:
-
-```
-<type>: <subject>
-<BLANK LINE>
-<body>
-```
-
-The **header** is mandatory, while the **body** is optional but highly encouraged.
-
-**Type**
-
-Must be one of the following:
-
-- **Build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-- **Doc**: Documentation only changes
-- **Feat**: A new feature
-- **Fix**: A bug fix
-- **Perf**: A code change that improves performance
-- **Refactor**: A code change that neither fixes a bug nor adds a feature
-- **Style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-
-**Subject**
-
-The subject contains a succinct description of the change:
-
-- use the imperative, present tense: “change” not “changed” nor “changes”
-- don’t capitalize the first letter
-- no dot (.) at the end
-
-**Body**
-
-Just as in the **subject**, use the imperative, present tense: “change” not “changed” nor “changes”. The body should include the motivation for the change and contrast this with previous behavior.
-
-## The Code
-
-- The code should be totally clean and checked line by line before committing and pushing.
-- You shouldn't leave any unnecessary comments in the code.
-- Don't leave any logs inside the code.
-- All variables should be `const` except for specific cases where you will need to use `let`
-- Variables should use camelCase naming convention
-- CSS classes should follow BEM naming convention. *You can find more about it [here](http://getbem.com/naming/).*
-- Leave only one empty line between CSS classes. This also goes for different purpose code blocks (like `imports` and variables under it).
-- Make sure your naming is right and not confusing i.e. the `Navbar` shouldn't be named `header` or when you fetch `movies` your function should return `movies` not `data`
-- Make sure you clean your imported modules or files that you don't use before committing. The same goes for any variable, function or piece of code not used.
-- Don't repeat yourself (DRY). Make sure the code you write is reusable and reduce repetition of information of all kinds. For example, don't write two functions that do the same or almost the same job. R*ead more about DRY [here](https://en.wikipedia.org/wiki/Don't_repeat_yourself).*
-
-## Project structure
-
-- Use `create-react-app` for the boilerplate react app.
-
-- depending on what flow to take
-    - Follow the component container pattern, so your two main folders inside the `src` will be the `components` folder that will contain your components and `containers` that will contain container components. *You can read more about container components [here](https://reactpatterns.com/#container-component) or you can ask you team leader about it for more clarity.*
-    - similar concept you can use the component page 
-    take a look [here](https://blog.bitsrc.io/structuring-a-react-project-a-definitive-guide-ac9a754df5eb)
-
-- Use `scss` instead of css if you going with `react-bootstrap`
-- You can use `postcss` if you are going with another library that uses something like `tailwind`
-- Global style variables will be inside a `style` folder inside the `src` inside a `_variables.scss.` If you are using `react-bootstrap` this can come in handy!
-- The main folder names inside the `src` should be lower case like `components` and `container or pages` other folders inside them should be TitleCase like `ProgressBar` and files inside these folder will be TitleCase too like `ProgressBar.js.` If you need styles then add them with the same `.js` file name like `ProgressBar.scss`
-
-Your project hierarchy should look something similar to this:
-
-```
-.
-├── src
-	├── components
-		├── ProgressBar
-			├── ProgressBar.js
-			├── ProgressBar.scss
-	├── containers
-		├── About
-				├── ContactForm.js
-				├── About.js
-	├── style
-		├── _variables.scss
-```
-
-- All dependencies inside the `package.json` should be used in the project.
-- It's recommended to use Yarn to install the packages.
-- General use images should be inside a folder inside `src` under `images` and try to use `svg` as much as possible. Component specific images should be under their folders.
-- You should have prettier extension installed and make sure your code is well formatted before submitting it.