How to Deal with Dynamic Text in HTML Using Spreadsheets

What is Dynamic Text? Dynamic text is text that is constantly changing or being updated. Such as the date, live reports, news, blog posts etc. If you are running a blog or want to display live stats on your website it can get difficult to constantly update them through the backend. In this tutorial, we will be using API Spreadsheets to replace a backend with a Google Sheet. Full Code On my personal website, I want to have an updated About me section where I can list the tv show, music, quote, and coding language I am learning that week. However, as you can see with our article on deploying a site, it can get time consuming to have to upload the HTML file every time you want to change something. We will be going through each section but here is how it looks right now. You can also view it live here. Start with creating a Google Sheet Since we are only going to be using it to change one section, there is only going to be one row that we can work on and keep changing. I am going to be displaying the week, show I'm watching, favorite Music, coding language I'm learning, and my favorite quote. So in my spreadsheet, my column names are Week, Show, Music, Language, Quote Connect your Google Sheet on APISpreadsheets.com Now, we need a way to get our data from Google Sheets onto our website. To do this, we are going to be using our tool to convert the Google Sheet to a REST API. It’s okay if you don’t understand REST APIs fully. All you need to know is they let you read or write data using a standard protocol available through Javascript Whenever I want to change the data, I can easily do so on the Google Sheet. Make an account if you don’t have one already (it’s free for up to 3 files!) and choose the file you want. Once you have uploaded the file, checkout the quick tour to get a deeper understanding of all the features. For this tutorial, we will only be reading our spreadsheet so click on the “Read” tab and Javascript Code Sample We will be copying and pasting this Javascript code sample in our code. You don’t have to do that now. We will show you when to do it below. Just keep the tab open. Open Up a Text Editor of Your Choice I will be using Sublime Text but you can use whatever you are comfortable with, such as Atom or Notepad. Create HTML file Create and set up an HTML page with the , CSS Code for our 2 crucial

elements We will be styling our 2 crucial elements. We will set

and

to NOT display initially. This is because when the website initially loads, we will be fetching our data from Google Sheets and won’t have anything to display. We also won’t know till the fetch is complete whether to show the error or not. #allElems { display: none; } #errorMessage { display: none; } The FULL Javascript Code We are going to be adding A LOT more to the fetch code. The final code in the

Still puzzling over something?