shecodestooiq · yasminm97 · Aug 19, 2023
diff --git a/README.md b/README.md
@@ -22,3 +22,4 @@ Explore the API and add more features to your app or make it clickable to see mo
 2. there is a limit for how many requests that you can send in one day so be aware of that
 
 Please feel free to reach out if you have any questions or need further assistance.
+3553990661525460	
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Heros - API</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,9 @@
+import Home from "./pages/Home";
+import './style.css'
 function App() {
-  return <>Super Hero App</>;
+  return <>
+    <Home />
+  </>;
 }
 
 export default App;
diff --git a/src/components/HeroCard.jsx b/src/components/HeroCard.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function HeroCard({id,name,img,biography}) {
+  return (
+    <div key={id} className='hero-card'>
+        <img src={img} alt={name} />
+        <div className="content">
+            <h2>{name}</h2>
+            <p>{biography}</p>
+        </div>
+
+    </div>
+  )
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import HeroCard from '../components/HeroCard';
+
+export default function Home() {
+
+    const [heros,setHeros] = useState([]);
+    useEffect(()=>{
+        const fetchHeros = async () => {
+            const response = await fetch(
+              "https://superheroapi.com/api/3553990661525460/search/flash"
+            );
+            const jsonData = await response.json();
+            setHeros(jsonData.results); // assuming that the data is an array of heroes
+          };
+          fetchHeros();
+        }, []);
+  return (
+    <div className='heros'>
+      <h1>Heros</h1>
+      {Array.isArray(heros) &&
+        heros.map((hero) => (
+          <HeroCard id={hero.name} name={hero.name} img={hero.image.url} biography={hero.biography["full-name"]}/>
+        ))}
+    </div>
+  )
+}
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,38 @@
+body{
+    margin: 0;
+    padding: 0;
+    background: rgb(63,94,251);
+    background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);      
+}
+.heros{
+    margin: auto;
+    width: 50vw;
+    align-items: center;
+    text-align: center;
+}
+.heros h1{
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 34pt;
+    font-weight: bold;
+    letter-spacing: 3px;
+    color: #fff;
+    text-shadow: 1px 1px #000;
+}
+.hero-card{
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: aliceblue;
+    margin: 10vh auto;
+}
+.hero-card img{
+    width: 250px;
+    height: auto;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    margin-right: 5vw;
+}
+.hero-card .content{
+    flex-direction: column;
+    text-align: left;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,3 +22,4 @@ Explore the API and add more features to your app or make it clickable to see mo
		2. there is a limit for how many requests that you can send in one day so be aware of that

		Please feel free to reach out if you have any questions or need further assistance.
		3553990661525460