Added name to Contributing

CONTRIBUTING.md

@@ -2,3 +2,4 @@
 
 1. zetabug
 2. AnthonyHad
+3. AngeloTree

src/App.js

@@ -1,24 +1,25 @@
-import React, { useCallback } from 'react';
-import { useState, useEffect } from 'react';
+import React, { useCallback } from "react";
+import { useState, useEffect } from "react";
+import SunnyImage from "./weather_images/Sunny.jpeg";
+import Rain from "./weather_images/Rain.jpeg";
+import Weather from "./components/Weather";
+import LoadingIndicator from "./UI/LoadingIndicator";
 
-import Weather from './components/Weather';
-import LoadingIndicator from './UI/LoadingIndicator';
-
-import './app.css';
+import "./app.css";
 
 function App() {
   const [data, setData] = useState(null);
   const [place, setPlace] = useState(null);
-  const [search, setSearch] = useState('');
-  const [location, setLocation] = useState('');
+  const [search, setSearch] = useState("");
+  const [location, setLocation] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   function handleSearch(e) {
     setSearch(e.target.value);
   }
 
   async function geoHandler() {
-    setSearch('');
+    setSearch("");
     setIsLoading(true);
     await navigator.geolocation.getCurrentPosition((position) => {
       const crd = position.coords;
@@ -30,10 +31,10 @@ function App() {
 
   const fetchData = useCallback(async (search, location) => {
     const options = {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'X-RapidAPI-Key': '0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708',
-        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com',
+        "X-RapidAPI-Key": "0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708",
+        "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
       },
     };
     const url = `https://weatherapi-com.p.rapidapi.com/current.json?q=${
@@ -44,6 +45,19 @@ function App() {
     return responseData;
   }, []);
 
+  const settingBackgroundImage = () => {
+    let text;
+    document.body.style.backgroundImage = `url(${SunnyImage})`;
+    if (isLoading === false) {
+      setTimeout(() => {
+        text = data.condition.text;
+        if (text.includes("rain")) {
+          document.body.style.backgroundImage = `url(${Rain})`;
+        }
+      }, 1000);
+    }
+  };
+
   useEffect(() => {
     fetchData(search, location).then((responseData) => {
       setPlace(responseData.location);
@@ -61,6 +75,7 @@ function App() {
   return (
     <>
       <div className="container">
+        {settingBackgroundImage()}
         <h1>WEATHER APPLICATION</h1>
         <div className="search-sec">
           <input
@@ -74,7 +89,9 @@ function App() {
           <p>or</p>
         </div>
         <div>
-          <button onClick={geoHandler}>Find me!</button>
+          <button onClick={geoHandler}>
+            <span>Find Me</span>
+          </button>
         </div>
         <br />
         <br />

src/app.css

@@ -4,7 +4,7 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 }
 h1 {
   text-align: center;
@@ -41,12 +41,40 @@ p {
 }
 
 button {
+  border-radius: 4px;
+  background-color: #f4511e;
+  border: none;
+  color: #ffff;
+  text-align: center;
+  font-size: 28px;
+  padding: 20px;
+  width: 200px;
+  transition: all 0.5s;
   cursor: pointer;
-  background-color: transparent;
-  border: 1px solid #8a2b06;
-  padding: 0.5rem 2rem;
-  border-radius: 25px;
-  margin-left: 1rem;
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: bold;
+  margin: 5px;
+}
+
+button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5;
+}
+
+button span:after {
+  content: "\00bb";
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+button:hover span {
+  padding-right: 25px;
+}
+
+button:hover span:after {
+  opacity: 1;
+  right: 0;
 }

src/components/Weather.js

@@ -1,4 +1,4 @@
-import './Weather.css';
+import "./Weather.css";
 
 const Weather = (props) => {
   return (