exercise done

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,29 @@
+import {useState, useEffect} from 'react';
+
+function Advice({handleCreateFavorite}) {
+
+    const [advice, setAdvice] = useState();
+
+
+    const getNewAdvice = () => {
+        fetch(`https://api.adviceslip.com/advice`)
+        .then(res => res.json())
+        .then(data => setAdvice(data.slip))}
+
+
+    useEffect(() => {
+        fetch(`https://api.adviceslip.com/advice`)
+        .then(res => res.json())
+        .then(data =>setAdvice(data.slip))
+    }, [])
+
+    return(
+        <>
+        <p>{advice?.advice}</p>
+        <button onClick={getNewAdvice}>Get More Advice</button>
+        <button onClick={() => handleCreateFavorite(advice)}>Save to Favourites</button>
+        </>
+    )
+
+}
+export default Advice;

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,17 @@
+
+function FavouriteSlipsList({favorites}) {
+
+return(
+    <>
+    <ul>
+        {favorites.map(advice => (
+            <p key={advice.id}>{advice.advice}</p>
+        ))}
+    </ul>
+    </>
+)
+
+}
+export default FavouriteSlipsList;
+
+

src/sections/Advice/index.jsx

@@ -1,9 +1,30 @@
+import { useState } from 'react'
+import AdviceSlip from './components/AdviceSlip.jsx'
+import FavouriteSlipsList from './components/FavouriteSlipsList.jsx'
+
+
 function AdviceSection() {
+
+const [favorites, setFavorites] = useState([])
+
+    const handleCreateFavorite = (advice) => {
+        setFavorites(oldFavorites => [...oldFavorites, advice])
+
+    }
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="advice-slip">
+        <h3>Some Advice</h3>
+        <AdviceSlip 
+        handleCreateFavorite={handleCreateFavorite}/>
+
+      </section>
+      <section className="favorite-slips-list">
+        <h3>Favourite Advice Slips</h3>
+        <FavouriteSlipsList
+        favorites={favorites} />
+      </section>
     </section>
   )
 }

src/sections/Advice/template.html

@@ -1,12 +1,12 @@
 <section>
   <h2>Advice Section</h2>
-  <section class="adivce-slip">
+  <section class="advice-slip">
     <h3>Some Advice</h3>
     <p>Always the burrito.</p>
     <button>Get More Advice</button>
     <button>Save to Favourties</button>
   </section>
-  <section class="favourtite-slips-list">
+  <section class="favorite-slips-list">
     <h3>Favourite Advice Slips</h3>
     <ul>
       <li>Measure twice, cut once.</li>

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,33 @@
+import ArtListItem from "./ArtListItem";
+import {useEffect, useState} from 'react';
+
+
+
+function ArtList () {
+    const [artList, setArtList] = useState([])
+
+    useEffect(() => {
+        fetch("https://boolean-uk-api-server.fly.dev/art")
+    .then(res => res.json())
+    .then(setArtList)
+    }, [])
+
+    return (
+        <>
+        <div className="scroll-container">
+        <ul className="art-list">
+            {artList.map(item => (
+                <ArtListItem
+                key= {item.id}
+                imageURL={item.imageURL}
+                title={item.title}
+                artist={item.artist}
+                publicationHistory={item.publicationHistory}
+            />))}
+        </ul>
+        </div>
+        </>
+    )
+
+}
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,25 @@
+
+import PublicationHistoryList from './PublicationHistoryList'
+
+
+function ArtListItem({imageURL, title, artist, publicationHistory}) {
+    return(
+        <>
+        <li>
+         <div className="frame">
+              <img
+                src={`https://boolean-uk-api-server.fly.dev/${imageURL}`}
+              />
+            </div>
+            <h3>{title}</h3>
+            <p>Artist: {artist}</p>
+            <h4>Publication History:</h4>
+            <ul>
+                <PublicationHistoryList 
+                publications={publicationHistory}/>
+            </ul>
+            </li>
+        </>
+    ) 
+}
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,11 @@
-
+function PublicationHistoryList({publications}) {
+    return (
+        <>
+        {publications.map((publication, index) => (
+            <li key={index}>
+                {publication}</li>
+        ))}
+        </>
+    )
+}
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,8 +1,10 @@
+import ArtList from './components/ArtList';
+
 function ArtsSection() {
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <ArtList />
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,29 @@
+import {useEffect, useState} from 'react';
+import UsersListItem from './UsersListItem';
+function UsersList() {
+
+    const [users, setUsers] = useState([])
+
+    useEffect(() => {
+        fetch(`https://boolean-uk-api-server.fly.dev/hannaklh/contact`)
+        .then(res => res.json())
+        .then(setUsers)
+    }, [])
+    return(
+        <>
+        <div className="scroll-container">
+            <ul className="users-list">
+                {users.map(user => (
+                    <UsersListItem
+                    key={user.id}
+                    imageURL={user.profileImage}
+                    userName={`${user.firstName} ${user.lastName}`}
+                    favoriteColor={user.favouriteColour}
+                    email={user.email}/>
+                ))}
+            </ul>
+            </div> 
+        </>
+    )
+}
+export default UsersList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,15 @@
+function UsersListItem({imageURL, userName, favoriteColor, email}) {
+    return(
+        <>
+        <li style={{ backgroundColor: favoriteColor }}>
+        <img
+          src={imageURL}
+          alt={userName}
+        />
+        <h3>Mr {userName}</h3>
+        <p>Email: {email}</p>
+      </li>
+        </>
+    ) 
+}
+export default UsersListItem;

src/sections/Users/index.jsx

@@ -1,8 +1,11 @@
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <UsersList />
     </section>
   )
 }