Added light and dark mode , styling and GithubLink

CONTRIBUTING.md

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

src/App.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { useState, useEffect } from 'react';
-
 import Weather from './components/Weather';
 import LoadingIndicator from './UI/LoadingIndicator';
-
 import './app.css';
+import sunImage from "./images/sun.png"
+import moonImage from "./images/moon.jpg"
 
 function App() {
   const [data, setData] = useState(null);
@@ -13,6 +13,27 @@ function App() {
   const [location, setLocation] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
+  // Added light and dark mode toggler here 
+
+  const [mode, setMode] = useState("light"); 
+
+  useEffect(() => {
+
+    if (mode === "light") {
+      document.documentElement.style.setProperty("--bg-color", "#fff");
+      document.documentElement.style.setProperty("--text-color", "#333");
+    } else {
+      document.documentElement.style.setProperty("--bg-color", "#333");
+      document.documentElement.style.setProperty("--text-color", "#fff");
+    }
+  }, [mode]);
+
+  const toggleMode = () => {
+    setMode(mode === "light" ? "dark" : "light");
+  };
+
+  //  added code ends here 
+
   function handleSearch(e) {
     setSearch(e.target.value);
   }
@@ -58,30 +79,44 @@ function App() {
     <p>no data found 😬</p>
   );
 
+
+
   return (
     <>
-      <div className="container">
-        <h1>WEATHER APPLICATION</h1>
-        <div className="search-sec">
-          <input
-            type="text"
-            value={search}
-            placeholder="Search by City..."
-            onChange={handleSearch}
-          />
-        </div>
-        <div>
-          <p>or</p>
-        </div>
-        <div>
-          <button onClick={geoHandler}>Find me!</button>
-        </div>
-        <br />
-        <br />
-        {isLoading && <LoadingIndicator />}
-        {display}
+      <div className={`container ${mode}`}>
+      {/* Added toggle container element here  */}
+      <div className="toggle-container">
+        <button  className='light-btn'  onClick={toggleMode}>
+          {mode === "light" ? (
+            <img src={moonImage} alt="Moon" />
+          ) : ( 
+            <img src={sunImage} alt="Sun" />
+          )}
+        </button>
+      </div>
+      <h1>WEATHER APPLICATION</h1>
+      <div className="search-sec">
+        <input
+          type="text"
+          value={search}
+          placeholder="Search by City..."
+          onChange={handleSearch}
+        />
+      </div>
+      <div>
+        <p>or</p>
+      </div>
+      <div>
+        <button onClick={geoHandler}>Find me!</button>
       </div>
-      <span className="credit">Ranvir@zetabug/github</span>
+      <br />
+      <br />
+      {isLoading && <LoadingIndicator />}
+      {display}
+
+    </div>
+           {/* Added a github icon svg */}
+      <span className="credit"> <a title="Ranvir singh" href="https://github.com/zetabug"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a> </span>
     </>
   );
 }

src/app.css

@@ -50,3 +50,69 @@ button {
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
 }
+
+/* Added styling here */
+
+/* Light Mode */
+.container {
+  background-color: #f1f1f1;
+  color: #333;
+}
+
+.toggle-container {
+  text-align: center;
+  position: fixed;
+  left: 5px;
+  margin: 1rem;
+}
+.toggle-container img{
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+button {
+  background-color: #333;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 8px 16px;
+}
+.light-btn{
+  background-color: inherit;
+}
+
+/* Dark Mode */
+.container.dark {
+  background-color: #333;
+  color: #f1f1f1;
+}
+
+.container.dark h1 {
+  color: #fff;
+}
+
+.container.dark .search-sec input {
+  background-color: #f1f1f1;
+  color: #333;
+}
+
+.toggle-container .button {
+  background-color: #fff;
+  color: #333;
+}
+
+.toggle-container .button:hover {
+  background-color: #f1f1f1;
+}
+
+button {
+  background-color: #fcfcfc;
+  color: black;
+  cursor: pointer;
+  padding: 8px 16px;
+}
+button:hover {
+  background-color: white ;
+  color: #333;
+  box-shadow: rgb(45, 45, 43) 2px 2px;
+}