Master

package.json

@@ -6,9 +6,19 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "city": "^1.0.4",
+    "country-state-city": "^2.1.0",
+    "google-maps-react": "^2.0.6",
+    "moment": "^2.29.1",
+    "openweather-apis": "^4.4.1",
     "react": "^17.0.2",
+    "react-country-region-selector": "^3.1.0",
+    "react-datetime": "^3.0.4",
     "react-dom": "^17.0.2",
+    "react-open-weather": "^1.1.5",
     "react-scripts": "4.0.3",
+    "react-select-cities": "^2.0.0",
+    "weather-icons-react": "^1.2.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.css

@@ -1,5 +1,12 @@
 .App {
   text-align: center;
+  background-color: #282c34;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  min-height: 100vh;
+
+
+
 }
 
 .App-logo {

src/App.js

@@ -1,23 +1,15 @@
-import logo from './logo.svg';
 import './App.css';
-
+import Inputcity from './component/Inputcity';
+// import Weather from './component/Weather';
+//import Weatherrr from './component/Weatherrr';
+// import Wether from './component/Wether';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* <Wether /> */}
+      {/* <Weather /> */}
+      {/* <Weatherrr latt='29' long='44' /> */}
+      <Inputcity />
     </div>
   );
 }

src/component/Inputcity.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Time from './Time'
+import Weatherrr from './Weatherrr'
+const weather = require('openweather-apis');
+
+function Inputcity() {
+    const [cooord, setcooord] = useState({ lati: '51.5085', long: '-0.1257', cityy: 'London' })
+    const [city, setcity] = useState('London')
+    const submit = () => {
+        weather.setLang('en');
+        weather.setCity(`${city}`);
+        weather.setUnits('metric');
+        weather.setAPPID('f7d454f5834522dcb92bcf5d38a1db14');
+        weather.getAllWeather(function (err, info) {
+            if (err) {
+                alert('Input a valid City')
+            }
+            else {
+                setcooord({ lati: info.coord.lat, long: info.coord.lon, cityy: info.name })
+            }
+
+        });
+    }
+
+    const loctate = () => {
+        navigator.geolocation.getCurrentPosition(function (position) {
+            setcooord({ lati: position.coords.latitude, long: position.coords.longitude, cityy: 'Mosul' })
+        });
+
+    }
+    const cityhandler = (event) => {
+        setcity(event.target.value)
+    }
+    return (
+        <div>
+            <div>
+                <input type='text' value={city} onChange={cityhandler} autoFocus />
+                <button onClick={submit}>OK</button>
+                <button onClick={loctate}>Loctate My Location</button>
+            </div>
+            <Time />
+            <Weatherrr lat={cooord.lati} long={cooord.long} cityName={cooord.cityy} />
+        </div>
+    )
+}
+
+export default Inputcity

src/component/Listing.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+
+class Listing extends Component {
+
+    constructor(props) {
+        super(props)   
+        this.state = {
+            records: []
+        }
+    }
+
+    componentDidMount() {
+        fetch('https://jsonplaceholder.typicode.com/users')
+            .then(response => response.json())
+            .then(records => {
+                this.setState({
+                    records: records
+                })
+            })
+            .catch(error => console.log(error))
+    }
+
+    renderListing() {
+        let recordList = []
+        this.state.records.map(record => {
+            return recordList.push(<li key={record.id}>{record.name}</li>)
+        })
+
+        return recordList;
+    }
+
+    render() {
+        return (
+            <ul>
+                {this.renderListing()}
+            </ul>
+        );
+    }
+}
+
+export default Listing;

src/component/Time.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+
+function Time() {
+    const [time, settime] = useState(moment().format('MMMM Do YYYY, h:mm:ss a'))
+
+    const hanleTime = () => {
+        settime(moment().format('MMMM Do YYYY, h:mm:ss a'))
+    }
+    useEffect(() => {
+        const Timer = setInterval(hanleTime, 1000);
+        return () => {
+            clearInterval(Timer)
+        }
+    }, [])
+    return (
+        <div>
+            {time}
+        </div>
+    )
+}
+
+export default Time

src/component/Weatherrr.js

@@ -0,0 +1,26 @@
+import ReactWeather, { useOpenWeather } from 'react-open-weather';
+import React from 'react'
+
+
+const Weatherrr = (props) => {
+    const { data, isLoading, errorMessage } = useOpenWeather({
+        key: 'f7d454f5834522dcb92bcf5d38a1db14',
+        lat: `${props.lat}`, //lat
+        lon: `${props.long}`, //lon
+        lang: 'en',
+        unit: 'metric', // values are (metric, standard, imperial)
+    });
+    return (
+        <ReactWeather
+            isLoading={isLoading}
+            errorMessage={errorMessage}
+            data={data}
+            lang="en"
+            locationLabel={props.cityName} // town
+            unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }
+            }
+            showForecast
+        />
+    );
+};
+export default Weatherrr