This repository contains code to generate and run a website using Github Pages. The page generated by the current code can be found here.
Taks 1: Fork this repository to your own Github account to work with it.
The data for the 'lab members' shown on the page comes from a spreadsheet. When this spreadsheet is updated, the new data has to be automatically updated in the repository _data/team.yaml file. This is done using the pull-sheet/index.html file.
Task 2: Understand how this data pulling from Google sheets works. Then, you will copy the Google Sheet, change some data in it and be able to pull the updated data into your forked repository. For this, you will have to publish the spreadsheet to the web as a tsv file (File/Share/Publish to web when you open the Google sheet), and use the link generated to access the data. Then you have to modify the pull-sheet/index.html page appropriately. You will also need to create a Github token to programatically access and update the repository. Lastly, to run the pull-sheet script, you will navigate to: /pull-sheet/?ghtoken=ghp_...
Task 3: As you can see on the current web page, there is a grid of 'lab members' at different positions like PhD, MS(R), UG etc. Your task is to create a filter at the top of the page where a user can select the position. Based on that only members of those position should get displayed. For example if the user selects 'PhD', only PhD students should be visible in a nice way. When 'UG' is also selected, both PhD and UG students should be displayed. When all are unselected, all members should be displayed. You can use javascript to accomplish this. See example of this functionality on this website.