Showcase Google Sheet IMPORTHTML()
function to get alcohol prices from Rajasthan Goverment Excise Department webpage and create a responsive view.
The data source is an HTML Table in a vast maze of nested HTML tables in https://excise.rajasthan.gov.in/RSBCL-Price-List.aspx
Add this formula in the cell A1
of a blank google sheet. You can learn more on how to use IMPORTHTML()
function here.
=importhtml("https://excise.rajasthan.gov.in/RSBCL-Price-List.aspx", "table", 22)
At this point, intelligent data is now available from Google Sheet which can be consumed in many ways. Here PapaParse.js and Datatable.js are used to generate a page hosted right here on github!
The sheet lastupdated has the last updated date
=importhtml("https://excise.rajasthan.gov.in/RSBCL-Price-List.aspx", "table", 23)
The header with wrapped content on the header of the last column forced ignoring the header altogether and the column with the serial numbering is of no use either.
https://docs.google.com/spreadsheets/d/
[GOOGLE_SHEETS_ID]
/gviz/tq?tqx=out:csv&sheet=data&range=
B2:D
Datatable is used as presentation layer and the PapaParse fetches data from Google Sheets CSV output, converts into JSON and feeds into Datatable. The crux of the funtions happen in these lines below. The code has been modified to add a little bit of styling.
Papa.parse(google_sheet_csv, {
download: true,
complete: function(results) {
$('#DataTable').DataTable({
"data": results.data
});
}
});
All the javascripts and stylesheets are referenced from publicly avaiable CDNs.
With a little bit of styling for alignment and clutter - here's what we have!
https://ram-arrowebs.github.io/rajalcoholprices/``
Create a manifest to make this a PWA with an ability to Add to Home Screen!
Created an overlay using a nifty css svg spinner by Fabio Ottaviani
Created a favicon using :cling_beer_mugs: emoji and updated Add to Home Screen option
Add a feature to share app using QRCode from within the app itself