From 73e4eac36c325384f5d2eba10ff5be9b8646da31 Mon Sep 17 00:00:00 2001
From: harikumar <harikumar3868@gmail.com>
Date: Mon, 16 Oct 2023 14:50:41 +0530
Subject: [PATCH 1/4] feat: UI Updated

---
 footer-fix.js       |  2 +-
 src/Footer.js       |  2 +-
 src/ThemeContext.js | 22 ++++++++++++++++++++++
 src/index.css       | 13 +++++++++----
 4 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/ThemeContext.js

diff --git a/footer-fix.js b/footer-fix.js
index 7bf8a8c..e090d5f 100644
--- a/footer-fix.js
+++ b/footer-fix.js
@@ -15,4 +15,4 @@ function Footer(){
     )
 }
 
-export default
+export default Footer
diff --git a/src/Footer.js b/src/Footer.js
index feea41a..5f12f28 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -6,7 +6,7 @@ function Footer(){
         <footer>
             <div className="container">
                 <center>
-                    <p className="p-footer">Made with the ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
+                    <p className="p-footer">Made with ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
                     <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
                     <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
                 </center>
diff --git a/src/ThemeContext.js b/src/ThemeContext.js
new file mode 100644
index 0000000..c64a9d5
--- /dev/null
+++ b/src/ThemeContext.js
@@ -0,0 +1,22 @@
+// ThemeContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
diff --git a/src/index.css b/src/index.css
index ab64a07..e5c1e99 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@ html {
 }
 body {
   margin: 0 auto;
-  font-family: Arial, sans-serif;
+  font-family:   cursive;
   background-color: #161d28;
 }
 
@@ -15,12 +15,12 @@ img:not(.large-icon) {
 header,
 footer {
   color: white;
-  background-color: #192733;
+  background-image: linear-gradient(to right, #051937, #0d2750, #16376b, #214786, #2c57a3);
   padding: 1.5rem;
 }
 
 header {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 footer {
@@ -45,7 +45,9 @@ a:hover {
 /* TYPOGRAPHY */
 .title {
   font-size: 2.5rem;
-  font-weight: 20px;
+  font-weight: 30px;
+  display: flex;
+  justify-content: center;
   padding-left: 0.6rem;
 }
 
@@ -95,6 +97,7 @@ p {
   border-radius: 10em;
   padding: 0 2rem;
   cursor: pointer;
+  transition: 0.5s;
 }
 
 .cancel-button {
@@ -110,6 +113,8 @@ p {
 }
 
 .submit-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  transform: scale(0.9);
   background-color: #6c7077;
 }
 

From 8fd6c8f9c910e620755a21c63451ed2c841913e0 Mon Sep 17 00:00:00 2001
From: Vedang Surnis <vedang.surnis@gmail.com>
Date: Tue, 17 Oct 2023 00:23:18 +0530
Subject: [PATCH 2/4] Realtime location solved

---
 src/App.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index c0ae1c7..d176494 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,12 +21,84 @@ class App extends React.Component {
       visibility: [],
       displayLoader: "none",
     };
+
+    this.componentDidMount = this.componentDidMount.bind(this);
     this.city = this.city.bind(this);
     this.submit = this.submit.bind(this);
-    this.componentWillMount = this.componentWillMount.bind(this);
     this.closeToasterMessage = this.closeToasterMessage.bind(this);
   }
 
+  async componentDidMount() {
+    try {
+      const position = await this.getCurrentPosition();
+      const { latitude, longitude } = position.coords;
+
+      const reverseGeocodeRes = await fetch(
+        `http://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${process.env.REACT_APP_OPEN_WEATHER_SECRET}`
+      );
+      const reverseGeocodeData = await reverseGeocodeRes.json();
+      const cityName = reverseGeocodeData[0]?.name || "london";
+
+
+
+      this.setState({
+        city_name: cityName,
+      });
+
+      // Now fetch weather data based on the user's location
+      this.fetchWeatherData(cityName);
+    } catch (error) {
+      console.error("Error getting location or weather data:", error);
+      this.setState({
+        error: true,
+        toast_message: "Error fetching location or weather data.",
+      });
+    }
+  }
+
+  getCurrentPosition() {
+    return new Promise((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(resolve, reject);
+    });
+  }
+
+  async fetchWeatherData(city) {
+    const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.REACT_APP_OPEN_WEATHER_SECRET}`;
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw Error(response.status);
+      }
+      const responseData = await response.json();
+
+      this.setState({
+        temp: responseData.main.temp,
+        city: responseData.name,
+        icon: responseData.weather[0].icon,
+        desc: responseData.weather[0].description,
+        humidity: responseData.main.humidity,
+        pressure: responseData.main.pressure,
+        wind: responseData.wind.speed,
+        visibility: responseData.visibility,
+        error: false,
+        toast_message: "",
+      });
+    } catch (error) {
+      if (error.message === "404") {
+        this.setState({
+          error: true,
+          toast_message:
+            "The location entered is invalid. Please enter a valid location.",
+        });
+        toast("The location entered is invalid", {
+          position: toast.POSITION.TOP_CENTER,
+          autoClose: 1500,
+          className: 'toast-message'
+        });
+      }
+    }
+  }
+
   city(event) {
     this.setState({
       city_name: event.target.value,
@@ -94,7 +166,7 @@ class App extends React.Component {
             position: toast.POSITION.TOP_CENTER,
             autoClose: 1500,
             className: 'toast-message'
-        });
+          });
         }
       });
   }
@@ -129,7 +201,7 @@ class App extends React.Component {
           visibility={this.state.visibility}
         />
         {this.state.error && (
-          <ToastContainer/>
+          <ToastContainer />
         )}
       </div>
     );

From 0770032513125ac5df25b28610620c203aba3ea5 Mon Sep 17 00:00:00 2001
From: Rajneesh Kumar <rajneeshkumar6267@gmail.com>
Date: Tue, 17 Oct 2023 11:03:43 +0530
Subject: [PATCH 3/4] added clear button beside submit button

---
 src/App.js    | 11 +++++++++++
 src/index.css | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/App.js b/src/App.js
index c0ae1c7..eac5399 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,8 @@ import 'react-toastify/dist/ReactToastify.css';
 class App extends React.Component {
   constructor() {
     super();
+    
+    
     this.state = {
       city_name: "london",
       error: false,
@@ -23,6 +25,7 @@ class App extends React.Component {
     };
     this.city = this.city.bind(this);
     this.submit = this.submit.bind(this);
+    this.clearInput = this.clearInput.bind(this);
     this.componentWillMount = this.componentWillMount.bind(this);
     this.closeToasterMessage = this.closeToasterMessage.bind(this);
   }
@@ -48,6 +51,11 @@ class App extends React.Component {
     e.preventDefault();
     this.componentWillMount();
   }
+  clearInput() {
+    this.setState({
+      city_name: "",
+    });
+  }
 
   componentWillMount() {
     document.body.style.filter = "blur(0px)";
@@ -117,6 +125,9 @@ class App extends React.Component {
           <button className="submit-button" onClick={this.submit}>
             <p className="p-submit">SUBMIT</p>
           </button>
+          <button className="clear-button" onClick={this.clearInput}>
+            Clear
+          </button>
         </form>
         <Appcontainer
           temp={this.state.temp}
diff --git a/src/index.css b/src/index.css
index ab64a07..aec611b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -96,6 +96,18 @@ p {
   padding: 0 2rem;
   cursor: pointer;
 }
+.clear-button{
+   font-size:17px ;
+  margin-top: 1rem;
+  margin-left: 1rem;
+  font-family: Arial, sans-serif;
+  background-color: #7c77fe;
+  border-radius: 10em;
+  padding: 1.1rem 2rem;
+  cursor: pointer;
+  color: white;
+
+}
 
 .cancel-button {
   color: white;
@@ -109,6 +121,12 @@ p {
   justify-content: center;
 }
 
+
+.clear-button:hover {
+  background-color: #6c7077;
+}
+
+
 .submit-button:hover {
   background-color: #6c7077;
 }

From f04b78dd19d71f806a67c6baae5b41f1c8417bfc Mon Sep 17 00:00:00 2001
From: Rajneesh Kumar <rajneeshkumar6267@gmail.com>
Date: Tue, 17 Oct 2023 11:40:40 +0530
Subject: [PATCH 4/4] made changes in ui

---
 src/Footer.js | 33 +++++++++++++++++----------------
 src/Header.js |  5 ++++-
 src/index.css | 22 +++++++++++++++++++---
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/Footer.js b/src/Footer.js
index feea41a..b8ed8a3 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,19 +1,20 @@
-import React from "react"
-import "./index.css"
+import React from "react";
+import "./index.css";
 
-function Footer(){
-    return(
-        <footer>
-            <div className="container">
-                <center>
-                    <p className="p-footer">Made with the ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
-                </center>
-            </div>
-        </footer>
-    )
-}
+function Footer() {
+  const year = new Date().getFullYear();
 
-export default Footer
+  return (
+    <footer>
+      <div className="container">
+        <center>
+          
+          <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
+          <p  className='footer1' id="copyright">© {year} MADE WITH ❤️ BY SURAJ VISHWAKARMA</p>
+        </center>
+      </div>
+    </footer>
+  );
+}
 
+export default Footer;
diff --git a/src/Header.js b/src/Header.js
index e4bbb1c..5dd4c86 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,11 +1,14 @@
 import React from "react";
 import "./index.css";
+import {TiWeatherSunny} from 'react-icons/ti'
 
 function Header() {
   return (
     <header>
       <div className="container ui block header">
-        <h1 className="title">GET WEATHER <span role="img" aria-labelledby="weather">💨</span></h1>
+      <h1 className="title">
+    GET WEATHER <span className="logo"><TiWeatherSunny/></span>
+  </h1>
       </div>
     </header>
   );
diff --git a/src/index.css b/src/index.css
index aec611b..59f6415 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,10 +17,15 @@ footer {
   color: white;
   background-color: #192733;
   padding: 1.5rem;
+ 
+  text-align: center;
 }
 
+
+
 header {
   margin-bottom: 2rem;
+  
 }
 
 footer {
@@ -40,13 +45,21 @@ a:hover {
   width: 90%;
   max-width: 1110px;
   margin: 0 auto;
+    
 }
 
 /* TYPOGRAPHY */
 .title {
-  font-size: 2.5rem;
-  font-weight: 20px;
-  padding-left: 0.6rem;
+  font-size: 3rem;
+  font-weight: 24px;
+  padding-left: 0.rem;
+  font-family:Arial, Helvetica, sans-serif  
+}
+.logo{
+  font-size: 50px;
+  vertical-align: middle;
+  margin-left: 10px; 
+
 }
 
 h2 {
@@ -289,3 +302,6 @@ p {
     transform: rotate(360deg);
   }
 }
+.footer1{
+  font-size: 20px;
+}