Random Quote Generator Woes | Tiffany R. White Blog

Random Quote Generator Woes

Reading time: 6 mins

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.


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter