Unit20 Capstone Project Recipies

Overview

You have learned so much this semester about JavaScript and now it's time to demonstrate what you can do on your own. For this optional capstone project, you will build a responsive web application that uses JSON data to display food recipes for use on mobile devices as well as a laptop.

Vocabulary

Capstone

The capstone project is a unique opportunity to build a real world solution using knowledge gained from this and previous courses. It provides a way for you to demonstrate to yourself what you are capable of after 15 weeks of work.

Tap Target Size

Everything the user should be able to tap on – every button, every slider, every input control – should be at least 44x44 pts in size

Recipe

A list of ingredients, a tantalizing photo, and a set of instructions for making something yummy.

Tantalizing

Possessing a quality that stimulates desire to bake and then eat.

Real World

An activity or assignment that is identical or similar to tasks expected of employees working in a web development career.

Objectives

At the end of this module, you should be able to...

• Use skills learned in previous units to create something new.

Watch

• Unit Introduction
• Watch 1720_20a Capstone Overview

Assignment Example

• There is no example. You need to use your own layout skills for this assignment.

Assignment Checklist

Unit20 Capstone Project Recipies (50 pts)

You will build on your own a JSON driven, dynamic website that displays at least 6 recipes.

Favorite Icon8pts

• Build a simple, clear, recognizable icon for your site using Photoshop (Unit 4)
• Convert the icon to a series of favorite icon images
• Add the code to your page header so you have an icon for your mobile device and browser tab bookmark

Page Header2pts

• Site name rendered as an h1

Page Navigation10pts

• For each recipe dynamically create a button with the recipe name. (unit 13)
• Style each button to meet the Tap Target Size suggested by Apple.
• Style all buttons to follow your design.

Images10pts

• Find a tantalizing photo for each of your recopies and resize each one to about 500px square
• Display each photo so it resizes for the device

JSON file10pts

Create your own JSON data file so that each recipe contains the following

• The Name-Value pairs used in the JSON data need to be appropiate for recipe data!
• A descriptive title
• A path to the image
• An array of comma seperated ingredients
• An array of comma seperated directions
• No unused or extraneous data in the JSON file

Recipe Layout8pts

• For small screens, display the recipe vertically down the screen
• For larger screens, display the recipe in a grid to take advantage of the wider screen width.
• Style all the displayed recipe items so they follow your color scheme
• Display the ingredients as a list
• Display the directions as a list

Footer2pts

• Class Assignment
• Your name

Overall Page Requirements

Your page needs to meet these requirements

• Link to a normailze.css file (this creates a common starting point for all browsers)
• Link to a small.css file
• Link to a medium.css file
• Link to a large.css file
• Link to an external Google Font of your choice
• Media Queries are included in the medium and large css files
• Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Upload your assignemnt to GitHub
• Change your repository to private
• Publish the GitHub repository to Netlify using the name that they provide

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail