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:
- click a button to show a random quote
- click a button to tweet the quote, trimming characters as appropriate
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.
Some things that could be added are:
- a permalink to each quote (right now this happens on the /all page, as when that generates each quote it gives it an id=”#”. but would be cool to do something to solve this with address bar hashing)
- a better random (or rather, a less random) algorithm so we don’t get same quote twice in a row when cycling through
- a better way of storing all the content instead of just in that JS file (anyone got any ideas?)
- a better way of submitting quotes (though no idea how to do this without a backend)
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!