Web Taylor Swift Outfits (TSTET Outfit Generator)

Workflow

1. User interaction – Selecting outfits
   • When users arrive at the homepage, they can choose between visiting the contact page or starting their outfit selection journey by clicking the button with the concert leg they attended.
   • The user navigates through the eras, selecting one outfit per era. Clicking an outfit highlights the selection, automatically moving to the next era.
   • If the user changes an outfit, the selection updates dynamically in the JavaScript object, ensuring only one outfit per era is stored.
   • The selection process continues until all outfits are chosen, unlocking the “Generate” button.
   • The user clicks “Generate” to preview the final image.
2. Image composition – Displaying the selection
   • All the dresses are drawn on a Canvas.
   • The script arranges the images in a predefined layout,ensuring a structured and aesthetic composition.
3. Image download – Generating the final image
   • At this stage, they can choose to “Download” the image as a whole PNG.
   • Click “Start Over” to reset the selection and begin again.

Technical Challenges

• Data management
  Store all relevant details—including Era ID, Era name, Era leg ID, and associated outfits—within a structured JavaScript object.​ This centralizes the data, making it more manageable and accessible.​ Example:

const eras = [
    {
        discID: 6,
        name: "Reputation",
        firstLegID: 4,
        firstLegOutfits: ["Red & Black"],
        lastLegID: 5,
        lastLegOutfits: ["Red & Black", "Gold & Black"]
    }
]

• Data processing
  Filter the dataset based on the presence of the Era leg ID (whether it is undefined or contains a numerical value). Subsequently, sort the filtered data according to the user’s selection from the homepage buttons (First Leg or Second Leg). Finally, dynamically generate HTML content for each outfit corresponding to its respective Era within the JavaScript object.​
• Constructing HTML for each outfit
  Iterate over the sorted eras and their outfits to dynamically generate and insert HTML elements into the DOM.
• User interface initialization
  Ensure that the menu option for the initial Era is visible upon page load and the img title appears in grayscale, along with displaying the outfits associated with this first Era.​
• Progress bar
  Only visible on mobile devices, appears to show users how far along they are in the process. The active Era features an animation.
• User interaction
  Allow users to select only one outfit per Era, with selections dynamically updating the Canvas element to reflect the chosen outfits.​ That selection, changes the img of the active Era (menu) from grayscale to color.
• Canvas implementation
  Implement a Canvas element that dynamically loads and draws multiple images.​ Adjusts each image positions based on the selected outfits and the order of the Eras, ensuring a cohesive and visually appealing presentation.​

Results