Mastodon

Random Quote Generator Woes

Takes 5 minutes
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.