Skip to content

Commit

Permalink
update Assignment 1
Browse files Browse the repository at this point in the history
  • Loading branch information
firasm committed May 11, 2024
1 parent 75243da commit 9d03adb
Showing 1 changed file with 63 additions and 1 deletion.
64 changes: 63 additions & 1 deletion notes/part01/assignment01.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,66 @@ You can [accept your repository to work on your assignments for this term here](

## Details

Coming soon...
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.

4. 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).

5. 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).

6. A **button** to delete all the cards.

7. 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.

8. **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).

9. 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 her:

## 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

0 comments on commit 9d03adb

Please sign in to comment.