CodeYourFuture · Lunamzelo · Jan 30, 2023 · Jan 30, 2023 · Jan 30, 2023 · Jan 30, 2023
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Please **fork** and **clone** this repository.  There are instructions for how t
 Then navigate to the correct directory using the command line.
 
 Once you're in the project directory, you can run:
-```
+```bash
 npm install
 
 npm start
@@ -21,8 +21,8 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 Edit `App.js` and add a tiny change, like adding your name, to see if the change appears.
 
 Add and commit this change to git, and push it up to your remote github repo:
-```
-git add .
+```git
+git add App.js
 git commit -m "Added my name to the app"
 git push
 ```
@@ -60,12 +60,12 @@ There is a special way to show images from a React app created with create-react
 
 At the top of your component, import the image like this (remember to give it a name!)
 
-```
+```javascript
 import storm from '../img/weather-icons/storm.svg';
 ```
 
 Then later in your `<img/>` tag, use the imported value as the image source, like this:
-```
+```html
 <img src={storm} alt="storm icon" />
 ```
 
@@ -100,7 +100,7 @@ Copy all contents into a new file and add it to your project somewhere under the
 
 Import it into your react app with
 
-```
+```javascript
 import FakeWeatherData from "./data/FakeWeather.json";
 ```
 
@@ -115,7 +115,7 @@ This JSON represents weather data for **just one city**.
 It includes **an array called `list` containing the weather predicitons for the next 5 days, split into 8 x 3-hour chunks** 
 Each object inside `list` contains a `weather` array with an object that looks like this:
 
-```
+```json
 "weather": [
   {
     "id": 521,
@@ -169,7 +169,7 @@ Look at the design:
 
 - Each object inside `list` contains a `weather` array with an object that looks like this:
 
-```
+```json
 "weather": [
   {
     "id": 521,

diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,12 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>CYF Weather App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,8 @@
 import "./App.scss";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
+import FutureWeather from "./components/FutureWeather/FutureWeather";
+
 
 //configs
 const siteTitle = process.env.REACT_APP_SITE_TITLE ?? "CYF Weather";
@@ -10,7 +12,9 @@ function App() {
     <div className="App">
       <Header title={siteTitle} />
       <main className="c-site-main" tabIndex="0">
+        <FutureWeather weatherArray={[1, 2, 3, 4, 5, 6, 7]} />
       </main>
+
       <Footer />
     </div>
   );

diff --git a/src/components/FutureWeather/FutureWeather.jsx b/src/components/FutureWeather/FutureWeather.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import "./FutureWeather.scss"
+
+
+const FutureWeather = ({weatherArray}) => {
+
+  return(
+   <ul>
+    {weatherArray.map((weather) => <li>{weather} </li>)}
+    </ul>
+  )
+};
+
+export default FutureWeather;
diff --git a/src/components/FutureWeather/FutureWeather.scss b/src/components/FutureWeather/FutureWeather.scss
@@ -0,0 +1,8 @@
+ul {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--theme-spacing--6);
+}
+li {
+  list-style: none;
+}