Taylor Swift Quote Randomizer

A webpage to get randomized Taylor Swift’s lyrics using HTML, CSS, JavaScript, and API.

Role

UI Designer
Front-end Developer

Time

1.5 months
(Mar - May 2022)

Tools

Figma, HTML, CSS, JS, P5, API

Overview & Live Demo

This programming project uses HTML, CSS, and JS to build a random quote generator that loads live data from an open API. The web interface is laid out using Flexbox so that it is responsive across mobile and desktop sizes. To build the generator, I followed an (extremely helpful) tutorial by Neha Soni. Taylor Swift’s lyrics/quotes are loaded from Mitanshi Kshatriya’s Taylor Swift API.

Live Demo (API loading time may vary.)
Github Repository

Disclaimer: While the API is regularly updated with newer lyrics, the tool itself has not been updated since I wrapped up this project in 2022. As a result, some of the more recent quotes (e.g., from "The Tortured Poets Department") do not have a corresponding theme and could display incorrectly.

Preview:

Process

I started by designing the web and mobile interface using Figma and translated the design to code with the help of the plug-in Anima. As I developed the webpage, I added more functions such as copying quotes to clipboard and sharing quotes to Twitter (X). I used roots and variables in CSS to create different “themes” that change according to albums and songs. To add to the enjoyment, I planned to have some animated visual effects by using Taylor Swift’s music videos as the background for some quotes, but they cannot be embedded due to copyrights. I ended up using GIFs from Giphy.com as an alternative.

Initial Figma prototype:

Snowfall Animation (beta)

My idea was to have a “unicorn” hidden in the generator: a snowfall effect would be triggered when a quote from the song Snow On The Beach by Taylor Swift and Lana Del Rey came up. The effect I chose was Snowflakes by Aatish Bhatia, available in the p5.js library. However, I had trouble triggering the animation only when the said song came up - it either appeared for all the songs or none at all. After many tries, I got the effect to work by removing the “p5.js” file that is required to run any P5 code, and then using JS to inject the file when “Snow on the Beach” came up. However, with this approach, the snowfall animation didn’t stop when users requested a new quote. The only way to stop it was to refresh the page. Also, this approach only worked locally and not when published on GitHub - so it’s not live at the moment. The code I used to inject the “p5.js” file is as follows: