Stoic Quote Generator

article image

Reading a lot into Stoicism recently I thought it would be great to create a quote generator as I wanted to try out CSSTransitions.

After googling Stoic API I found an NPM package that I could install, so I started with that. Digging through the node_modules folder for it, I realised it was importing a JSON file with arrays of quotes. The problem with this I found was that the author and quote for each were part of one long string. I spent a little time re-arranging the data into objects and separating out the authors and then importing the JSON file myself.

A simple app like this means I get to put a lot more emphasis on the details and the design. I searched dribbble for quotes and found a few images to take inspiration from, both by Igor Levin.

Using the colour scheme and idea for a speech bubble I created a div with a before pseudo element to act as the speech bubbles tail. The colour scheme reminded me of a festival I had been involved in and it’s original colour scheme, looking back with archive.org I managed to find the site and used the textures from it as my backgrounds.

These styles mixed with google’s ‘Roboto’ font gave me the finished look of the page.

Using CSSTransitions was, however, a little trickier. When you click for a new quote, a new element is added to the dom, before the existing one has managed to fade out. Even with delays added, it will still appear in the tree first. To rectify this, you can position the component absolutely so it appears on top of itself. This, however, means the ‘New Quote’ button would still be in the flow of the page, but the bubble would not be, sending the button to the top.  The problem being that the div takes it’s size dynamically from the quote length, so without a solid height the button below is guesswork, as a result, I swapped it to the top.