From 9eeab1ab7ddc2bb170e79928923c668804cf6eda Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Thu, 28 Jul 2022 18:00:36 +0100
Subject: [PATCH 01/15] the weather card displays data received from weather
 API, however, spelling must be perfect, need to fix this

---
 project-app/components/Weather/SearchBar.jsx  |  2 +-
 project-app/components/Weather/Weather.jsx    | 21 ++++++++++++-------
 .../components/Weather/WeatherCurrent.jsx     |  6 +++---
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/project-app/components/Weather/SearchBar.jsx b/project-app/components/Weather/SearchBar.jsx
index 9fcaf0e..2f8e6ac 100644
--- a/project-app/components/Weather/SearchBar.jsx
+++ b/project-app/components/Weather/SearchBar.jsx
@@ -35,7 +35,7 @@ const SearchBar = ({fetchWeather, handleChange, city}) => {
           type="search"
           id="default-search"
           className="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="Type in city name..."
+          placeholder="Type in city..."
           required=""
         />
         <button
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 46c34a4..52748a4 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -14,16 +14,21 @@ const Weather = () => {
     
     setCity(e.target.value);
   }
-
-  const url = `http://api.openweathermap.org/data/2.5/forecast?q=${city}&mode=json&appid=${process.env.NEXT_PUBLIC_WEATHER_KEY}&units=metric`;
+  // `api.openweathermap.org/data/2.5/forecast?q=london&appid=bb7583604ecbfdd9c60127fbda2d5209`
+  const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${process.env.NEXT_PUBLIC_WEATHER_KEY}&units=metric`;
 
   async function fetchWeather() {
-    const response = await fetch(url);
-    const data = await response.json();
-    console.log(data);
-    setWeatherObject(data);
-    setCity('')
-  }
+    // This was an attempt to force the users to put in letters only, needs refactoring, DO NOT DELETE
+    // if (!/^[a-zA-Z]+$/.test(city)) {
+    //   alert("Please enter letters only");
+    // }
+    
+      const response = await fetch(url);
+      const data = await response.json();
+      console.log(data);
+      setWeatherObject(data);
+      setCity('');
+    }
 
   useEffect(() => {
     fetchWeather();
diff --git a/project-app/components/Weather/WeatherCurrent.jsx b/project-app/components/Weather/WeatherCurrent.jsx
index 3c133ec..f9779b6 100644
--- a/project-app/components/Weather/WeatherCurrent.jsx
+++ b/project-app/components/Weather/WeatherCurrent.jsx
@@ -40,7 +40,7 @@ export default function WeatherCurrent({weatherObject}) {
                   <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
                   <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
                 </svg>{" "}
-                <span>27km/h</span>
+                <span>{weatherObject?.list[0].wind.speed}m/s</span>
               </span>
               <span className="flex space-x-2 items-center">
                 <svg
@@ -52,11 +52,11 @@ export default function WeatherCurrent({weatherObject}) {
                   <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
                   <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
                 </svg>{" "}
-                <span>32%</span>
+                <span>{weatherObject?.list[0].main.humidity}%</span>
               </span>
             </div>
             <div>
-              <h1 className="text-6xl"> 12° </h1>
+              <h1 className="text-6xl"> {Math.floor(weatherObject?.list[0].main.temp)}°C </h1>
             </div>
           </div>
         </div>

From b861c8cc8a02b8960fad8d44202616281621e47f Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Thu, 28 Jul 2022 18:10:22 +0100
Subject: [PATCH 02/15] created a second card with the same logic for the first
 as a placeholder for 5 day forecast

---
 project-app/components/Weather/Weather.jsx    |  8 ++-
 .../components/Weather/WeatherForecast.jsx    | 66 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 52748a4..c5886f1 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -22,7 +22,7 @@ const Weather = () => {
     // if (!/^[a-zA-Z]+$/.test(city)) {
     //   alert("Please enter letters only");
     // }
-    
+
       const response = await fetch(url);
       const data = await response.json();
       console.log(data);
@@ -40,8 +40,10 @@ const Weather = () => {
     <div>
       <div className="weather">
         <SearchBar handleChange={handleChange} fetchWeather={fetchWeather} city={city}/>
-        <WeatherCurrent weatherObject={weatherObject}/>
-        <WeatherForecast />
+          <div className="flex flex-row justify-evenly">
+            <WeatherCurrent weatherObject={weatherObject}/>
+            <WeatherForecast weatherObject={weatherObject}/>
+          </div>
       </div>
     </div>
   );
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index f8d6005..7843a21 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -1,7 +1,69 @@
 import React from "react";
 
-const WeatherForecast = () => {
-  return <div>WeatherForecast</div>;
+const WeatherForecast = ({weatherObject}) => {
+  return (<div className="flex justify-center">
+  <div className="card  min-w-sm max-w-sm border border-gray-100 bg-gray-50   transition-shadow test  shadow-lg hover:shadow-shadow-xl w-full bg-green-600 text-purple-50 rounded-md">
+    <h2 className="text-md mb-2 px-4 pt-4">
+      <div className="flex justify-between">
+        <div className="badge relative top-0">
+          <span className="mt-2 py-1 h-12px text-md font-semibold w-12px  rounded right-1 bottom-1 px-4">
+            {weatherObject?.city.name}
+          </span>
+        </div>
+        <span className="text-lg font-bold ">6:13</span>
+      </div>
+    </h2>
+
+    <div className="flex items-center p-4">
+      <div className="flex justify-center items-center w-96">
+        {/* <svg height="20" width="20" viewBox="0 0 32 32"
+      className="fill-current h-32 w-32 text-yellow-300">
+      <path
+        d="M21.743,18.6872A6.05,6.05,0,0,0,22.8,17.6006a5.9977,5.9977,0,1,0-10.7334-4.4444,7.5568,7.5568,0,0,0-5.7158,5.0879A5.9926,5.9926,0,0,0,8,30H19a5.9854,5.9854,0,0,0,2.743-11.3128ZM18,10a4.0042,4.0042,0,0,1,4,4,3.9613,3.9613,0,0,1-.8,2.3994,4.0122,4.0122,0,0,1-.94.8917,7.5416,7.5416,0,0,0-6.1339-4.2395A3.9985,3.9985,0,0,1,18,10Zm1,18H8a3.9928,3.9928,0,0,1-.6729-7.93L7.99,19.958l.1456-.6562a5.4958,5.4958,0,0,1,10.729,0l.1464.6562.6622.1123A3.9928,3.9928,0,0,1,19,28Z"
+        transform="translate(0 .005)"></path>
+      <path d="M26 13.005H30V15.005H26z"></path>
+      <path d="M23.071 5.929H27.071V7.929H23.071z" transform="rotate(-45 25.077 6.931)"></path>
+      <path d="M17 2.005H19V6.005H17z"></path>
+      <path d="M9.929 4.929H11.929V8.929H9.929z" transform="rotate(-45 10.935 6.931)"></path>
+    </svg> */}
+      </div>
+    </div>
+    <div className="text-md pt-4 pb-4 px-4">
+      <div className="flex justify-between items-center">
+        <div className="space-y-2">
+          <span className="flex space-x-2 items-center">
+            <svg
+              height="20"
+              width="20"
+              viewBox="0 0 32 32"
+              className="fill-current"
+            >
+              <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
+              <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
+            </svg>{" "}
+            <span>{weatherObject?.list[0].wind.speed}m/s</span>
+          </span>
+          <span className="flex space-x-2 items-center">
+            <svg
+              height="20"
+              width="20"
+              viewBox="0 0 32 32"
+              className="fill-current"
+            >
+              <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
+              <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
+            </svg>{" "}
+            <span>{weatherObject?.list[0].main.humidity}%</span>
+          </span>
+        </div>
+        <div>
+          <h1 className="text-6xl"> {Math.floor(weatherObject?.list[0].main.temp)}°C </h1>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+)
 };
 
 export default WeatherForecast;

From 8f9d88aafa85593e3e3fb75399d1b1049adaf329 Mon Sep 17 00:00:00 2001
From: Emma <e.e.gill@outlook.com>
Date: Fri, 29 Jul 2022 09:43:05 +0100
Subject: [PATCH 03/15] Continuing work on landing banner

---
 project-app/.eslintrc.json                 |  4 ++--
 project-app/components/Landing/Landing.jsx | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/project-app/.eslintrc.json b/project-app/.eslintrc.json
index bffb357..fe73d21 100644
--- a/project-app/.eslintrc.json
+++ b/project-app/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": ["next/babel","next/core-web-vitals"]
+}
\ No newline at end of file
diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx
index 184a10f..e981f0d 100644
--- a/project-app/components/Landing/Landing.jsx
+++ b/project-app/components/Landing/Landing.jsx
@@ -3,17 +3,20 @@ import NavButton from './NavButton/NavButton.jsx'
 const LandingBanner = () => {
 
   return ( 
-    <div className='bg-hero-background bg-contain bg-no-repeat .flex flex-col '>
+    <div id="home" className='bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex'>
 
-      <div className='grid h-screen place-items-center'>
-      <h1 className = 'text-3xl'>Project Clean-Up</h1>
-      </div>
-
-      <div className='md:w-80 md:space-x-5 p-3 inset-9 md:-mt-96'>
-        <NavButton buttonText="Button One"/> 
-        <NavButton buttonText="Button Two"/>
+    <div class="relative container mx-auto p-4 flex items-center justify-center z-10">
+      <div>
+        <div class="flex flex-col justify-center items-center lg:items-start text-center">
+          <h1 class="text-6xl font-semibold text-gray-900 leading-none align-center">Project Clean-Up</h1>
+          <div class="flex flex-row items-center justify-between">
+            <NavButton buttonText="Button One"/> 
+            <NavButton buttonText="Button Two"/>
+          </div>
+        </div>
       </div>
     </div> 
+  </div> 
     );
 
 }

From 0a6765760baeb80c38e39830d173863af95dfa1e Mon Sep 17 00:00:00 2001
From: BlakeLawrence <blake-lawrence@hotmail.co.uk>
Date: Fri, 29 Jul 2022 10:32:41 +0100
Subject: [PATCH 04/15] weather styling updated and 5 day forecast values added

---
 project-app/components/Weather/SearchBar.jsx  |   6 +-
 project-app/components/Weather/Weather.jsx    |  38 ++--
 .../components/Weather/WeatherCurrent.jsx     |  66 ------
 .../components/Weather/WeatherForecast.jsx    | 195 ++++++++++++------
 4 files changed, 158 insertions(+), 147 deletions(-)
 delete mode 100644 project-app/components/Weather/WeatherCurrent.jsx

diff --git a/project-app/components/Weather/SearchBar.jsx b/project-app/components/Weather/SearchBar.jsx
index 2f8e6ac..80c966f 100644
--- a/project-app/components/Weather/SearchBar.jsx
+++ b/project-app/components/Weather/SearchBar.jsx
@@ -1,10 +1,8 @@
 import React from "react";
 
-const SearchBar = ({fetchWeather, handleChange, city}) => {
-
- 
+const SearchBar = ({ fetchWeather, handleChange, city }) => {
   return (
-    <div>
+    <div className="w-80 ml-4">
       <label
         htmlFor="default-search"
         className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index c5886f1..5b4b31d 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -1,20 +1,17 @@
 import React from "react";
 import { useState, useEffect } from "react";
-import WeatherCurrent from "./WeatherCurrent";
+
 import SearchBar from "./SearchBar";
 import WeatherForecast from "./WeatherForecast";
 
 const Weather = () => {
   const [weatherObject, setWeatherObject] = useState();
   const [city, setCity] = useState("london");
-  
-  
 
   function handleChange(e) {
-    
     setCity(e.target.value);
   }
-  // `api.openweathermap.org/data/2.5/forecast?q=london&appid=bb7583604ecbfdd9c60127fbda2d5209`
+
   const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${process.env.NEXT_PUBLIC_WEATHER_KEY}&units=metric`;
 
   async function fetchWeather() {
@@ -23,27 +20,30 @@ const Weather = () => {
     //   alert("Please enter letters only");
     // }
 
-      const response = await fetch(url);
-      const data = await response.json();
-      console.log(data);
-      setWeatherObject(data);
-      setCity('');
-    }
+    const response = await fetch(url);
+    const data = await response.json();
+    console.log(data);
+    setWeatherObject(data);
+    //uncomment the below city State after development stage - means each time you make a change, props cant be found
+    // setCity("");
+  }
 
   useEffect(() => {
     fetchWeather();
   }, []);
 
-
-
   return (
-    <div>
+    <div className="mt-4">
+      <h1 className="text-6xl font-bold ml-4">Weather Forecast</h1>
       <div className="weather">
-        <SearchBar handleChange={handleChange} fetchWeather={fetchWeather} city={city}/>
-          <div className="flex flex-row justify-evenly">
-            <WeatherCurrent weatherObject={weatherObject}/>
-            <WeatherForecast weatherObject={weatherObject}/>
-          </div>
+        <SearchBar
+          handleChange={handleChange}
+          fetchWeather={fetchWeather}
+          city={city}
+        />
+        <div className="flex flex-row justify-start">
+          <WeatherForecast weatherObject={weatherObject} />
+        </div>
       </div>
     </div>
   );
diff --git a/project-app/components/Weather/WeatherCurrent.jsx b/project-app/components/Weather/WeatherCurrent.jsx
deleted file mode 100644
index f9779b6..0000000
--- a/project-app/components/Weather/WeatherCurrent.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-export default function WeatherCurrent({weatherObject}) {
-  return (
-    <div className="flex justify-center">
-      <div className="card  min-w-sm max-w-sm border border-gray-100 bg-gray-50   transition-shadow test  shadow-lg hover:shadow-shadow-xl w-full bg-green-600 text-purple-50 rounded-md">
-        <h2 className="text-md mb-2 px-4 pt-4">
-          <div className="flex justify-between">
-            <div className="badge relative top-0">
-              <span className="mt-2 py-1 h-12px text-md font-semibold w-12px  rounded right-1 bottom-1 px-4">
-                {weatherObject?.city.name}
-              </span>
-            </div>
-            <span className="text-lg font-bold ">6:13</span>
-          </div>
-        </h2>
-
-        <div className="flex items-center p-4">
-          <div className="flex justify-center items-center w-96">
-            {/* <svg height="20" width="20" viewBox="0 0 32 32"
-					className="fill-current h-32 w-32 text-yellow-300">
-					<path
-						d="M21.743,18.6872A6.05,6.05,0,0,0,22.8,17.6006a5.9977,5.9977,0,1,0-10.7334-4.4444,7.5568,7.5568,0,0,0-5.7158,5.0879A5.9926,5.9926,0,0,0,8,30H19a5.9854,5.9854,0,0,0,2.743-11.3128ZM18,10a4.0042,4.0042,0,0,1,4,4,3.9613,3.9613,0,0,1-.8,2.3994,4.0122,4.0122,0,0,1-.94.8917,7.5416,7.5416,0,0,0-6.1339-4.2395A3.9985,3.9985,0,0,1,18,10Zm1,18H8a3.9928,3.9928,0,0,1-.6729-7.93L7.99,19.958l.1456-.6562a5.4958,5.4958,0,0,1,10.729,0l.1464.6562.6622.1123A3.9928,3.9928,0,0,1,19,28Z"
-						transform="translate(0 .005)"></path>
-					<path d="M26 13.005H30V15.005H26z"></path>
-					<path d="M23.071 5.929H27.071V7.929H23.071z" transform="rotate(-45 25.077 6.931)"></path>
-					<path d="M17 2.005H19V6.005H17z"></path>
-					<path d="M9.929 4.929H11.929V8.929H9.929z" transform="rotate(-45 10.935 6.931)"></path>
-				</svg> */}
-          </div>
-        </div>
-        <div className="text-md pt-4 pb-4 px-4">
-          <div className="flex justify-between items-center">
-            <div className="space-y-2">
-              <span className="flex space-x-2 items-center">
-                <svg
-                  height="20"
-                  width="20"
-                  viewBox="0 0 32 32"
-                  className="fill-current"
-                >
-                  <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
-                  <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
-                </svg>{" "}
-                <span>{weatherObject?.list[0].wind.speed}m/s</span>
-              </span>
-              <span className="flex space-x-2 items-center">
-                <svg
-                  height="20"
-                  width="20"
-                  viewBox="0 0 32 32"
-                  className="fill-current"
-                >
-                  <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
-                  <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
-                </svg>{" "}
-                <span>{weatherObject?.list[0].main.humidity}%</span>
-              </span>
-            </div>
-            <div>
-              <h1 className="text-6xl"> {Math.floor(weatherObject?.list[0].main.temp)}°C </h1>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 7843a21..6e12801 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -1,69 +1,148 @@
 import React from "react";
 
-const WeatherForecast = ({weatherObject}) => {
-  return (<div className="flex justify-center">
-  <div className="card  min-w-sm max-w-sm border border-gray-100 bg-gray-50   transition-shadow test  shadow-lg hover:shadow-shadow-xl w-full bg-green-600 text-purple-50 rounded-md">
-    <h2 className="text-md mb-2 px-4 pt-4">
-      <div className="flex justify-between">
-        <div className="badge relative top-0">
-          <span className="mt-2 py-1 h-12px text-md font-semibold w-12px  rounded right-1 bottom-1 px-4">
-            {weatherObject?.city.name}
-          </span>
-        </div>
-        <span className="text-lg font-bold ">6:13</span>
-      </div>
-    </h2>
+const WeatherForecast = ({ weatherObject }) => {
+  return (
+    //main div container
+    <div className="flex justify-start mb-4 mt-4 ml-4">
+      {/* todays weather stats */}
+      <div className="flex justify-between bg-stone-300 p-4">
+        <div>
+          <h2 className="text-5xl font-bold mb-4 ">Today</h2>
 
-    <div className="flex items-center p-4">
-      <div className="flex justify-center items-center w-96">
-        {/* <svg height="20" width="20" viewBox="0 0 32 32"
-      className="fill-current h-32 w-32 text-yellow-300">
-      <path
-        d="M21.743,18.6872A6.05,6.05,0,0,0,22.8,17.6006a5.9977,5.9977,0,1,0-10.7334-4.4444,7.5568,7.5568,0,0,0-5.7158,5.0879A5.9926,5.9926,0,0,0,8,30H19a5.9854,5.9854,0,0,0,2.743-11.3128ZM18,10a4.0042,4.0042,0,0,1,4,4,3.9613,3.9613,0,0,1-.8,2.3994,4.0122,4.0122,0,0,1-.94.8917,7.5416,7.5416,0,0,0-6.1339-4.2395A3.9985,3.9985,0,0,1,18,10Zm1,18H8a3.9928,3.9928,0,0,1-.6729-7.93L7.99,19.958l.1456-.6562a5.4958,5.4958,0,0,1,10.729,0l.1464.6562.6622.1123A3.9928,3.9928,0,0,1,19,28Z"
-        transform="translate(0 .005)"></path>
-      <path d="M26 13.005H30V15.005H26z"></path>
-      <path d="M23.071 5.929H27.071V7.929H23.071z" transform="rotate(-45 25.077 6.931)"></path>
-      <path d="M17 2.005H19V6.005H17z"></path>
-      <path d="M9.929 4.929H11.929V8.929H9.929z" transform="rotate(-45 10.935 6.931)"></path>
-    </svg> */}
+          <div className="text-xl font-bold ">{weatherObject?.city.name}</div>
+          <h1 className="text-5xl font-bold mt-3">
+            {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
+          </h1>
+          <h2>{weatherObject?.list[0].weather[0].description}</h2>
+        </div>
+        <div className="pl-4 pr-6">
+          <img
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
+            viewBox="0 0 32 32"
+            className="fill-current h-40 w-40 text-yellow-300"
+          />
+        </div>
+        <div className="flex-col content-center mt-5">
+          <h3 className="font-bold">feels like:</h3>
+          <span>{Math.floor(weatherObject?.list[0].main.feels_like)}°C</span>
+          <h3 className="font-bold">humidity:</h3>
+          <span> {weatherObject?.list[0].main.humidity}%</span>
+          <h3 className="font-bold">wind speed:</h3>
+          <span>{weatherObject?.list[0].wind.speed}m/s</span>
+          <h3></h3>
+        </div>
       </div>
-    </div>
-    <div className="text-md pt-4 pb-4 px-4">
-      <div className="flex justify-between items-center">
-        <div className="space-y-2">
-          <span className="flex space-x-2 items-center">
-            <svg
-              height="20"
-              width="20"
-              viewBox="0 0 32 32"
-              className="fill-current"
-            >
-              <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
-              <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
-            </svg>{" "}
-            <span>{weatherObject?.list[0].wind.speed}m/s</span>
-          </span>
-          <span className="flex space-x-2 items-center">
-            <svg
-              height="20"
-              width="20"
-              viewBox="0 0 32 32"
-              className="fill-current"
-            >
-              <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
-              <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
-            </svg>{" "}
-            <span>{weatherObject?.list[0].main.humidity}%</span>
-          </span>
+      {/* 5 day forecast cards */}
+      <div className="flex justify-evenly bg-amber-500 ">
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
+          <p>{weatherObject?.list[8].dt_txt}</p>
+          <p> {Math.floor(weatherObject?.list[8].main.temp)}°C</p>
+          <img
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
+            viewBox="0 0 32 32"
+            className="fill-current h-40 w-40 text-yellow-300"
+          />
+          <p>{weatherObject?.list[8].weather[0].description}</p>
         </div>
-        <div>
-          <h1 className="text-6xl"> {Math.floor(weatherObject?.list[0].main.temp)}°C </h1>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
+          <p>{weatherObject?.list[16].dt_txt}</p>
+          <p> {Math.floor(weatherObject?.list[16].main.temp)}°C</p>
+          <img
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[16].weather[0].icon}@2x.png`}
+            viewBox="0 0 32 32"
+            className="fill-current h-40 w-40 text-yellow-300"
+          />
+          <p>{weatherObject?.list[16].weather[0].description}</p>
+        </div>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
+          <p>{weatherObject?.list[24].dt_txt}</p>
+          <p> {Math.floor(weatherObject?.list[24].main.temp)}°C</p>
+          <img
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[24].weather[0].icon}@2x.png`}
+            viewBox="0 0 32 32"
+            className="fill-current h-40 w-40 text-yellow-300"
+          />
+          <p>{weatherObject?.list[24].weather[0].description}</p>
+        </div>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 mr-4">
+          <p>{weatherObject?.list[32].dt_txt}</p>
+          <p> {Math.floor(weatherObject?.list[32].main.temp)}°C</p>
+          <img
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[32].weather[0].icon}@2x.png`}
+            viewBox="0 0 32 32"
+            className="fill-current h-40 w-40 text-yellow-300"
+          />
+          <p>{weatherObject?.list[32].weather[0].description}</p>
         </div>
       </div>
     </div>
-  </div>
-</div>
-)
+  );
 };
 
 export default WeatherForecast;
+<img alt="weather-image" />;
+
+{
+  /* <div className="card  min-w-sm max-w-sm border border-gray-100 bg-gray-50   transition-shadow test  shadow-lg hover:shadow-shadow-xl w-full bg-green-600 text-purple-50 rounded-md">
+        <h2 className="text-md mb-2 px-4 pt-4">
+          <div className="flex justify-between">
+            <div className="badge relative top-0">
+              <span className="mt-2 py-1 h-12px text-md font-semibold w-12px  rounded right-1 bottom-1 px-4">
+                {weatherObject?.city.name}
+              </span>
+            </div>
+            <span className="text-lg font-bold ">
+              {weatherObject?.list[0].dt_txt}
+            </span>
+          </div>
+        </h2>
+
+        <div className="flex items-center p-4">
+          <div className="flex justify-center items-center w-96">
+            <img
+              src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
+              height="20"
+              width="20"
+              viewBox="0 0 32 32"
+              className="fill-current h-32 w-32 text-yellow-300"
+            />
+          </div>
+        </div>
+        <div className="text-md pt-4 pb-4 px-4">
+          <div className="flex justify-between items-center">
+            <div className="space-y-2">
+              <span className="flex space-x-2 items-center">
+                <svg
+                  height="20"
+                  width="20"
+                  viewBox="0 0 32 32"
+                  className="fill-current"
+                >
+                  <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
+                  <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
+                </svg>{" "}
+                <span>{weatherObject?.list[0].wind.speed}m/s</span>
+              </span>
+              <span className="flex space-x-2 items-center">
+                <svg
+                  height="20"
+                  width="20"
+                  viewBox="0 0 32 32"
+                  className="fill-current"
+                >
+                  <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
+                  <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
+                </svg>{" "}
+                <span>{weatherObject?.list[0].main.humidity}%</span>
+              </span>
+            </div>
+            <div>
+              <h1 className="text-6xl">
+                {" "}
+                {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
+              </h1>
+            </div>
+          </div>
+        </div>
+      </div> */
+}

From 68f75e345eb3432033b751f2a223c8f0675cab71 Mon Sep 17 00:00:00 2001
From: Jenan <j.azzubaydi@gmail.com>
Date: Fri, 29 Jul 2022 10:46:57 +0100
Subject: [PATCH 05/15] landing-banner

---
 project-app/components/Landing/Landing.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx
index e981f0d..6e97ee4 100644
--- a/project-app/components/Landing/Landing.jsx
+++ b/project-app/components/Landing/Landing.jsx
@@ -3,13 +3,13 @@ import NavButton from './NavButton/NavButton.jsx'
 const LandingBanner = () => {
 
   return ( 
-    <div id="home" className='bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex'>
+    <div id="home" className='bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex mt-[4rem]'>
 
-    <div class="relative container mx-auto p-4 flex items-center justify-center z-10">
-      <div>
+    <div class="relative container mx-auto p-4 flex items-center justify-center z-10" >
+      <div > 
         <div class="flex flex-col justify-center items-center lg:items-start text-center">
           <h1 class="text-6xl font-semibold text-gray-900 leading-none align-center">Project Clean-Up</h1>
-          <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-row items-center justify-between space-x-8 md:ml-24">
             <NavButton buttonText="Button One"/> 
             <NavButton buttonText="Button Two"/>
           </div>

From cd2b8d1eaa79176e7dfb2b55ba7abedbce43a778 Mon Sep 17 00:00:00 2001
From: Jenan <j.azzubaydi@gmail.com>
Date: Fri, 29 Jul 2022 11:37:05 +0100
Subject: [PATCH 06/15] landing-banner fixed

---
 project-app/components/Landing/Landing.jsx | 2 +-
 project-app/components/Navbar/Navbar.jsx   | 2 +-
 project-app/styles/globals.css             | 4 ++++
 project-app/tailwind.config.js             | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx
index 6e97ee4..f78fa36 100644
--- a/project-app/components/Landing/Landing.jsx
+++ b/project-app/components/Landing/Landing.jsx
@@ -5,7 +5,7 @@ const LandingBanner = () => {
   return ( 
     <div id="home" className='bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex mt-[4rem]'>
 
-    <div class="relative container mx-auto p-4 flex items-center justify-center z-10" >
+    <div class="relative container mx-auto p-4 flex items-center justify-center z-10 h-48 w-2/4 mt-[10rem]" >
       <div > 
         <div class="flex flex-col justify-center items-center lg:items-start text-center">
           <h1 class="text-6xl font-semibold text-gray-900 leading-none align-center">Project Clean-Up</h1>
diff --git a/project-app/components/Navbar/Navbar.jsx b/project-app/components/Navbar/Navbar.jsx
index 3e89b91..dc42bd5 100644
--- a/project-app/components/Navbar/Navbar.jsx
+++ b/project-app/components/Navbar/Navbar.jsx
@@ -54,7 +54,7 @@ const Navbar = () => {
   );
 
   return (
-    <div className="fixed">
+    <div className="fixed z-20">
       <div className=" flex justify-between w-[100vw] bg-[#004F54] text-[white] ml-[0px] px-[2em] py-[2em]">
         <div>Logo</div>
         <Link href="#home">
diff --git a/project-app/styles/globals.css b/project-app/styles/globals.css
index f9750d4..7e8f660 100644
--- a/project-app/styles/globals.css
+++ b/project-app/styles/globals.css
@@ -18,4 +18,8 @@ body{
 img {
   border: none;
 }
+.hero-background{
+  width: 100%;
+  height:auto
+}
 
diff --git a/project-app/tailwind.config.js b/project-app/tailwind.config.js
index 19cfc68..f4cb967 100644
--- a/project-app/tailwind.config.js
+++ b/project-app/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
     extend: {
       backgroundImage: {
         'hero-background': "url('/hero-background.png')",
+       
       }
     },
   },

From d05fcd16f59a72845862d51624a0dad7f330d6ce Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Fri, 29 Jul 2022 12:24:04 +0100
Subject: [PATCH 07/15] weather forecast logic is complete, styling started

---
 project-app/.eslintrc.json                    |  2 +-
 project-app/.gitignore                        |  1 +
 project-app/components/Weather/Weather.jsx    |  9 +++-
 .../components/Weather/WeatherForecast.jsx    | 44 +++++++++++--------
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/project-app/.eslintrc.json b/project-app/.eslintrc.json
index bffb357..0ad09f5 100644
--- a/project-app/.eslintrc.json
+++ b/project-app/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel","next/core-web-vitals"]
 }
diff --git a/project-app/.gitignore b/project-app/.gitignore
index f83394f..efbacb8 100644
--- a/project-app/.gitignore
+++ b/project-app/.gitignore
@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.babelrc
 
 # debug
 npm-debug.log*
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 5b4b31d..4611a6e 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -36,13 +36,18 @@ const Weather = () => {
     <div className="mt-4">
       <h1 className="text-6xl font-bold ml-4">Weather Forecast</h1>
       <div className="weather">
+        
+        <div className="flex-col justify-start">
+        
         <SearchBar
           handleChange={handleChange}
           fetchWeather={fetchWeather}
           city={city}
         />
-        <div className="flex flex-row justify-start">
-          <WeatherForecast weatherObject={weatherObject} />
+        
+          <WeatherForecast weatherObject={weatherObject} handleChange={handleChange}
+          fetchWeather={fetchWeather}
+          city={city}/>
         </div>
       </div>
     </div>
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 6e12801..284369c 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -1,16 +1,22 @@
 import React from "react";
 
+
 const WeatherForecast = ({ weatherObject }) => {
+
+ 
+
+
   return (
     //main div container
-    <div className="flex justify-start mb-4 mt-4 ml-4">
+    <div className="flex-col justify-start mb-4 mt-4 ml-4 w-3/5">
+      
       {/* todays weather stats */}
-      <div className="flex justify-between bg-stone-300 p-4">
+      <div className="flex justify-evenly bg-stone-300 p-4 ">
         <div>
           <h2 className="text-5xl font-bold mb-4 ">Today</h2>
-
+          
           <div className="text-xl font-bold ">{weatherObject?.city.name}</div>
-          <h1 className="text-5xl font-bold mt-3">
+          <h1 className="text-6xl font-bold mt-3">
             {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
           </h1>
           <h2>{weatherObject?.list[0].weather[0].description}</h2>
@@ -19,7 +25,7 @@ const WeatherForecast = ({ weatherObject }) => {
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
-            className="fill-current h-40 w-40 text-yellow-300"
+            className="fill-current h-48 w-48"
           />
         </div>
         <div className="flex-col content-center mt-5">
@@ -34,29 +40,29 @@ const WeatherForecast = ({ weatherObject }) => {
       </div>
       {/* 5 day forecast cards */}
       <div className="flex justify-evenly bg-amber-500 ">
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
-          <p>{weatherObject?.list[8].dt_txt}</p>
-          <p> {Math.floor(weatherObject?.list[8].main.temp)}°C</p>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p>{weatherObject?.list[8].dt_txt.slice(0, 10)}</p>
+          <p className="text-3xl"> {Math.floor(weatherObject?.list[8].main.temp)}°C</p>
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
+            src={`http://openweathermap.org/img/wn/${weatherObject?.list[8].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
           <p>{weatherObject?.list[8].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
-          <p>{weatherObject?.list[16].dt_txt}</p>
-          <p> {Math.floor(weatherObject?.list[16].main.temp)}°C</p>
-          <img
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p>{weatherObject?.list[16].dt_txt.slice(0, 10)}</p>
+          <p className="text-3xl"> {Math.floor(weatherObject?.list[16].main.temp)}°C</p>
+          <img 
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[16].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
           <p>{weatherObject?.list[16].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4">
-          <p>{weatherObject?.list[24].dt_txt}</p>
-          <p> {Math.floor(weatherObject?.list[24].main.temp)}°C</p>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p>{weatherObject?.list[24].dt_txt.slice(0, 10)}</p>
+          <p className="text-3xl"> {Math.floor(weatherObject?.list[24].main.temp)}°C</p>
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[24].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
@@ -64,9 +70,9 @@ const WeatherForecast = ({ weatherObject }) => {
           />
           <p>{weatherObject?.list[24].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 mr-4">
-          <p>{weatherObject?.list[32].dt_txt}</p>
-          <p> {Math.floor(weatherObject?.list[32].main.temp)}°C</p>
+        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
+          <p>{weatherObject?.list[32].dt_txt.slice(0, 10)}</p>
+          <p className="text-3xl"> {Math.floor(weatherObject?.list[32].main.temp)}°C</p>
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[32].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"

From eb2c95b901972a6bbd9ca91280a97c065e590ff7 Mon Sep 17 00:00:00 2001
From: Simran Rai <simran_rai982@outlook.com>
Date: Fri, 29 Jul 2022 12:30:33 +0100
Subject: [PATCH 08/15] statcard and stat component basic structure made,
 adding props

---
 project-app/components/Stats/StatCard.jsx | 14 +++++++
 project-app/components/Stats/Stats.jsx    | 13 ++++++
 project-app/pages/index.js                |  2 +
 project-app/public/abacus-svgrepo-com.svg | 48 ++++++++++++++++++++++
 project-app/public/people-svgrepo-com.svg |  4 ++
 project-app/public/weight-tool.svg        | 49 +++++++++++++++++++++++
 6 files changed, 130 insertions(+)
 create mode 100644 project-app/components/Stats/StatCard.jsx
 create mode 100644 project-app/public/abacus-svgrepo-com.svg
 create mode 100644 project-app/public/people-svgrepo-com.svg
 create mode 100644 project-app/public/weight-tool.svg

diff --git a/project-app/components/Stats/StatCard.jsx b/project-app/components/Stats/StatCard.jsx
new file mode 100644
index 0000000..03d1602
--- /dev/null
+++ b/project-app/components/Stats/StatCard.jsx
@@ -0,0 +1,14 @@
+import Image from "next/image";
+
+export default function StatCard({ image, number, text }) {
+  return (
+    <div className="border-[0.1rem] b-[black] flex flex-col text-center w-48 h-48 pt-6">
+      <div className="p-4 border-[0.1rem] b-[blue]">
+        <Image src={image}>
+        {/* change p to a next Image tag and pass down url as image prop */}
+        <p>{number}</p> {/* number prop goes here */}
+        <p>{text}</p> {/* text prop goes here */}
+      </div>
+    </div>
+  );
+}
diff --git a/project-app/components/Stats/Stats.jsx b/project-app/components/Stats/Stats.jsx
index e69de29..bddc125 100644
--- a/project-app/components/Stats/Stats.jsx
+++ b/project-app/components/Stats/Stats.jsx
@@ -0,0 +1,13 @@
+import StatCard from "./StatCard";
+
+export default function Stats() {
+  return (
+    <div className="p-11 border-[0.1rem] border-[red]">
+      <div className="flex justify-around items-center space-x-5 border-[0.1rem] border-[green]">
+        <StatCard number="10" text="Cleanups Started" />
+        <StatCard number="10" text="Kilograms Collected" />
+        <StatCard number="10" text="No. of Volunteers" />
+      </div>
+    </div>
+  );
+}
diff --git a/project-app/pages/index.js b/project-app/pages/index.js
index a254c45..98c97c2 100644
--- a/project-app/pages/index.js
+++ b/project-app/pages/index.js
@@ -5,6 +5,7 @@ import Navbar from "../components/Navbar/Navbar";
 import dynamic from "next/dynamic";
 import LandingBanner from "../components/Landing/Landing";
 import Weather from "../components/Weather/Weather";
+import Stats from "../components/Stats/Stats";
 
 const MapWithNoSSR = dynamic(() => import("../components/Map/Map.jsx"), {
   ssr: false,
@@ -19,6 +20,7 @@ export default function Home() {
       <div className={styles.container}>
         <Navbar />
         <LandingBanner />
+        <Stats />
         <MapWithNoSSR />
         <Weather />
       </div>
diff --git a/project-app/public/abacus-svgrepo-com.svg b/project-app/public/abacus-svgrepo-com.svg
new file mode 100644
index 0000000..344e711
--- /dev/null
+++ b/project-app/public/abacus-svgrepo-com.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="29.705px" height="29.705px" viewBox="0 0 29.705 29.705" style="enable-background:new 0 0 29.705 29.705;"
+	 xml:space="preserve">
+<g>
+	<path d="M26.593,3.515v2.418H23.54v-1.45h-1.996v1.45h-0.821v-1.45h-1.996v1.45H9.921v-1.45H7.925v1.45H7.104v-1.45H5.107v1.45
+		H3.111V3.139H0V26.19h3.111v-2.794h5.152v1.29h1.996v-1.29h0.733v1.29h1.997v-1.29h0.821v1.29h1.997v-1.29h2.539v1.29h1.996v-1.29
+		h3.641v1.29h1.996v-1.29h0.617v3.17h3.109V3.515H26.593z M15.585,15.201v1.291h-0.821v-1.291h-1.997v1.291h-0.733v-1.291h-1.996
+		v1.291H9.275v-1.291H7.279v1.291H6.457v-1.291H4.461v1.291h-1.35v-4.487h8.63v1.29h1.996v-1.29h0.822v1.29h1.996v-1.29h0.764v1.29
+		h1.996v-1.29h3.229v1.29h1.996v-1.29h2.056v4.487h-9.013v-1.289h-1.998V15.201z M5.107,6.953v1.129h1.997V6.953h0.821v1.129h1.996
+		V6.953h8.806v1.129h1.996V6.953h0.822v1.129h1.996V6.953h3.053v4.031h-2.055v-1.29h-1.996v1.29h-3.229v-1.29h-1.998v1.29h-0.762
+		v-1.29h-1.997v1.29h-0.822v-1.29H11.74v1.29H3.11V6.953H5.107z M25.977,22.375v-1.289H23.98v1.289H20.34v-1.289h-1.996v1.289
+		h-2.539v-1.289H13.81v1.289h-0.821v-1.289h-1.997v1.289h-0.733v-1.289H8.263v1.289H3.111v-4.862h1.35v1.289h1.996v-1.289h0.822
+		v1.289h1.996v-1.289h0.764v1.289h1.996v-1.289h0.733v1.289h1.997v-1.289h0.821v1.289h1.997v-1.289h9.013v4.862H25.977z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/people-svgrepo-com.svg b/project-app/public/people-svgrepo-com.svg
new file mode 100644
index 0000000..45bc942
--- /dev/null
+++ b/project-app/public/people-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.221 16.268a15.064 15.064 0 0 0 1.789 1.9C2.008 18.111 2 18.057 2 18a5.029 5.029 0 0 1 3.233-4.678 1 1 0 0 0 .175-1.784A2.968 2.968 0 0 1 4 9a2.988 2.988 0 0 1 5.022-2.2 5.951 5.951 0 0 1 2.022-.715 4.994 4.994 0 1 0-7.913 6.085 7.07 7.07 0 0 0-2.91 4.098zM23.779 16.268a7.07 7.07 0 0 0-2.91-4.1 4.994 4.994 0 1 0-7.913-6.086 5.949 5.949 0 0 1 2.022.715 2.993 2.993 0 1 1 3.614 4.74 1 1 0 0 0 .175 1.784A5.029 5.029 0 0 1 22 18c0 .057-.008.111-.01.167a15.065 15.065 0 0 0 1.789-1.899z"/>
+  <path d="M18.954 20.284a7.051 7.051 0 0 0-3.085-5.114A4.956 4.956 0 0 0 17 12a5 5 0 1 0-8.869 3.17 7.051 7.051 0 0 0-3.085 5.114 14.923 14.923 0 0 0 1.968.849C7.012 21.088 7 21.046 7 21a5.031 5.031 0 0 1 3.233-4.678 1 1 0 0 0 .175-1.785A2.964 2.964 0 0 1 9 12a3 3 0 1 1 6 0 2.964 2.964 0 0 1-1.408 2.537 1 1 0 0 0 .175 1.785A5.031 5.031 0 0 1 17 21c0 .046-.012.088-.013.133a14.919 14.919 0 0 0 1.967-.849z"/>
+</svg>
diff --git a/project-app/public/weight-tool.svg b/project-app/public/weight-tool.svg
new file mode 100644
index 0000000..37df6b3
--- /dev/null
+++ b/project-app/public/weight-tool.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
+<g>
+	<path d="M610.434,512.716l-95.988-296.691c-4.244-13.117-16.459-22.003-30.245-22.003H382.904
+		c8.211-13.563,13.028-29.399,13.028-46.379c0-49.586-40.346-89.933-89.933-89.933c-49.586,0-89.933,40.346-89.933,89.933
+		c0,16.979,4.817,32.815,13.029,46.379H127.8c-13.786,0-26.001,8.886-30.245,22.003L1.567,512.716
+		c-6.643,20.531,8.666,41.573,30.245,41.573h548.376C601.768,554.29,617.076,533.248,610.434,512.716z M258.452,147.643
+		c0-26.221,21.327-47.548,47.548-47.548c26.221,0,47.548,21.327,47.548,47.548c0,22.705-16.015,41.682-37.327,46.379H295.78
+		C274.467,189.326,258.452,170.348,258.452,147.643z M263.962,451.032l-27.475-52.756h-13.092v52.756h-31.83V320.978h31.83v50.208
+		h13.092l26.927-50.208h34.198l-35.117,62.205v0.37l37.116,67.479H263.962z M431.369,451.032h-26.557v-3.644
+		c0-2.726,0.178-5.45,0.178-5.45h-0.355c0,0-12.56,11.271-34.198,11.271c-33.294,0-63.85-24.912-63.85-67.479
+		c0-37.827,28.555-66.931,68.219-66.931c33.28,0,50.017,17.271,50.017,17.271l-15.285,23.831c0,0-13.271-11.997-31.65-11.997
+		c-27.282,0-38.375,17.462-38.375,36.73c0,24.75,17.092,39.472,37.294,39.472c15.27,0,26.362-9.449,26.362-9.449v-10.013h-18.365
+		v-27.104h46.565L431.369,451.032L431.369,451.032z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

From dd130919d09fe69d4980eaaa77ca851f999196d9 Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Fri, 29 Jul 2022 12:32:13 +0100
Subject: [PATCH 09/15] working on styling weather component

---
 project-app/components/Weather/WeatherForecast.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 284369c..2917131 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -19,7 +19,7 @@ const WeatherForecast = ({ weatherObject }) => {
           <h1 className="text-6xl font-bold mt-3">
             {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
           </h1>
-          <h2>{weatherObject?.list[0].weather[0].description}</h2>
+          <h2 className="text-xl font-bold">{weatherObject?.list[0].weather[0].description}</h2>
         </div>
         <div className="pl-4 pr-6">
           <img
@@ -31,11 +31,10 @@ const WeatherForecast = ({ weatherObject }) => {
         <div className="flex-col content-center mt-5">
           <h3 className="font-bold">feels like:</h3>
           <span>{Math.floor(weatherObject?.list[0].main.feels_like)}°C</span>
-          <h3 className="font-bold">humidity:</h3>
-          <span> {weatherObject?.list[0].main.humidity}%</span>
-          <h3 className="font-bold">wind speed:</h3>
+          <h3 className="font-bold mt-5">humidity:</h3>
+          <span > {weatherObject?.list[0].main.humidity}%</span>
+          <h3 className="font-bold mt-5">wind speed:</h3>
           <span>{weatherObject?.list[0].wind.speed}m/s</span>
-          <h3></h3>
         </div>
       </div>
       {/* 5 day forecast cards */}

From eb533c2cbcfb87227f071097e2f7cbc635f4687d Mon Sep 17 00:00:00 2001
From: BlakeLawrence <blake-lawrence@hotmail.co.uk>
Date: Fri, 29 Jul 2022 13:42:24 +0100
Subject: [PATCH 10/15] changed daily weather styling

---
 project-app/components/Weather/Weather.jsx    | 23 +++++----
 .../components/Weather/WeatherForecast.jsx    | 51 +++++++++++--------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 4611a6e..f25dccd 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -36,18 +36,19 @@ const Weather = () => {
     <div className="mt-4">
       <h1 className="text-6xl font-bold ml-4">Weather Forecast</h1>
       <div className="weather">
-        
         <div className="flex-col justify-start">
-        
-        <SearchBar
-          handleChange={handleChange}
-          fetchWeather={fetchWeather}
-          city={city}
-        />
-        
-          <WeatherForecast weatherObject={weatherObject} handleChange={handleChange}
-          fetchWeather={fetchWeather}
-          city={city}/>
+          <SearchBar
+            handleChange={handleChange}
+            fetchWeather={fetchWeather}
+            city={city}
+          />
+
+          <WeatherForecast
+            weatherObject={weatherObject}
+            handleChange={handleChange}
+            fetchWeather={fetchWeather}
+            city={city}
+          />
         </div>
       </div>
     </div>
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 2917131..c913071 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -1,25 +1,21 @@
 import React from "react";
 
-
 const WeatherForecast = ({ weatherObject }) => {
-
- 
-
-
   return (
     //main div container
     <div className="flex-col justify-start mb-4 mt-4 ml-4 w-3/5">
-      
       {/* todays weather stats */}
       <div className="flex justify-evenly bg-stone-300 p-4 ">
         <div>
-          <h2 className="text-5xl font-bold mb-4 ">Today</h2>
-          
-          <div className="text-xl font-bold ">{weatherObject?.city.name}</div>
+          <h2 className="text-5xl font-bold mb-6 mt-5">Today</h2>
+
+          <div className="text-2xl font-bold">{weatherObject?.city.name}</div>
           <h1 className="text-6xl font-bold mt-3">
             {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
           </h1>
-          <h2 className="text-xl font-bold">{weatherObject?.list[0].weather[0].description}</h2>
+          <h2 className="text-xl font-bold">
+            {weatherObject?.list[0].weather[0].description}
+          </h2>
         </div>
         <div className="pl-4 pr-6">
           <img
@@ -28,20 +24,24 @@ const WeatherForecast = ({ weatherObject }) => {
             className="fill-current h-48 w-48"
           />
         </div>
+
         <div className="flex-col content-center mt-5">
           <h3 className="font-bold">feels like:</h3>
           <span>{Math.floor(weatherObject?.list[0].main.feels_like)}°C</span>
           <h3 className="font-bold mt-5">humidity:</h3>
-          <span > {weatherObject?.list[0].main.humidity}%</span>
+          <span> {weatherObject?.list[0].main.humidity}%</span>
           <h3 className="font-bold mt-5">wind speed:</h3>
           <span>{weatherObject?.list[0].wind.speed}m/s</span>
         </div>
       </div>
       {/* 5 day forecast cards */}
-      <div className="flex justify-evenly bg-amber-500 ">
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+      <div className="flex justify-evenly bg-stone-300 ">
+        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
           <p>{weatherObject?.list[8].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl"> {Math.floor(weatherObject?.list[8].main.temp)}°C</p>
+          <p className="text-3xl">
+            {" "}
+            {Math.floor(weatherObject?.list[8].main.temp)}°C
+          </p>
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[8].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
@@ -49,19 +49,25 @@ const WeatherForecast = ({ weatherObject }) => {
           />
           <p>{weatherObject?.list[8].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+        <div className="flex-col shadow-lg rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
           <p>{weatherObject?.list[16].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl"> {Math.floor(weatherObject?.list[16].main.temp)}°C</p>
-          <img 
+          <p className="text-3xl">
+            {" "}
+            {Math.floor(weatherObject?.list[16].main.temp)}°C
+          </p>
+          <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[16].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
           <p>{weatherObject?.list[16].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
+        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
           <p>{weatherObject?.list[24].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl"> {Math.floor(weatherObject?.list[24].main.temp)}°C</p>
+          <p className="text-3xl">
+            {" "}
+            {Math.floor(weatherObject?.list[24].main.temp)}°C
+          </p>
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[24].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
@@ -69,9 +75,12 @@ const WeatherForecast = ({ weatherObject }) => {
           />
           <p>{weatherObject?.list[24].weather[0].description}</p>
         </div>
-        <div className="flex-col border rounded mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
+        <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 mr-4 flex justify-evenly items-center text-xl font-bold mb-4">
           <p>{weatherObject?.list[32].dt_txt.slice(0, 10)}</p>
-          <p className="text-3xl"> {Math.floor(weatherObject?.list[32].main.temp)}°C</p>
+          <p className="text-3xl">
+            {" "}
+            {Math.floor(weatherObject?.list[32].main.temp)}°C
+          </p>
           <img
             src={`http://openweathermap.org/img/wn/${weatherObject?.list[32].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"

From 8eb42cc59a793b194624d7439b72096d74e6dc00 Mon Sep 17 00:00:00 2001
From: Emma <e.e.gill@outlook.com>
Date: Fri, 29 Jul 2022 14:10:51 +0100
Subject: [PATCH 11/15] Stats section completed, until back-end in place.

---
 project-app/components/Stats/StatCard.jsx     |  9 +-
 project-app/components/Stats/Stats.jsx        | 10 +-
 ...abacus-svgrepo-com.svg => icon-abacus.svg} | 96 +++++++++---------
 ...people-svgrepo-com.svg => icon-people.svg} |  2 +-
 .../{weight-tool.svg => icon-weight.svg}      | 98 +++++++++----------
 5 files changed, 107 insertions(+), 108 deletions(-)
 rename project-app/public/{abacus-svgrepo-com.svg => icon-abacus.svg} (94%)
 rename project-app/public/{people-svgrepo-com.svg => icon-people.svg} (95%)
 rename project-app/public/{weight-tool.svg => icon-weight.svg} (94%)

diff --git a/project-app/components/Stats/StatCard.jsx b/project-app/components/Stats/StatCard.jsx
index 03d1602..112796f 100644
--- a/project-app/components/Stats/StatCard.jsx
+++ b/project-app/components/Stats/StatCard.jsx
@@ -2,11 +2,10 @@ import Image from "next/image";
 
 export default function StatCard({ image, number, text }) {
   return (
-    <div className="border-[0.1rem] b-[black] flex flex-col text-center w-48 h-48 pt-6">
-      <div className="p-4 border-[0.1rem] b-[blue]">
-        <Image src={image}>
-        {/* change p to a next Image tag and pass down url as image prop */}
-        <p>{number}</p> {/* number prop goes here */}
+    <div className="flex flex-col text-center w-48 h-48 shadow-lg">
+      <div className="p-2 text-[#FF9505] text-lg font-bold">
+        <Image src={image} width={75} height={75}/>
+        <p className="text-2xl m-0">{number}</p> {/* number prop goes here */}
         <p>{text}</p> {/* text prop goes here */}
       </div>
     </div>
diff --git a/project-app/components/Stats/Stats.jsx b/project-app/components/Stats/Stats.jsx
index bddc125..ffa9dd5 100644
--- a/project-app/components/Stats/Stats.jsx
+++ b/project-app/components/Stats/Stats.jsx
@@ -2,11 +2,11 @@ import StatCard from "./StatCard";
 
 export default function Stats() {
   return (
-    <div className="p-11 border-[0.1rem] border-[red]">
-      <div className="flex justify-around items-center space-x-5 border-[0.1rem] border-[green]">
-        <StatCard number="10" text="Cleanups Started" />
-        <StatCard number="10" text="Kilograms Collected" />
-        <StatCard number="10" text="No. of Volunteers" />
+    <div className="p-11">
+      <div className="flex justify-around items-center space-x-5">
+        <StatCard number="10" text="Cleanups Started" image="/icon-abacus.svg"/>
+        <StatCard number="10" text="Kilograms Collected" image="/icon-weight.svg"/>
+        <StatCard number="10" text="No. of Volunteers" image="/icon-people.svg"/>
       </div>
     </div>
   );
diff --git a/project-app/public/abacus-svgrepo-com.svg b/project-app/public/icon-abacus.svg
similarity index 94%
rename from project-app/public/abacus-svgrepo-com.svg
rename to project-app/public/icon-abacus.svg
index 344e711..5e5e5cd 100644
--- a/project-app/public/abacus-svgrepo-com.svg
+++ b/project-app/public/icon-abacus.svg
@@ -1,48 +1,48 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="29.705px" height="29.705px" viewBox="0 0 29.705 29.705" style="enable-background:new 0 0 29.705 29.705;"
-	 xml:space="preserve">
-<g>
-	<path d="M26.593,3.515v2.418H23.54v-1.45h-1.996v1.45h-0.821v-1.45h-1.996v1.45H9.921v-1.45H7.925v1.45H7.104v-1.45H5.107v1.45
-		H3.111V3.139H0V26.19h3.111v-2.794h5.152v1.29h1.996v-1.29h0.733v1.29h1.997v-1.29h0.821v1.29h1.997v-1.29h2.539v1.29h1.996v-1.29
-		h3.641v1.29h1.996v-1.29h0.617v3.17h3.109V3.515H26.593z M15.585,15.201v1.291h-0.821v-1.291h-1.997v1.291h-0.733v-1.291h-1.996
-		v1.291H9.275v-1.291H7.279v1.291H6.457v-1.291H4.461v1.291h-1.35v-4.487h8.63v1.29h1.996v-1.29h0.822v1.29h1.996v-1.29h0.764v1.29
-		h1.996v-1.29h3.229v1.29h1.996v-1.29h2.056v4.487h-9.013v-1.289h-1.998V15.201z M5.107,6.953v1.129h1.997V6.953h0.821v1.129h1.996
-		V6.953h8.806v1.129h1.996V6.953h0.822v1.129h1.996V6.953h3.053v4.031h-2.055v-1.29h-1.996v1.29h-3.229v-1.29h-1.998v1.29h-0.762
-		v-1.29h-1.997v1.29h-0.822v-1.29H11.74v1.29H3.11V6.953H5.107z M25.977,22.375v-1.289H23.98v1.289H20.34v-1.289h-1.996v1.289
-		h-2.539v-1.289H13.81v1.289h-0.821v-1.289h-1.997v1.289h-0.733v-1.289H8.263v1.289H3.111v-4.862h1.35v1.289h1.996v-1.289h0.822
-		v1.289h1.996v-1.289h0.764v1.289h1.996v-1.289h0.733v1.289h1.997v-1.289h0.821v1.289h1.997v-1.289h9.013v4.862H25.977z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="29.705px" height="29.705px" viewBox="0 0 29.705 29.705" style="enable-background:new 0 0 29.705 29.705; fill: #FF9505"
+	 xml:space="preserve">
+<g>
+	<path d="M26.593,3.515v2.418H23.54v-1.45h-1.996v1.45h-0.821v-1.45h-1.996v1.45H9.921v-1.45H7.925v1.45H7.104v-1.45H5.107v1.45
+		H3.111V3.139H0V26.19h3.111v-2.794h5.152v1.29h1.996v-1.29h0.733v1.29h1.997v-1.29h0.821v1.29h1.997v-1.29h2.539v1.29h1.996v-1.29
+		h3.641v1.29h1.996v-1.29h0.617v3.17h3.109V3.515H26.593z M15.585,15.201v1.291h-0.821v-1.291h-1.997v1.291h-0.733v-1.291h-1.996
+		v1.291H9.275v-1.291H7.279v1.291H6.457v-1.291H4.461v1.291h-1.35v-4.487h8.63v1.29h1.996v-1.29h0.822v1.29h1.996v-1.29h0.764v1.29
+		h1.996v-1.29h3.229v1.29h1.996v-1.29h2.056v4.487h-9.013v-1.289h-1.998V15.201z M5.107,6.953v1.129h1.997V6.953h0.821v1.129h1.996
+		V6.953h8.806v1.129h1.996V6.953h0.822v1.129h1.996V6.953h3.053v4.031h-2.055v-1.29h-1.996v1.29h-3.229v-1.29h-1.998v1.29h-0.762
+		v-1.29h-1.997v1.29h-0.822v-1.29H11.74v1.29H3.11V6.953H5.107z M25.977,22.375v-1.289H23.98v1.289H20.34v-1.289h-1.996v1.289
+		h-2.539v-1.289H13.81v1.289h-0.821v-1.289h-1.997v1.289h-0.733v-1.289H8.263v1.289H3.111v-4.862h1.35v1.289h1.996v-1.289h0.822
+		v1.289h1.996v-1.289h0.764v1.289h1.996v-1.289h0.733v1.289h1.997v-1.289h0.821v1.289h1.997v-1.289h9.013v4.862H25.977z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/project-app/public/people-svgrepo-com.svg b/project-app/public/icon-people.svg
similarity index 95%
rename from project-app/public/people-svgrepo-com.svg
rename to project-app/public/icon-people.svg
index 45bc942..06bc382 100644
--- a/project-app/public/people-svgrepo-com.svg
+++ b/project-app/public/icon-people.svg
@@ -1,4 +1,4 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill: #FF9505">
   <path d="M.221 16.268a15.064 15.064 0 0 0 1.789 1.9C2.008 18.111 2 18.057 2 18a5.029 5.029 0 0 1 3.233-4.678 1 1 0 0 0 .175-1.784A2.968 2.968 0 0 1 4 9a2.988 2.988 0 0 1 5.022-2.2 5.951 5.951 0 0 1 2.022-.715 4.994 4.994 0 1 0-7.913 6.085 7.07 7.07 0 0 0-2.91 4.098zM23.779 16.268a7.07 7.07 0 0 0-2.91-4.1 4.994 4.994 0 1 0-7.913-6.086 5.949 5.949 0 0 1 2.022.715 2.993 2.993 0 1 1 3.614 4.74 1 1 0 0 0 .175 1.784A5.029 5.029 0 0 1 22 18c0 .057-.008.111-.01.167a15.065 15.065 0 0 0 1.789-1.899z"/>
   <path d="M18.954 20.284a7.051 7.051 0 0 0-3.085-5.114A4.956 4.956 0 0 0 17 12a5 5 0 1 0-8.869 3.17 7.051 7.051 0 0 0-3.085 5.114 14.923 14.923 0 0 0 1.968.849C7.012 21.088 7 21.046 7 21a5.031 5.031 0 0 1 3.233-4.678 1 1 0 0 0 .175-1.785A2.964 2.964 0 0 1 9 12a3 3 0 1 1 6 0 2.964 2.964 0 0 1-1.408 2.537 1 1 0 0 0 .175 1.785A5.031 5.031 0 0 1 17 21c0 .046-.012.088-.013.133a14.919 14.919 0 0 0 1.967-.849z"/>
 </svg>
diff --git a/project-app/public/weight-tool.svg b/project-app/public/icon-weight.svg
similarity index 94%
rename from project-app/public/weight-tool.svg
rename to project-app/public/icon-weight.svg
index 37df6b3..b63b44f 100644
--- a/project-app/public/weight-tool.svg
+++ b/project-app/public/icon-weight.svg
@@ -1,49 +1,49 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
-<g>
-	<path d="M610.434,512.716l-95.988-296.691c-4.244-13.117-16.459-22.003-30.245-22.003H382.904
-		c8.211-13.563,13.028-29.399,13.028-46.379c0-49.586-40.346-89.933-89.933-89.933c-49.586,0-89.933,40.346-89.933,89.933
-		c0,16.979,4.817,32.815,13.029,46.379H127.8c-13.786,0-26.001,8.886-30.245,22.003L1.567,512.716
-		c-6.643,20.531,8.666,41.573,30.245,41.573h548.376C601.768,554.29,617.076,533.248,610.434,512.716z M258.452,147.643
-		c0-26.221,21.327-47.548,47.548-47.548c26.221,0,47.548,21.327,47.548,47.548c0,22.705-16.015,41.682-37.327,46.379H295.78
-		C274.467,189.326,258.452,170.348,258.452,147.643z M263.962,451.032l-27.475-52.756h-13.092v52.756h-31.83V320.978h31.83v50.208
-		h13.092l26.927-50.208h34.198l-35.117,62.205v0.37l37.116,67.479H263.962z M431.369,451.032h-26.557v-3.644
-		c0-2.726,0.178-5.45,0.178-5.45h-0.355c0,0-12.56,11.271-34.198,11.271c-33.294,0-63.85-24.912-63.85-67.479
-		c0-37.827,28.555-66.931,68.219-66.931c33.28,0,50.017,17.271,50.017,17.271l-15.285,23.831c0,0-13.271-11.997-31.65-11.997
-		c-27.282,0-38.375,17.462-38.375,36.73c0,24.75,17.092,39.472,37.294,39.472c15.27,0,26.362-9.449,26.362-9.449v-10.013h-18.365
-		v-27.104h46.565L431.369,451.032L431.369,451.032z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612; fill: #FF9505" xml:space="preserve">
+<g>
+	<path d="M610.434,512.716l-95.988-296.691c-4.244-13.117-16.459-22.003-30.245-22.003H382.904
+		c8.211-13.563,13.028-29.399,13.028-46.379c0-49.586-40.346-89.933-89.933-89.933c-49.586,0-89.933,40.346-89.933,89.933
+		c0,16.979,4.817,32.815,13.029,46.379H127.8c-13.786,0-26.001,8.886-30.245,22.003L1.567,512.716
+		c-6.643,20.531,8.666,41.573,30.245,41.573h548.376C601.768,554.29,617.076,533.248,610.434,512.716z M258.452,147.643
+		c0-26.221,21.327-47.548,47.548-47.548c26.221,0,47.548,21.327,47.548,47.548c0,22.705-16.015,41.682-37.327,46.379H295.78
+		C274.467,189.326,258.452,170.348,258.452,147.643z M263.962,451.032l-27.475-52.756h-13.092v52.756h-31.83V320.978h31.83v50.208
+		h13.092l26.927-50.208h34.198l-35.117,62.205v0.37l37.116,67.479H263.962z M431.369,451.032h-26.557v-3.644
+		c0-2.726,0.178-5.45,0.178-5.45h-0.355c0,0-12.56,11.271-34.198,11.271c-33.294,0-63.85-24.912-63.85-67.479
+		c0-37.827,28.555-66.931,68.219-66.931c33.28,0,50.017,17.271,50.017,17.271l-15.285,23.831c0,0-13.271-11.997-31.65-11.997
+		c-27.282,0-38.375,17.462-38.375,36.73c0,24.75,17.092,39.472,37.294,39.472c15.27,0,26.362-9.449,26.362-9.449v-10.013h-18.365
+		v-27.104h46.565L431.369,451.032L431.369,451.032z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

From 764304119b7f7357064e033c95cc419857cdb34f Mon Sep 17 00:00:00 2001
From: BlakeLawrence <blake-lawrence@hotmail.co.uk>
Date: Fri, 29 Jul 2022 14:14:29 +0100
Subject: [PATCH 12/15] furtehr weather styling and layout completed

---
 project-app/components/Weather/SearchBar.jsx  |  2 +-
 project-app/components/Weather/Weather.jsx    |  3 +-
 .../components/Weather/WeatherForecast.jsx    | 72 +------------------
 3 files changed, 5 insertions(+), 72 deletions(-)

diff --git a/project-app/components/Weather/SearchBar.jsx b/project-app/components/Weather/SearchBar.jsx
index 80c966f..8245ebd 100644
--- a/project-app/components/Weather/SearchBar.jsx
+++ b/project-app/components/Weather/SearchBar.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const SearchBar = ({ fetchWeather, handleChange, city }) => {
   return (
-    <div className="w-80 ml-4">
+    <div className="w-80 ml-28">
       <label
         htmlFor="default-search"
         className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index f25dccd..a4a3335 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -36,13 +36,12 @@ const Weather = () => {
     <div className="mt-4">
       <h1 className="text-6xl font-bold ml-4">Weather Forecast</h1>
       <div className="weather">
-        <div className="flex-col justify-start">
+        <div>
           <SearchBar
             handleChange={handleChange}
             fetchWeather={fetchWeather}
             city={city}
           />
-
           <WeatherForecast
             weatherObject={weatherObject}
             handleChange={handleChange}
diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index c913071..6dc393b 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -3,9 +3,9 @@ import React from "react";
 const WeatherForecast = ({ weatherObject }) => {
   return (
     //main div container
-    <div className="flex-col justify-start mb-4 mt-4 ml-4 w-3/5">
+    <div className="flex justify-evenly mb-4 mt-4 ml-4 ">
       {/* todays weather stats */}
-      <div className="flex justify-evenly bg-stone-300 p-4 ">
+      <div className="flex justify-evenly rounded bg-stone-300 p-2  w-2/5">
         <div>
           <h2 className="text-5xl font-bold mb-6 mt-5">Today</h2>
 
@@ -35,7 +35,7 @@ const WeatherForecast = ({ weatherObject }) => {
         </div>
       </div>
       {/* 5 day forecast cards */}
-      <div className="flex justify-evenly bg-stone-300 ">
+      <div className="flex justify-between rounded bg-stone-300 ">
         <div className="flex-col rounded shadow-lg mt-4 mb-4 w-48 p-4 ml-4 flex justify-evenly items-center text-xl font-bold mb-4">
           <p>{weatherObject?.list[8].dt_txt.slice(0, 10)}</p>
           <p className="text-3xl">
@@ -94,69 +94,3 @@ const WeatherForecast = ({ weatherObject }) => {
 };
 
 export default WeatherForecast;
-<img alt="weather-image" />;
-
-{
-  /* <div className="card  min-w-sm max-w-sm border border-gray-100 bg-gray-50   transition-shadow test  shadow-lg hover:shadow-shadow-xl w-full bg-green-600 text-purple-50 rounded-md">
-        <h2 className="text-md mb-2 px-4 pt-4">
-          <div className="flex justify-between">
-            <div className="badge relative top-0">
-              <span className="mt-2 py-1 h-12px text-md font-semibold w-12px  rounded right-1 bottom-1 px-4">
-                {weatherObject?.city.name}
-              </span>
-            </div>
-            <span className="text-lg font-bold ">
-              {weatherObject?.list[0].dt_txt}
-            </span>
-          </div>
-        </h2>
-
-        <div className="flex items-center p-4">
-          <div className="flex justify-center items-center w-96">
-            <img
-              src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
-              height="20"
-              width="20"
-              viewBox="0 0 32 32"
-              className="fill-current h-32 w-32 text-yellow-300"
-            />
-          </div>
-        </div>
-        <div className="text-md pt-4 pb-4 px-4">
-          <div className="flex justify-between items-center">
-            <div className="space-y-2">
-              <span className="flex space-x-2 items-center">
-                <svg
-                  height="20"
-                  width="20"
-                  viewBox="0 0 32 32"
-                  className="fill-current"
-                >
-                  <path d="M13,30a5.0057,5.0057,0,0,1-5-5h2a3,3,0,1,0,3-3H4V20h9a5,5,0,0,1,0,10Z"></path>
-                  <path d="M25 25a5.0057 5.0057 0 01-5-5h2a3 3 0 103-3H2V15H25a5 5 0 010 10zM21 12H6V10H21a3 3 0 10-3-3H16a5 5 0 115 5z"></path>
-                </svg>{" "}
-                <span>{weatherObject?.list[0].wind.speed}m/s</span>
-              </span>
-              <span className="flex space-x-2 items-center">
-                <svg
-                  height="20"
-                  width="20"
-                  viewBox="0 0 32 32"
-                  className="fill-current"
-                >
-                  <path d="M16,24V22a3.2965,3.2965,0,0,0,3-3h2A5.2668,5.2668,0,0,1,16,24Z"></path>
-                  <path d="M16,28a9.0114,9.0114,0,0,1-9-9,9.9843,9.9843,0,0,1,1.4941-4.9554L15.1528,3.4367a1.04,1.04,0,0,1,1.6944,0l6.6289,10.5564A10.0633,10.0633,0,0,1,25,19,9.0114,9.0114,0,0,1,16,28ZM16,5.8483l-5.7817,9.2079A7.9771,7.9771,0,0,0,9,19a7,7,0,0,0,14,0,8.0615,8.0615,0,0,0-1.248-3.9953Z"></path>
-                </svg>{" "}
-                <span>{weatherObject?.list[0].main.humidity}%</span>
-              </span>
-            </div>
-            <div>
-              <h1 className="text-6xl">
-                {" "}
-                {Math.floor(weatherObject?.list[0].main.temp)}°C{" "}
-              </h1>
-            </div>
-          </div>
-        </div>
-      </div> */
-}

From 3215ca4ca0d021087ce933e7877d0d7e487c3f94 Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Fri, 29 Jul 2022 15:24:13 +0100
Subject: [PATCH 13/15] created a weather requirements component, skeleton done

---
 project-app/components/Weather/Weather.jsx    |  2 ++
 .../components/Weather/WeatherReqs.jsx        | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 project-app/components/Weather/WeatherReqs.jsx

diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index a4a3335..573ea8a 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 
 import SearchBar from "./SearchBar";
 import WeatherForecast from "./WeatherForecast";
+import WeatherReqs from "./WeatherReqs";
 
 const Weather = () => {
   const [weatherObject, setWeatherObject] = useState();
@@ -50,6 +51,7 @@ const Weather = () => {
           />
         </div>
       </div>
+      <WeatherReqs/>
     </div>
   );
 };
diff --git a/project-app/components/Weather/WeatherReqs.jsx b/project-app/components/Weather/WeatherReqs.jsx
new file mode 100644
index 0000000..03f71dc
--- /dev/null
+++ b/project-app/components/Weather/WeatherReqs.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+const WeatherReqs = () => {
+  return (
+    <div className='bg-blue-300 ml-4 mr-4 '>
+        <h1 className='text-4xl font-bold ml-4'>Weather Requirements</h1>
+        <div className='flex justify-evenly'>
+        <div>
+            
+            <h2 className='text-2xl font-bold ml-4'>Hot weather</h2>
+            <p className='ml-4'>For hotter weather here are some things we recommend:</p>
+                <ul className='ml-4'>
+                    <li>Sun-screen</li>
+                    <li>Hat</li>
+                    <li>Sunglasses</li>
+                    <li>Water</li>
+                </ul>
+        </div>
+        <div>
+            <h2 className='text-2xl font-bold ml-4'>Cold weather</h2>
+            <p className='ml-4'>For colder weather here are some things we recommend:</p>
+            <ul className='ml-4'>
+                <li>Warm headwear</li>
+                <li>Jacket</li>
+                <li>Gloves</li>
+                <li>Water-proof boots</li>
+                <li>Thick socks</li>
+            </ul>
+            
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default WeatherReqs
\ No newline at end of file

From d23ceedc74fb10e4ad6b959b1efe83a47af828d2 Mon Sep 17 00:00:00 2001
From: BlakeLawrence <blake-lawrence@hotmail.co.uk>
Date: Fri, 29 Jul 2022 15:36:46 +0100
Subject: [PATCH 14/15] added id to weather component

---
 project-app/components/Landing/Landing.jsx | 36 ++++++++++++----------
 project-app/components/Weather/Weather.jsx |  8 ++---
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx
index f78fa36..9b0c34d 100644
--- a/project-app/components/Landing/Landing.jsx
+++ b/project-app/components/Landing/Landing.jsx
@@ -1,24 +1,26 @@
-import NavButton from './NavButton/NavButton.jsx'
+import NavButton from "./NavButton/NavButton.jsx";
 
 const LandingBanner = () => {
-
-  return ( 
-    <div id="home" className='bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex mt-[4rem]'>
-
-    <div class="relative container mx-auto p-4 flex items-center justify-center z-10 h-48 w-2/4 mt-[10rem]" >
-      <div > 
-        <div class="flex flex-col justify-center items-center lg:items-start text-center">
-          <h1 class="text-6xl font-semibold text-gray-900 leading-none align-center">Project Clean-Up</h1>
-          <div class="flex flex-row items-center justify-between space-x-8 md:ml-24">
-            <NavButton buttonText="Button One"/> 
-            <NavButton buttonText="Button Two"/>
+  return (
+    <div
+      id="home"
+      className="bg-hero-background min-h-screen hero-image bg-right-bottom bg-cover flex mt-[4rem]"
+    >
+      <div className="relative container mx-auto p-4 flex items-center justify-center z-10 h-48 w-2/4 mt-[10rem]">
+        <div>
+          <div className="flex flex-col justify-center items-center lg:items-start text-center">
+            <h1 className="text-6xl font-semibold text-gray-900 leading-none align-center">
+              Project Clean-Up
+            </h1>
+            <div className="flex flex-row items-center justify-between space-x-8 md:ml-24">
+              <NavButton buttonText="Button One" />
+              <NavButton buttonText="Button Two" />
+            </div>
           </div>
         </div>
       </div>
-    </div> 
-  </div> 
-    );
+    </div>
+  );
+};
 
-}
- 
 export default LandingBanner;
diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx
index 573ea8a..6eca7bd 100644
--- a/project-app/components/Weather/Weather.jsx
+++ b/project-app/components/Weather/Weather.jsx
@@ -26,7 +26,7 @@ const Weather = () => {
     console.log(data);
     setWeatherObject(data);
     //uncomment the below city State after development stage - means each time you make a change, props cant be found
-    // setCity("");
+    setCity("");
   }
 
   useEffect(() => {
@@ -34,8 +34,8 @@ const Weather = () => {
   }, []);
 
   return (
-    <div className="mt-4">
-      <h1 className="text-6xl font-bold ml-4">Weather Forecast</h1>
+    <div id="weather" className="mt-4">
+      <h2 className="text-6xl font-bold ml-4">Weather Forecast</h2>
       <div className="weather">
         <div>
           <SearchBar
@@ -51,7 +51,7 @@ const Weather = () => {
           />
         </div>
       </div>
-      <WeatherReqs/>
+      <WeatherReqs />
     </div>
   );
 };

From 3ae035e6abe21181a10c76c81342c9eafab9073b Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Fri, 29 Jul 2022 15:46:14 +0100
Subject: [PATCH 15/15] added https to image links for weather

---
 project-app/components/Weather/WeatherForecast.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx
index 6dc393b..196d111 100644
--- a/project-app/components/Weather/WeatherForecast.jsx
+++ b/project-app/components/Weather/WeatherForecast.jsx
@@ -19,7 +19,7 @@ const WeatherForecast = ({ weatherObject }) => {
         </div>
         <div className="pl-4 pr-6">
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
+            src={`https://openweathermap.org/img/wn/${weatherObject?.list[0].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-48 w-48"
           />
@@ -43,7 +43,7 @@ const WeatherForecast = ({ weatherObject }) => {
             {Math.floor(weatherObject?.list[8].main.temp)}°C
           </p>
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[8].weather[0].icon}@2x.png`}
+            src={`https://openweathermap.org/img/wn/${weatherObject?.list[8].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
@@ -56,7 +56,7 @@ const WeatherForecast = ({ weatherObject }) => {
             {Math.floor(weatherObject?.list[16].main.temp)}°C
           </p>
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[16].weather[0].icon}@2x.png`}
+            src={`https://openweathermap.org/img/wn/${weatherObject?.list[16].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
@@ -69,7 +69,7 @@ const WeatherForecast = ({ weatherObject }) => {
             {Math.floor(weatherObject?.list[24].main.temp)}°C
           </p>
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[24].weather[0].icon}@2x.png`}
+            src={`https://openweathermap.org/img/wn/${weatherObject?.list[24].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />
@@ -82,7 +82,7 @@ const WeatherForecast = ({ weatherObject }) => {
             {Math.floor(weatherObject?.list[32].main.temp)}°C
           </p>
           <img
-            src={`http://openweathermap.org/img/wn/${weatherObject?.list[32].weather[0].icon}@2x.png`}
+            src={`https://openweathermap.org/img/wn/${weatherObject?.list[32].weather[0].icon}@2x.png`}
             viewBox="0 0 32 32"
             className="fill-current h-40 w-40 text-yellow-300"
           />