By Published on

Fran's Food Reviews

We started having Fran give a short review of food she sampled.  Enjoy!

{{!

This JavaScript snippet dynamically generates a grid of video players on a webpage using an array of filenames. Instead of writing HTML for all 20 videos manually, the script automates the process.

Breakdown of How It Works

  • Configuration (Data Setup)

    • filePrefix: Stores the base URL pointing to an Amazon S3 bucket where the media files are hosted.
    • videoFiles: An array of 20 strings representing the name of each video topic (e.g., 'Beet-Salad', 'Filet-Mignon').
  • formatTitle(filename) Function

    • Takes hyphenated filenames like 'Alfredos-Majestic-Soup' and converts them into human-readable titles like "Alfredos Majestic Soup".
    • It splits the string by hyphens, capitalizes the first letter of each word, and joins them back together with spaces.
  • createVideoCard(filename) Function

    • Creates a new HTML <div> element with the class video-card.
    • Creates an <h3> heading populated with the formatted title.
    • Creates a <video> element with playback controls enabled.
    • Sets the video thumbnail (poster) to point to ${filePrefix}${filename}.jpg.
    • Adds a <source> element pointing to the MP4 video URL ${filePrefix}${filename}.mp4.
    • Assembles these elements together inside the card <div> and returns it.
  • Execution Loop

    • Finds the empty target container in the HTML (<div id="videoGrid">).
    • Iterates over the videoFiles array using forEach, calls createVideoCard() for every item, and appends the resulting HTML structure into #videoGrid.

End Result

When the web page loads, the script fills the <div id="videoGrid"> element with 20 distinct, fully styled video cards—complete with titles, preview images (.jpg), and playable video files (.mp4).

}}