CodePen: https://codepen.io/macksfield/pen/xxqXGjb

GitHub: https://github.com/macksfield/basic-html-starter/tree/image-carousel

Prompt: create an image carousel that cycles through images fetched from an endpoint (displaying a new image every 3 seconds), and allows the user to skip to the next/previous image The example endpoint contains images within the response as follows:

{
  data: {
    children: [
      {
        data: {
          url_overridden_by_dest: "*.jpg"
        }
      },
      ...
    ]
  }
}

Below is a mockup of what the UI should look like (the carousel should be horizontally centered, with at least some top margin): https://preview.redd.it/48tq1gbbi3d51.png?width=1686&format=png&auto=webp&s=a8addd3473d64361bb1d7d2cd566ee6dd924e3f4

Time limit: 60 minutes [actual time taken: 50 minutes]

Possible extensions

• ✔ When the user presses next/previous, make sure that the timer resets
• ✔ After the last image, make sure the image cycles back to the first
• Add image selector circles. The highlighted circle should have the same index of the current image, and the user should be able to click on a circle to jump to that image