Quotes on Magic

A week or so ago I made a super simple site. I made the majority of it in a day but have been constantly tweaking it (mainly the CSS!) and adding content. It’s a site that displays a random quote about magic / a quote by a magician.

The site is now live at http://quotesonmagic.com/.

The idea comes from this challenge on freeCodeCamp, a really cool online course for learning to code. The challenge said to host on Codepen, but I’ve hosted on Github Pages (and the whole thing is here on GitHub if you want to take a look).

The challenge had these requirements:

This site has both those things. I’ve also set it so it will tag the person whose quote it is on Twitter if they’re on Twitter, by adding an extra field to the (json) list of quotes.

The whole thing is really light-weight. Just vanilla JavaScript (that great framework by that dude Brendan ;)) in one JS file, most of it being a huge object with the content. Even has space for an easter egg if you’re not on mobile. Also a reset plus a 275 line CSS file, most of which is for the cool link hover effects (from Tympanus.net). Lots of hacky CSS to get it to look nice cross-device, but it seems like it’s all working fine glitch-free. Definitely wasn’t made mobile first though. Just the old school developer style of adding more and more rules to fix things you previously broke. (Two CSS properties walk into a bar. A barstool in a totally different bar falls over.) And submit page is done all static / frontend only by using Formspree.

Some things that could be added are:

Also, the big white circle was meant to have a little reload icon in it, but I quite like how it looks as is. Supe minimal. Also also, I was going to use a random background image of fixed size using Unsplash Source, but I didn’t like the load times and I didn’t like how often it gave images I didn’t like. However, might use this idea (it’s just a single line that’s commented out at the mo) if this ever becomes a Chrome extension new tab page. (That might be a fun thing to code up? Never made a Chrome extension before).

Domain will stay up for a year or so, so if you’re reading this in 2018 and the above link doesn’t work try hitting up this link instead.

Lastly, if you have more suggestions for quotes to add please send them my way!

P