React

You can play around with this live example and add new features, styles and so much more.

Hint

Uncomment the following line:

<div className="card--text">{character.species}</div>

PS: remove {/* */}

• React
• Axios

Live Editor

function App() { const [data, setData] = useState([]); const cardStyle = { boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", padding: "12px", marginBottom: "10px", textAlign: "center", backgroundColor: "#fafafa", }; const rootStyle = { margin: "0 auto", width: "max-content", padding: "0 10px", color:"purple", fontFamily:"Verdana" }; useEffect(() => { fetch("https://finalspaceapi.com/api/v0/character?limit=5") .then((res) => res.json()) .then((data) => setData(data)); }, []); return ( <div className="root" style={rootStyle}> {data.map((character) => ( <div className="card" style={cardStyle} key={character.id}> <div className="card--image"> <img src={character.img_url} alt={character.name} />{" "} </div> <div className="card--title">{character.name}</div> {/* <div className="card--text">{character.species}</div>*/} </div> ))} </div> ); }

function App() {
  const [data, setData] = useState([]);
  const cardStyle = {
    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
    padding: "12px",
    marginBottom: "10px",
    textAlign: "center",
    backgroundColor: "#fafafa",
  };
  const rootStyle = {
    margin: "0 auto",
    width: "max-content",
    padding: "0 10px",
    color:"purple",
    fontFamily:"Verdana"
  };
  useEffect(() => {
    fetch("https://finalspaceapi.com/api/v0/character?limit=5")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);
  return (
    <div className="root" style={rootStyle}>
      {data.map((character) => (
        <div className="card" style={cardStyle} key={character.id}>
          <div className="card--image">
            <img src={character.img_url} alt={character.name} />{" "}
          </div>
          <div className="card--title">{character.name}</div>
        {/* <div className="card--text">{character.species}</div>*/}
        </div>
      ))}
    </div>
  );
}

Result