create button and add the style

.env

@@ -0,0 +1,2 @@
+REACT_APP_SITE_TITLE="CYF Weather App"
+REACT_APP_API_KEY="f1423eabd2681d82efee065160102eae"

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,17 +1,40 @@
 import "./App.scss";
-import Header from "./components/Header/Header";
+import Search from "./components/Search/Search";
 import Footer from "./components/Footer/Footer";
+import CurrentWeather from "./components/CurrentWeather/CurrentWeather";
+import FutureWeather from "./components/FutureWeather/FutureWeather";
+// import WeatherInfo from "./weatherInfo.json"
+
+import { useState } from "react";
 
 //configs
 const siteTitle = process.env.REACT_APP_SITE_TITLE ?? "CYF Weather";
 
 function App() {
+
+   // A state variable to hold weather Array
+    const [weatherInfo, setWeatherInfo] = useState([])  //Initialized as an Empty Array
+console.log('This is Weather Info: ', weatherInfo);
+  if(weatherInfo.length > 0){
+    let infWeather =  weatherInfo[0].weather[0].id 
+ }
+//  <sup>o</sup>
   return (
     <div className="App">
-      <Header title={siteTitle} />
+       <Search title={siteTitle} setWeatherInfo={setWeatherInfo} />
+       <div className="weather-container "
+      //  {
+      //   true ? style={{backgroundColor: "This"}}: 
+      //  }
+       >
+        <CurrentWeather weatherInfo={weatherInfo} />
+        <FutureWeather weatherInfo={weatherInfo} />
+       </div>
+      {/* <button> FIND WEATHER</button> */}
+{/*
       <main className="c-site-main" tabIndex="0">
       </main>
-      <Footer />
+      <Footer /> */}
     </div>
   );
 }

src/App.scss

@@ -1,2 +1,25 @@
 @use "theme/utilities.scss";
 @use "theme/global.scss";
+
+
+:root {
+    --theme-color--paper:  #9CCEF4 ;
+    --theme-color--ink: #141A5B;
+    --theme-color--highlight: #fff ;
+    --theme-color--block: #759EDA;
+    --theme-color--button: #5879C7;
+    //speculative / guessed weather colours please update values
+    --weather--storm: #888;
+    --weather--drizzle: #efefef;
+    --weather--rain: #555;
+    --weather--snow: #bbb;
+    --weather--fog: #333;
+    --weather--clear: #3257ea;
+    --weather--partlycloudy: #4259b8;
+    --weather--mostlycloudy: #888;
+    }
+
+
+.weather-container {
+ background-color: var(--theme-color--paper);
+}

src/WeatherImages/WeatherImages.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import WeatherImg from "../img/weather-icons/clear.svg"
+import Storm from "../img/weather-icons/storm.svg" 
+import Drizzle from "../img/weather-icons/drizzle.svg"
+import Rain from "../img/weather-icons/rain.svg"
+import Snow from "../img/weather-icons/snow.svg"
+import Fog from "../img/weather-icons/fog.svg"
+import Clear from "../img/weather-icons/clear.svg"
+import PartlyCloudy from "../img/weather-icons/partlycloudy.svg"
+import MostlyCloudy from "../img/weather-icons/mostlycloudy.svg"
+const WeatherImages = ({infWeather}) => {
+  return (
+    <>
+    {
+        infWeather < 300 ? <img src={Storm} />
+        :  infWeather >= 300 && infWeather <= 499 ? <img 
+        src={Drizzle} /> : infWeather >= 500 && infWeather <= 599 ? <img 
+        src={Rain} /> : infWeather >= 600 && infWeather <= 699 ? <img 
+        src={Snow} /> : infWeather >= 700 && infWeather <= 799 ? <img 
+        src={Fog} /> : infWeather === 800 ? <img 
+        src={Clear} /> : infWeather === 801 ? <img 
+        src={PartlyCloudy} /> : infWeather >= 802 && infWeather <= 805 ? <img 
+        src={MostlyCloudy} /> :
+         <p>No Image Found</p> 
+    }
+    </>
+  )
+}
+
+export default WeatherImages

src/components/CurrentWeather/CurrentWeather.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import "./CurrentWeather.scss"
+// Importing Image
+import WeatherImages from '../../WeatherImages/WeatherImages'
+
+const CurrentWeather = ({weatherInfo}) => {
+
+  if(weatherInfo.length > 0){
+
+  const infWeather =  weatherInfo[0].weather[0].id 
+
+  // const WeatherIcons = (infWeather)=>{
+  //   return (
+  //   infWeather < 300 ? <img src={Storm} />
+  //   :  infWeather >= 300 && infWeather <= 499 ? <img 
+  //   src={Drizzle} /> : infWeather >= 500 && infWeather <= 599 ? <img 
+  //   src={Rain} /> : infWeather >= 600 && infWeather <= 699 ? <img 
+  //   src={Snow} /> : infWeather >= 700 && infWeather <= 799 ? <img 
+  //   src={Fog} /> : infWeather === 800 ? <img 
+  //   src={Clear} /> : infWeather === 801 ? <img 
+  //   src={PartlyCloudy} /> : infWeather >= 802 && infWeather <= 805 ? <img 
+  //   src={MostlyCloudy} /> :
+  //    <p>No Image Found</p> 
+  // )}
+  return (
+
+    <div className='current-weather-container'>
+      <div className='weather-details'>
+      <WeatherImages infWeather={infWeather}/>
+
+       <h2>{weatherInfo[0].weather[0].description}</h2>
+       <h3>Temperature {weatherInfo[0].main.temp_min} to {weatherInfo[0].main.temp_max} C</h3>
+       <p>Humidity {weatherInfo[0].main.humidity} Pressure {weatherInfo[0].main.pressure}</p>
+       </div>
+    </div>
+
+
+  )} else {
+    return (<p>Not data found</p>)
+  }
+}
+
+export default CurrentWeather

src/components/CurrentWeather/CurrentWeather.scss

@@ -0,0 +1,36 @@
+
+
+.current-weather-container {
+    display: flex;
+    justify-content: center;
+
+    .weather-details {
+        margin: 10px 0;
+        justify-content: center;
+        text-align: center;
+    }
+
+    h2 {
+        color: white;
+       text-align: center;
+       font-size: 1.5rem;
+       font-family: Raleway;
+
+    }
+    h3{
+
+        text-align: center;
+        color: var(--theme-color-ink);
+    }
+    p{
+        color: var(--theme-color-ink);
+        text-align: center;
+        font-size: 1.5rem;
+    }
+
+
+    img {
+        width: 200px;
+    }
+}
+

src/components/FutureWeather/FutureWeather.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import "./FutureWeather.scss"
+
+import SingleFutureWeather from './SingleFutureWeather'
+
+
+const FutureWeather = (props) => {
+  const {weatherInfo} = props
+
+  console.log('Future Weather Info:', weatherInfo);
+  // const newArr = weatherInfo.slice(0, 7)
+  // console.log(newArr);
+
+  // Create a Child Comp, WeatherCard. Pass Item as a prop, and sdisplay there
+  return (
+    <div className='FutureWeather'>
+        <p>FutureWeather</p>
+        <div className="weather-container" style={{display: "flex", justifyContent:"center"}}>
+      {
+        weatherInfo.length > 0 ?
+        weatherInfo.slice(1, 7).map((item) => {
+          console.log(item);
+          return (
+            <SingleFutureWeather item={item}/>
+          )
+        }) : <p>No Data</p>
+      }
+      </div>
+    </div>
+  )
+}
+
+export default FutureWeather

src/components/FutureWeather/FutureWeather.scss

@@ -0,0 +1,7 @@
+.FutureWeather {
+background-color: var(--theme-color--paper);   
+margin-bottom: 10rem;
+text-align: center;
+margin-top: 2rem;
+padding-bottom: 1rem;
+}

src/components/FutureWeather/SingleFutureWeather.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import WeatherImages from '../../WeatherImages/WeatherImages'
+
+const SingleFutureWeather = ({item}) => {
+    let infWeather = item.weather[0].id
+  return (
+    <div>
+             <p>{item.dt_txt}</p>
+            <WeatherImages infWeather={infWeather}/>
+             <p>{(item.main.temp).toFixed(2)} C</p>
+            </div>
+  )
+}
+
+export default SingleFutureWeather

src/components/Search/Search.jsx

@@ -0,0 +1,57 @@
+import React, {useState} from "react";
+import axios from "axios"
+import './Search.scss'
+
+const Search = ({title, setWeatherInfo}) => {
+    const [city, setCity] = useState("")
+
+    const API_KEY = process.env.REACT_APP_API_KEY
+    console.log('API Key:', API_KEY);
+    const API_URL = `http://api.openweathermap.org/data/2.5/forecast?q=${city}&cnt=8&units=metric&appid=${API_KEY}`
+    const handleSubmit = (e) => {
+        e.preventDefault()
+
+        //API Request using Axios
+        getWeatherInfo()
+        console.log(city);
+    }
+
+    // This function sends an API Request via Axios
+    const getWeatherInfo = async () => {
+        // axios request
+    // try {
+
+    // }
+    // catch(err){
+
+    // }
+    try {
+
+
+      const resp = await axios.get(API_URL)
+      console.log('Response:', resp);
+      setWeatherInfo(resp.data.list)
+    }
+    catch(err){
+        console.log('We have An Error');
+        console.log(err.message);
+        setWeatherInfo([])
+        alert("Something went wrong!")
+    }
+    }
+
+        return (
+        <header className="c-site-header">
+        <h1 className="c-site-header__title">{title}</h1>
+        <form onSubmit={(e) => handleSubmit(e)}>
+            {/*  */}
+            <input type="text" value={city} onChange={(e) => setCity(e.target.value)} />
+            <button>Search</button>
+        </form>
+
+    </header>
+    )
+
+
+}
+export default Search;

src/components/Search/Search.scss

@@ -0,0 +1,8 @@
+@use "../../theme/utilities.scss";
+
+
+.c-site-header {
+    background-color: var(--theme-color--block);
+}
+
+

src/theme/button.scss

@@ -0,0 +1,8 @@
+
+button {
+    appearance: none;
+    background-color: var(--theme-color--button);
+    color: var(--theme-color--ink);
+    padding: var(--theme-spacing--2);
+    text-transform: uppercase;
+    }

src/theme/global.scss

@@ -10,3 +10,4 @@
 //global html styles
 @import "./base.scss";
 @import "./invisible.scss";
+@import "./button.scss";