Code to use the Google Sheets API, Javascript, and CSS to import the results of a Google Sheet into a website and style as cards (instead of as a table)
- A Google Sheets workbook (this can be generated from the results of a Google Form, or a standalone workbook)
- Google Cloud account with Google Sheets API configured
- Website with ability to add custom Javascript and CSS
Javascript to import Google Sheet into website modified from CodePen by duyentnguyen
CSS to style table from Google Sheet into cards modified from CSS by Jeff Vdovjak
See example in action at the LOUIS Community Jobs Board
The spreadsheet used in the demo has the following columns (which affects the CSS):
- Timestamp
- Job Title
- Institution Name
- Job Type
- Remote/Telecommute
- Location
- Description
- URL for More Information
- Contact Information
- Email Address
- Salary Range
- Hyperlink