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

Posts with tag: Coding Challenge

50 Minute Image Carousel

Histogram Generator from Random Data

Full Stack Developer&Digital Handyman