Code Monkey home page Code Monkey logo

webdesign-test-template's Introduction

Web design test for interns

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.