Embed Quote and Author to Daily Quote Website

About this Tutorial

Step by step tutorial to update random quote site to show both Quote and Author separately.  Example site: https://todayquote.carrd.co/

Quick tutorial to show you how to build a random quote site  →Here

Video Transcript

00:00 In a previous video I showed you how to create this random quote site so every time we refresh the site we get a new quote uh the back end of this is a Google sheet like this and the front end is something like card pretty simple with some code that I already wrote for you that include the H1 style and
00:18 fetching the uh Apps Script and we have to go into extensions Apps Script to create the uh basically web hook or web app that powers this but I want to show you one little change in how that may uh affect how we do everything or how to make that change.
00:36 We have this quote here and it's a single quote. It's a single piece of text from a single uh column but we have this basically two parts of this.
00:47 We have a quote itself and I want to make a little change which is going to have a lot of different things we have to do.
00:55 I want to put this all through underneath it, very specifically underneath it, and have two separate things. So let's see how we can do this.
01:05 I'm going to do this live here for you and show you all the changes. So first off we're going to make a copy of our sheet and we're going to call this quotes and authors.
01:16 We need this because we don't want to mess up the old one. We want to create a new one. So what I will do is I'll go back to my dashboard and create a new version of this.
01:28 So we're just going to make a copy of that. Well that's happening. I want to split these into two columns.
01:34 Enter column to the right. We don't need to see everything. We'll just do that and we'll do equal split. And we want to split it by uhh the hyphen.
01:47 So delimiter will be space, hyphen space. We want to get this much of that as possible. And we'll uhh uh truly think ah no.
01:56 This will be false actually. And there we go. We have our author and our quote copy paste all the way down.
02:04 And what we're going to do is command C shift command V to copy. And we're just going to do a little spot check through it all.
02:12 We see there is something else here. That's good that we're checking these. So not all of them are working. So what is this one has no author?
02:25 So we'll put unknown. Unknown. Again unknown. We have another problem down here. We will get to, which is our author is not specifically uhh this is not a hyphen right?
02:47 So we'll take all of those and we'll just do it again. We can actually, do this. I don't want to do that. I just want to go to the ones here and actually to make it easier to see we will do this.
03:08 There we go. Now we see them. But which ones have it? It doesn't matter. We will find one that does and see if it works.
03:16 So we'll split it again. So instead of we'll actually rewrite it over this. Split. Text is here. The delimiter is what I copy and pasted.
03:27 Full. There we go. Perfect. And so now we can copy paste all of these that have no nothing and see if we have anything.
03:46 From here to here. Just try that again. Copy and paste. There we go. So now we have all of our authors going to write some unknown.
04:00 Here we have to get the copy paste for the values and just put unknown for any of all there it is.
04:11 That's all cleaned up. Okay so we can actually delete this first column now and we have authors. In B column and they quote in the A column.
04:20 So let's go to our extensions. We will have to do something else here. Let's go back to our site. We have created a copy.
04:28 Let's go to it. And we're going to create two blocks. We're actually going to just do to locate it. The top one will be our quote which actually doesn't change at all.
04:37 We will need to change the uh URL here. That will be in a second. And here we need to change the URL as well.
04:45 But the question is how do we get to do this? We can only use do get once. And so how do we use, we're going to use some parameters to get a web hook so that we know where we're going to get it from.
05:00 So we can say get random quote um we want to get, we can create this and author. And instead of a random index zero we're actually going to get the value from b get zero here.
05:20 And get variable return random author. The author there. Will be one. So from the same line where Trevor random index we have we're going to get the first item which is going to be the a column and the second item which is going to be the b column here.
05:36 And we are going to return two things. We're going to return random quote array. And we need to create that array.
05:49 Variable random quote array. Thank you. Cools. First one random quote comma random author. And so we can always test this, right?
06:03 We can say uhh we're going to run this. Let's see what happens. So we're going to add a, a logger here to actually see this when we run it in here.
06:15 Great, we have a quote and we have an author. So now how do we get it in here? Well we're parameters are get random quote.
06:24 There we go, we're going to change that. So now this random quote is going to be two items. So variable random quote is actually going to be the first item here.
06:34 And variable, sorry. Random there. Variable random. Um quote will be equal random first item and then author will be random one.
06:51 Call this quote. And depending on what we're asking for we want to return different things. So in one case we want to return a quote and in another case we want to return the author.
07:08 But how do we do that? Well we can add parameters to our quote. Umm, URL that we're sending. So we can say there's some params here.
07:19 Parameters. Then we can say uh quote. Let's just say this quote. Author. Or author equals parameters. And we set the parameters.
07:38 And we can say parameters dot author. Sorry, it's going to be actually we can do URL URL dot parameter. And now we just have to put in the text author in here and we're going to get some text here.
07:58 And based on that, we- we can say if quote or author equals put that in here is equal to author.
08:11 Actually let's do quote first quote. then we can also say we can do an else here but let's just do if.
08:26 uh author. And, And we want to return the author. So now based on this parameter that we're going to give the URL, we can either get the quote or the author.
08:42 So let's look like new deployment. I'll show you how to add this parameter to our URL. Again we're going to set a web app to, access as us.
08:49 Anyone can use it. We're going to update the deployment. We're going to get a URL here. And I think once we use it, you'll see how this is so easy.
08:59 Let's use it in our, uh, if we put it in our bar, we're going to get them problems. We'll do an incognito mode.
09:06 We're not going to get any answer here. This is a problem. But we add a parameter here. We go question mark.
09:12 And we have to remember what we added as the parameters, which is, parameter author. Actually this is probably equals, let's say quote.
09:33 And there we go. We get something. But let's do, let's rename, this quote or author. Let's update that. New deployment.
09:44 Getting new URL here. And I'll show you again. Just another example. How we're going to use this in the deployment.
09:51 Thank very much. Top of the URL. Go to our incognito window. And again, we're going to add question mark. Uh quote or author.
10:02 Equals quote. There we go. And then now we have author here. We're going to get some author. Unknown. Perfect. So our URL is working.
10:19 But one weird thing that's happening is that this is absolutely random, right? We're getting an random quote. And every time we execute this web app, we're getting a random one in return.
10:30 So these authors and these quotes won't be the same. So let's do instead of getting a random one, we'll get our quote an author and we'll check if it's the date.
10:41 We'll check if it's the same day. We'll add to our uh, sheet here, date and we can do equals today and then now we want to sit.
10:55 So every- today we'll be tagged with one of these days. We will just do this. So from now on for the next year we will get a different thing and how do we set this up?
11:11 We will do here instead of quotes, instead of variable random index. So what we've done here is instead of a random getting quote author.
11:25 I'm getting the dates in the C column. I'm doing a for loop here and then we're looking at the integer of this is basically days like that every day of the year has a integer 1, 2, 3, 4, until 3, 66, 3, 65 without a leap year.
11:44 We're taking today's day, finding the integer of that, we're parsing integer, utilities, I format date, and we're using this day, d. Uh and then we're going to look for the integer of the date in the sheet.
11:57 Uh and we're comparing them and if these two We're going to reveal uh the random quote in the random author or actually this is just quote in author.
12:06 And then we're going to put them together and then we're going to return both of these at the same time.
12:11 So now instead of getting a random one every single time and we have a random quote in a random author.
12:16 That are different. We're going to get the same one every single day. Uh today we're going to get this one Ralph Waldo Emerson.
12:24 So again let's just go through the whole thing and we're going to get the new deployment now. And I will show you how to edit this in the uhh when we add when we add it to our table.
12:37 So we're going to add it here. We have our exact same uhh stuff here ht, um, iktml css. We're going to replace the web We're going to add at the end of it question mark.
12:52 I think we have to remember that it's this parameter quote or author. We want quote at the beginning quote equals quote.
13:03 We'll take it. Take all of that and we'll put it down here in this one. We'll actually title this author.
13:14 We'll replace this URL here with this one instead. Instead of quote, we'll put author. We'll replace this label with quote.
13:28 Just so we remember. Okay click done. We are going to save the changes. We're going to publish to a new one instead of random.
13:35 It's today. Today's quote. See if that exists. Today's quote. And also so today quote. Let's go with that. We'll publish these changes and let's see if it works.
13:57 We're gonna visit our site. We have today's quote. Does it show up? So I think we're having an issue because these two scripts have URL.
14:10 Got that because I went over here and saw that syntax error identifier URL has already been created. So let's rename this instead of URL.
14:20 It'll be quote URL and where we have URL here. We'll rename that quote URL. Well it done. Let's see if that helps.
14:34 I will changes and let's look at our, issue again, inspect. Mmm pen. Ah we have to change these because I think we're using this variable text as well again.
14:51 And we are using probably the same ID here. Mmm. ID quote. Yeah. And then here you probably want to change this to ID author.
15:07 Change this URL to author URL. Where is it? Umm. URL. Author URL. So now we have quote here. ID quote.
15:25 So yeah. So now we won't change the same quote to this. It's ID and the H1 has to be different.
15:30 Quote URL. Let's make sure this variable text is quote text. And then this is quote text and just see if there's any other quote text.
15:49 And then change this author author URL. Author URL. Let's change this to author text. Thank you. And change these variables to author text.
16:03 Let's save it and see if that fixes it. Hit publish again. Great. But now we're just in two different. Uh we have to do a little bit of styling.
16:16 As well. Um I think we're getting the wrong uh thing here. Let's look at our. These are flipped. Uh quote quote.
16:36 Well anyways we can flip it down here and also we need to add a hyphen. So let's do that in the The turn author.
16:55 We'll do this plus author. So we'll just add that to author. I think this is a little, I think this is flip for some reason.
17:07 But let's say let's deploy. I think we can actually save the deployment. Hmmm. Let's update that deployment. I don't think we have to change the URL.
17:26 I think it's going to be the exact same URL. You can double check here. Yep, perfect. So now we just have to refresh.
17:37 We're also going to add a bit of a space here or even a break or even another text perhaps. Just three of these.
17:52 Like done and saved just to make these a nicer. Okay we got it now because we saw that we just have to, we had to rename this quote to author.
18:04 So now all of this works together. ID author is, Everything's author URL, author text, let authors, author text here, author text, in our HTML author dot append child.
18:16 So what was happening was the quote was being appended. Each of the elements was getting in but this one was going to the quote appending child.
18:23 Now it's going to author. So now we have a quote and we have author and we have an absolute wonderful daily quote.
18:30 And now this daily quote actually will be daily. Uh it will change every single day. Anytime you refresh it it will be the same one.
18:38 And that's because. Because we're using uh this this date column now in our uh instead of getting a random one we're using this integer here just as a refresher.
18:51 Hopefully this is exciting for you and grab this URL.