Random Quote Generator Woes

3 min read


I spent a lot of time looking over Chris Coyer’s magical looking Quotes on Design website. I’ve also spent a lot of time looking at its structure in Chrome Dev Tools. I’ve played around with it and I am sort of stuck.

I even went back into Free Code Camp CSS waypoints to figure out the difference between margin, padding, inline styles, and !important. I went to Stack Overflow and got some advice but the end result still wasn’t what I wanted. I uploaded my prototype but they still didn’t get it quite right. I mean, they did a really weird job of it.

I could definitely go to the Free Code Camp forums but I am hesitant to. I went to the Gitter chat and I didn’t get the right help at the time. I have been picking bits and pieces out of Chris’s website and scouring the web for more information on how to make this work. I even spent 8 hours last week solely on web development, close to 3 hours a day on the days I worked on it.


I could definitely do more but I am trying to get healthy so I am back at the gym three days a week and fitting in three hours of work is about all I can do.

Last week I was burnt out. I had worked really hard on the Random Quote Generator and working out and doing other things that I just didn’t have any energy last week and I am finding it increasingly hard to get back into it. I have bitten off way more than I could chew with this design but I am not going to scrap it. I will learn as I go. I will go back to Gitter, to the forums and see what I can get.

They Say Building is How You Learn

I am trying. I see so many of the Random Quote Generators and they are extremely simple in design. I fell in love with Chris’s design without Chris’s skill and I am paying for it.

I found some code for the random quotes that uses jQuery. Here it is:

var quoteMachine = {
    quoteArray: [],
    count: 0,
    init: function(){
        $.getJSON(\"https://crossorigin.me/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40&callback=\", function(data) {
            quoteMachine.quoteArray = data;
            $(\"#buttons\").css(\"visibility\", \"visible\");
        $(\"#newQuote\").on(\"click\", this.newQuote);
        $(\"#tweetMe\").on(\"click\", this.tweet);
    placeQuote: function(){
        $(\"#quoteContent\").html(\"<h3>\" + quoteMachine.quoteArray[quoteMachine.count].content + \"</h3>\");
        $(\"#quoteTitle\").html(\"<h4> - \" + quoteMachine.quoteArray[quoteMachine.count].title + \"</h4>\");
    newQuote: function(){
        if(quoteMachine.count < 39){
            quoteMachine.count = 0;

    tweet: function(){
        var content = quoteMachine.quoteArray[quoteMachine.count].content;
        content = content.substring(3, content.length -5);
        content = content.replace(/&#.{4};/g, \"\");
        content = encodeURIComponent(content);
        var title = quoteMachine.quoteArray[quoteMachine.count].title;
        var message = content + \" -\" + title + \"%20#randomQuote%20#FCC\";
        window.open(\"http://twitter.com/home/?status=\" + message);


Now, I am going to try to reverse engineer this to use the Quotes on Design API 4.0. There are parts of this that baffle me and parts that I understand.

Seeking Help

I don’t know when I stopped asking for help. I am always in Gitter and on the forums and just recently I stopped going and asking. I am not sure why my behavior changed— I guess I have asked for so much help and no one is giving me the answer I seek. Is the design really that complicated? I am not sure but I am starting to feel exhausted by trying this. I am not giving up but I have been sitting on it for a week. I have thought about it everyday. I have tried to troubleshoot it in my head. It has become this mini obsession and I need to finish it before school starts.

CC BY-SA 4.0 Random Quote Generator Woes by Tiffany White is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.