App.js

import React, { useState, useEffect } from "react";
import "./RandomRobo.css";

function RandomRobo() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // useEffect(() => {
  //   fetch(`https://random-data-api.com/api/users/random_user?size=10`)
  //     .then((response) =>{
  //     if(!response.ok){
  //       throw new Error(
  //         `This is an HTTP error: The status is ${response.status}`
  //       )
  //     }
  //     return response.json();
  //   })

  //     .then((actualData) => console.log(actualData))
  //     .catch((err)=> {console.log(err.message);})

  // }, []);

  useEffect(() => {
    fetch(`https://random-data-api.com/api/users/random_user?size=10`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            `This is an HTTP error: The status is ${response.status}`
          );
        }
        return response.json();
      })
      .then((actualData) => {
        setData(actualData);
        setError(null);
      })

      .catch((err) => {
        setData(null);
        setError(err.message);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>RandomRobo</h1>
      {loading && <div>A moment please</div>}
      {error && (
        <div>{`There is a problem fetching the post data - ${error}`}</div>
      )}
      <ul>
        {data &&
          data.map(({ id, avatar, first_name, last_name, email }) => (
            <li key={id}>
              <div className="robofCard">
                <div class="flip-card-inner">
                  <div class="flip-card-front">
                    <img alt={first_name} src={avatar} />
                    <h3 className="Rname">
                      {first_name}
                      {last_name}
                    </h3>
                  </div>
                  <div class="flip-card-back">
                    <h1>more information</h1>
                    <div>{email}</div>
                  </div>
                </div>
              </div>
            </li>
          ))}
      </ul>
      {console.log("api")}
    </div>
  );
}

export default RandomRobo;

RandomRobo.css

.robofCard{
  width: 300px;
  height: 300px;
  margin: 20px;
  padding:10px;
  perspective: 1000px; 
  float: left;

}
.robofCard img {
  max-width: 100%;
  max-height: 80%;
}

h1{
  text-align:center;
}
ul {
  list-style-type: none;
}
.Rname{
text-align: center;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* box-shadow: 0 4px 8px 2px rgba(0,0,0,0.2); */
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.robofCard:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {

  background-color: burlywood;
  border-radius: 16%;
  Color:white;
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(185, 144, 91);
  border-radius: 16%;
  color: white;
  transform: rotateY(180deg);

}