Assignment 1

Assignment 1#

You can accept your repository to work on your assignments for this term here.

Details#

Team Builder Website!

For the first assignment, you’ll be creating your own team builder website. This should provide you with a gentle introduction to the three technologies that were covered during the workshop (HTML, CSS, JS).

We’re expecting the following:

  1. An HTML file that loads a CSS file and a JS file

  2. A navbar (should have functioning links to at least a home page (the main page where your items are listed), and an about page (brief information about yourself, the project, etc.))

  3. A form with multiple inputs, to take in a:

  • Member name

  • Description of member

  • Member age

  • Image of member (image can come from a URL) as well as a button to add the member to a list, and a button to clear the inputs in the form.

  1. A JSON string that holds initial members (should be prefilled with a name, description, age and image url, for when the site loads … and you can parse it into a JS object).

  2. A list (likely unordered), made up of member cards that contain the member info (it should be updated with a new card whenever you click the add button in your form).

  3. A button to delete all the cards.

  4. Sufficient styling (showing some effort to upgrade the site from basic HTML), which may include things like:

  • Text color

  • Background color

  • Different positioning

  • Sizing (width, height), padding, margins

  • Etc.

  1. Site should be responsive, and can handle shrinking the web browser or viewing with the device emulator in Chrome (expecting a flexbox if appropriate or media queries or at least appropriate sizing).

  2. Something cool and extra! This is wide open for you to explore, and try to push your knowledge and boundaries. For example:

  • individual buttons for each card that will allow you to delete them (a button with an X or that says delete)

  • animate the cards in or out of the list when you add or delete them (using CSS animations and transitions)

  • additional form elements that show up in the cards (e.g. power/skill/favorite thing, etc.)

  • sorts, filters or search

As described in the individual assignment rubric, your code will need to meet these requirements and be functional, up to perhaps a few minor glitches in tricky cases. Note that functionality includes both user-visible and console-visible issues.

It’s up to you! We’re hoping that you’ll use the above requirements as a guide, but that you’ll let your imagination take over, and build something unique and interesting!

You should be ready to demo this to a TA during your second week lab, and should be ready to answer questions about it, as well as explain in detail what you’ve completed. You should also be ready to answer general questions about the lecture.

HAVE FUN!!!

Grading Rubric#

You can see the grading rubric here:

Frequently Asked Questions#

  • Can I use JQuery? No

  • Can I use MaterialUI or Bootstrap? No

  • Can I use a framework? No

  • What CAN I use? Vanilla JS, HTML, and CSS

Contents