Quickly Build a Daily Random Motivational Quote Website

About this Tutorial

Build a website from scratch using a little bit of Google Sheets as the backend. Using Carrd to build a html website from the data and display a random quote every time you refresh the page. All the code including the HTML embed is in the sheet below.

Video Transcript

0:01 Okay, we're going to build a website where we create a daily random motivational quote. I have this sheet here of 366 quotes and we want to get this Google sheet out onto a website and every time we refresh that website or go to that maybe once a day, we're going to get a new quote, a random quote.
0:20 So, I'm going to show you how to do this. We haven't had any um Apps Script written yet. I'll write that.
0:24 But I have the embed code here already done. Uh what we need here is a URL which we'll get when we deploy a web app.
0:32 We'll grab the data that we want, which in this case will be a quote. And then it will show it in this quote ID which is just an H1 style here.
0:41 But, let's do this first. Let's create the code for this. Um our code, our code is our code will grab a random one from A1 to A36.
0:52 So first we need to get that. So we'll get quotes equals spreadsheet app dot get active spreadsheet get sheet by name and I think it's all quotes.
1:04 I'll capitalize quotes and we're going to do variable quotes array equals quotes dot getRange and it's going to be empty.
1:20 a1 a366 that's 366 quotes and we'll get the values okay so once we have that we need a randomized uhm thing from here so let's do this I'm going to show you a really cool trick uh which is just using chat gpt to finish this but what we want to do is get a random uhm item from this array so we'll take
1:50 this I'll copy it and go to chat gpt and ask this is something you can do if you want to quickly get sort of some kind of little algorithm a little part of your app script that you don't necessarily know how to do so finish this getting random item from array and with that spreadsheet app there it looks
2:16 it's going to look like it's app script so they'll know what that it's app script and we just need a little bit of javascript here should be something with like math dot dot floor we'll see here what it does or like math dot random forgot what it was random math dot floor math dot random times quote 
2:34 array dot length cool and then we're going to select that item perfect so let's just grab this out of here and put that there we'll actually delete that line okay so this is random index and then we need that next part very variable random quote okay so where are we going to put this random quote um 
3:05 I don't know if we need this zero at the end we'll see if we do um maybe we do let's just put it there and let's test this logger.log uh random quote what I want to do is instead of function do get is what which we're going to need for our deployment we're going to get a random quote I'm going to call
3:28 it and once it's saved let's run it and look at our log and see if we have an error uh get random queue tempted to execute oh because it's a different name now okay we'll review our permissions we just have to do this the very first time we create this or run it here we got one great let's run it again
3:56 see if we get another one different one great we're getting it awesome so now we have this random quote coming and we can even we can actually just say return random quote there so now we can call this function somewhere else so we want function do get and we're gonna need this random quote to be the
4:23 return of this do get which is variable quote equals get get random quote we're just gonna get that but we can't return just the text what we need to do is it's gonna be content service dot create text output and we want random quote in there okay so now our deployment it's gonna be new deployment uh
5:12 we will select type will be web app uh execute as me and anyone deploy now we're gonna get a url here we're gonna use that url in our html so again i have it already copied here this embed but let's go make a website i'm gonna use card c-a-r-d uh it's pretty simple to create a blank canvas here and write
5:38 today's quote in a text and then right under it we will add an embed and all we have to do is grab this embed but actually we need to get let's manage that appointment again grab that url there it is web app and put it inside of our url here so we'll replace that url with this save it and now this is
6:03 again just taking an h1 id quote with font size 50 color white it's replacing that with a little text here which is going to be the response of here let's look at this actually if we go to an incognito tab uhm there is a weird thing where if you're running a google sh- a google script in a non-incognito
6:25 tab it won't work but incognito it will there we go and every time we refresh this should give us another quote great perfect so that's how we know it is working get this embed into our site.
6:38 We are going to, we don't need a label inline yes and just paste it in our quote uh code sorry here done um this is going to be white so let's make sure this background is a little bit darker maybe even a a dark dark green and today's quote is white as well done okay we're going to save this uh random
7:08 quote quote of the day to a card url random quote let's see if that's available it'll check for the subdomain perfect it's available random quote dot card dot co and we can visit the site and see if it's working and if there's any issues we will let c to error is human to admit it superhuman perfect 
7:32 so now at random quote dot card dot co anytime we refresh this ah we're going to have a new random quote so we can do this every day we can have this url ah save to our bookmarklet tab maybe or open this every time we open a new tab it we can set it to go to random quote dot card dot co and we'll get
7:54 a random quote every time I did make these quotes sort of um inspirational and motivational but also some of them or most of them have to do with spreadsheets so I took a random assortment uhm if you're looking for this sheet of quotes and this code become a better sheets member today or you're if you're
8:15 watching this on better sheets dot code down below is the link to the sheet get every sheet here on better sheets