Random Quote Generator Woes

frustrated

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.

Screenshot2016-06-26_09-42-56_PM_shrink

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; quoteMachine.placeQuote(); $("#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++; }else{ quoteMachine.count = 0; } quoteMachine.placeQuote(); }, 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); } }; quoteMachine.init();

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

frustrated

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.

Screenshot2016-06-26_09-42-56_PM_shrink

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; quoteMachine.placeQuote(); $("#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++; }else{ quoteMachine.count = 0; } quoteMachine.placeQuote(); }, 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); } }; quoteMachine.init();

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.

Subscribe to Tiffany R. White Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe