For this homework you will need to create and design the UI for a website that revolves around nutrition, cooking, and recipes.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

For this homework you will need to create and design the UI for a website that revolves around nutrition, cooking, and recipes.

 

You are required to utilize the template EJS project from class, in addition to bootstrap UI classes, to apply Material Design principles.

 

These are the minimum technical requirements:

(NOTE: ALL THESE REQUIREMENTS ARE DESIGN ONLY! NO FUNCTIONALITY IS REQUIRED!)

 

4 pages that can be navigated to from the navigation bar.

 

1) Welcome page. Required to show some welcome text, name of the page, and an image.

2) Recipe page. This page needs to show at least 3 different meals, including their recipes, cooking instructions, ingredients.

3) Store page: Show at least 2 items that can be purchased, with an image and some information

about them (naturally in line with the topic of this page)

Additionally, there needs to be an input field for First Name, Last Name, and Credit Card Number, as well as a button to verify the credit card number.

4) Community Page: This page needs to have an input field for text, a button to submit, and a control of your choice to show community involvement, such as tips, comments, notes, etc that fans of this page want to publicly share. Similar to a comment section, where people can leave a comment or share an opinion on the website simply by entering text in the input field, and submitting the text via the button. There should be at least 5 (hard coded) comments displayed.

 

The color scheme of your website controls must be in line with Material Design. Make use of the color picker shown in class to make sure you use complimentary colors on your website.

 

You do not need any API calls, or data handling at all. The UI is the only thing that is required for this homework. The buttons do not need to perform any actions when clicked.

The grading for this homework is simplified:

• Welcome Page: 5 points

• Recipe page: 15 points

• Store page: 20 points

• Community page: 10 points

• Total: 50 points

 

EXTRA CREDIT (up to 50 points)

 

This homework has an optional part 2, which can result in double the points (extra 50 points) extra credit for this assignment.

 

The extra credit involves adding some functionality to the homework and its pages. In particular, the functionality that needs to be added for the extra credit is the following:

 

• Recipe page: the 3 meals and their data must come from a database. This includes setting up the APIs for them (in python with flask) and the necessary tables in your database for the information they load.

 

• Store page: the items and their information can remain hardcoded, but there needs to be a credit card number validation performed when the user clicks the button. The credit card verification is a simple calculation that can be done on the webserver in Javascript. Hint: The algorithm that performs the verification is called Luhn Algorithm.

 

• Community page: the button must submit the comment entered in the input to a table in your database (via python API), and the displayed comments must come from from that table in your database, and not be hard coded.

 

Additional extra credits:

• Recipe page: 25 points

• Store page: 10 points

• Community page: 15 points

• Total: 50 points

 

Other Requirements:

Make sure the username and password for the database you setup are credentials you’re willing to share. Do not use personal passwords for this homework, which you might be using anywhere else.

 

 

Attachments:

Expert's Answer

634 Times Downloaded

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of