changes background gradient

edakizak · Jan 23, 2024 · 8125ad4 · 8125ad4
1 parent 427512e
commit 8125ad4
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 80 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Weather App</title>
+    <script></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -57,3 +57,40 @@
   background-image: url("./assets/Images/rainforest.jpeg");
   color: aliceblue;
 }
+/* 
+body,
+.europe {
+  background: linear-gradient(
+    180deg,
+    rgba(176, 166, 53, 1) 0%,
+    rgba(2, 0, 36, 1) 100%
+  );
+}
+
+body,
+.arctic {
+  background: rgb(40, 114, 209);
+  background: linear-gradient(
+    180deg,
+    rgba(40, 114, 209, 1) 0%,
+    rgba(20, 18, 56, 1) 100%
+  );
+}
+
+body,
+.sahara {
+  background: linear-gradient(
+    180deg,
+    rgba(209, 134, 40, 1) 0%,
+    rgba(2, 0, 36, 1) 100%
+  );
+}
+
+body,
+.rainforest {
+  background: linear-gradient(
+    180deg,
+    rgba(36, 71, 14, 1) 0%,
+    rgba(2, 0, 36, 1) 100%
+  );
+} */
diff --git a/src/App.jsx b/src/App.jsx
@@ -32,6 +32,24 @@ function App() {
         if (response.ok) {
           const weatherData = await response.json();
           setWeather(weatherData);
+
+          const body = document.body;
+          if (selectedLocation === "") {
+            body.style.background =
+              "linear-gradient(180deg,rgba(0, 212, 255, 1) 0%, rgba(1, 99, 138, 1) 29%, rgba(2, 28, 64, 1) 57%, rgba(2, 0, 36, 1) 100%);";
+          } else if (selectedLocation === "europe") {
+            body.style.background =
+              "linear-gradient(180deg, rgba(176, 166, 53, 1) 0%, rgba(2, 0, 36, 1) 100%)";
+          } else if (selectedLocation === "arctic") {
+            body.style.background =
+              "linear-gradient(180deg, rgba(40, 114, 209, 1) 0%, rgba(20, 18, 56, 1) 100%)";
+          } else if (selectedLocation === "sahara") {
+            body.style.background =
+              "linear-gradient(180deg, rgba(209, 134, 40, 1) 0%, rgba(2, 0, 36, 1) 100%)";
+          } else if (selectedLocation === "rainforest") {
+            body.style.background =
+              "linear-gradient(180deg, rgba(36, 71, 14, 1) 0%, rgba(2, 0, 36, 1) 100%)";
+          }
         } else {
           console.error("Failed to fetch weather data.");
         }

diff --git a/src/index.css b/src/index.css
@@ -5,14 +5,6 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background: rgba(0, 212, 255, 1);
-  background: linear-gradient(
-    180deg,
-    rgba(0, 212, 255, 1) 0%,
-    rgba(1, 99, 138, 1) 29%,
-    rgba(2, 28, 64, 1) 57%,
-    rgba(2, 0, 36, 1) 100%
-  );
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -35,6 +27,13 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 212, 255, 1) 0%,
+    rgba(1, 99, 138, 1) 29%,
+    rgba(2, 28, 64, 1) 57%,
+    rgba(2, 0, 36, 1) 100%
+  );
 }
 
 h1 {
@@ -73,71 +72,3 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
-
-/* .app-container.europe {
-  --background: rgb(176, 166, 53);
-  --background: linear-gradient(
-    180deg,
-    rgba(176, 166, 53, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-}
-
-.app-container.arctic {
-  background: rgb(40, 114, 209);
-  background: linear-gradient(
-    180deg,
-    rgba(40, 114, 209, 1) 0%,
-    rgba(20, 18, 56, 1) 100%
-  );
-}
-
-.app-container.sahara {
-  background: rgb(209, 134, 40);
-  background: linear-gradient(
-    180deg,
-    rgba(209, 134, 40, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-}
-
-.app-container.rainforest {
-  background: rgb(36, 71, 14);
-  background: linear-gradient(
-    180deg,
-    rgba(36, 71, 14, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-} */
-:root.europe {
-  background: linear-gradient(
-    180deg,
-    rgba(176, 166, 53, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-}
-
-:root.arctic {
-  background: rgb(40, 114, 209);
-  background: linear-gradient(
-    180deg,
-    rgba(40, 114, 209, 1) 0%,
-    rgba(20, 18, 56, 1) 100%
-  );
-}
-
-:root.sahara {
-  background: linear-gradient(
-    180deg,
-    rgba(209, 134, 40, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-}
-
-:root.rainforest {
-  background: linear-gradient(
-    180deg,
-    rgba(36, 71, 14, 1) 0%,
-    rgba(2, 0, 36, 1) 100%
-  );
-}
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,12 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
-import selectedLocation from "./components/locations/Locations.jsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <div className={`app-container ${selectedLocation}`}>
-      <App />
-    </div>
+    <App />
   </React.StrictMode>
 );