Merge branch 'master' into add_clear_button

footer-fix.js

@@ -15,4 +15,4 @@ function Footer(){
     )
 }
 
-export default
+export default Footer

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,
@@ -21,12 +23,88 @@ 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.clearInput = this.clearInput.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,
@@ -48,10 +126,11 @@ class App extends React.Component {
     e.preventDefault();
     this.componentWillMount();
   }
-
-  clear(e) {
-    e.preventDefault();
-    window.location.reload(false);
+
+  clearInput() {
+    this.setState({
+      city_name: "",
+    });
   }
 
   componentWillMount() {
@@ -99,7 +178,7 @@ class App extends React.Component {
             position: toast.POSITION.TOP_CENTER,
             autoClose: 1500,
             className: 'toast-message'
-        });
+          });
         }
       });
   }
@@ -122,8 +201,10 @@ class App extends React.Component {
           <button className="button" onClick={this.submit}>
             <p className="p-submit">SUBMIT</p>
           </button>
+
           <button className="button" onClick={this.clear}>
             <p className="p-submit">CLEAR</p>
+
           </button>
         </form>
         <Appcontainer
@@ -137,7 +218,7 @@ class App extends React.Component {
           visibility={this.state.visibility}
         />
         {this.state.error && (
-          <ToastContainer/>
+          <ToastContainer />
         )}
       </div>
     );

src/Footer.js

@@ -1,19 +1,34 @@
-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 ❤️ 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;

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>
   );

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);
+}

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,18 @@ 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;
+
+  text-align: center;
 }
 
+
+
 header {
+  margin-bottom: 1rem;
   margin-bottom: 2rem;
+
 }
 
 footer {
@@ -40,13 +46,26 @@ a:hover {
   width: 90%;
   max-width: 1110px;
   margin: 0 auto;
+
 }
 
 /* TYPOGRAPHY */
 .title {
   font-size: 2.5rem;
-  font-weight: 20px;
+  font-weight: 30px;
+  display: flex;
+  justify-content: center;
   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 {
@@ -95,6 +114,19 @@ p {
   border-radius: 10em;
   padding: 0 2rem;
   cursor: pointer;
+  transition: 0.5s;
+}
+.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 {
@@ -109,7 +141,15 @@ p {
   justify-content: center;
 }
 
+
+.clear-button:hover {
+  background-color: #6c7077;
+}
+
+
 .submit-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  transform: scale(0.9);
   background-color: #6c7077;
 }
 
@@ -271,3 +311,6 @@ p {
     transform: rotate(360deg);
   }
 }
+.footer1{
+  font-size: 20px;
+}