CPSC 455 - Assignment 1


DUE DATE: Tuesday, May 24th (Noon - PST (Vancouver Time))
* Final code must be committed to a Github branch (call it “Assignment1”) by the above date and time




Recipe Website!


For the first assignment, you’ll be creating your own recipe 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 recipes are listed), and an about page (brief information about yourself, the project, etc.))


3. A form with multiple inputs, to take in a recipe title, ingredients, and instructions, as well as a button to add the recipe to a list, and a button to clear the inputs in the form.


4. A stringified JSON object that holds initial recipes (should be prefilled with a recipe name, ingredients, and instructions for when the site loads … and you can parse it into an object) … this is a string!


5. A list (likely unordered), made up of recipe cards that contain the recipe information (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. quantity or unit dropdowns, scaling the ingredients for double/triple/etc batches, comments, rating system, recipe images 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.




HAVE FUN!!!


FAQ:

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