cases of academic dishonesty

Final Project
ITEC3020 B, Summer 2022
• For this project, you can work in a team of 3 individuals (not more than 3).
• You have a week to complete the project, starting today.
• The estimated time for the successful completion of the project is 5 to 6 hours.
• The nature of the project allows searching the textbook, notes, slides, and other course
materials on eClass and Angular documentations e.g., in angular.io website.
• What you may not do: You may not consult with other groups to create your solution in any
mode talking, emailing, texting, …). You may not use ready components or outsource any part
of your project. If you are discovered, your case and all accompanying documentation will be
submitted to the Dean’s office via established channels for cases of academic dishonesty.
• Please follow the rules outlined under the section “Submission”.
• It is reasonable to expect technical snafus (your computer flakes out, network connection
drops). Take precautions (e.g., work offline, save backups, etc.).
• Do not expect to receive accommodation if you lose all your work due to technical snafus. We
will deal with other minor technical snafus on a case-by-case basis.
• Pay attention to the course announcements during the project period more than ever.
Creating a diet dashboard using Angular
This project is designed to use Angular framework as well as your previous knowledge of HTML,
CSS and JS. The goal of this project is for you to practice the use of modules, components,
templates, services, directives, and routing in Angular.
In this project, you are asked to create a diet dashboard using Angular. This dashboard
includes a header, a footer, a sidebar on the left part of the page and a content page
showing different component views based on what is selected on the sidebar.
As always, the use of CSS to style your work in a way that it’s appealing to the user is
very important.
The single page application you design should include:
• A header including an app logo on the left and current date and time on the right part.
• A Footer including copyright symbol and a sentence like (© All rights reserved, 2022.)
• A sidebar including icons such as Chart, Today, and Food List.
• A content part which changes based on what’s selected on the sidebar.
When Food List is selected on the sidebar, user expects to see a table of food items, their names,
and their macro nutrients such as fat, carbohydrate, and protein as table columns. You can use a
static list of food items and write a service to get the food list and provide it for other
components.
There should be a button at the end of the table called Add to today’s list. User should be able to
select a row from the food list table and add it to today’s list.
When Today is selected, user should be able to see a list of today’s food items as well
as their macro nutrients. There should be a row at the bottom of the table which
shows sum of each column for fat, carbohydrate, and protein.
There should be a button at the end of the table called Remove from today’s list. User
should be able to select a row from the today’s food list table and remove it from the
list.
Pay attention that all the changes in Food List or Today view should be reflected immediately.
Finally, when user selects Chart, he or she should be able to see a pie chart which shows each
macro nutrient percentage for today food list. There are Angular chart templates you can use
here.
Pay attention
• Before start coding, design your SPA on a paper. Think about the structure of
your application such as number of modules and number of components in
each module. What properties and methods you might need in each
component, etc. For example, you need different components for the header,
sidebar, footer, and content. You need various components for food list, today
list and the pie chart. What are the other components you may need? Should
you put all these components in one module or more than one module?
• Once you’re confident that you have a good design, start breaking down the
work among different team members.
• In creating your application, if you need to use more elements than explained
in the lectures, use “angular.io”, and “w3schools.com”.
• Use your creativity in designing and implementing the project.
Submission
• To submit your solutions to this exam, you will use the submission facility on the course
website on eClass.
• Submission should be a zip folder including your project. Delete node_modules folder
before zipping your project folder and a video recorded of you explaining your project (if
you chose the remote presentation)
• You should abide by the policies set by the Senate of York University and by the Faculty
of Liberal Arts & Professional Studies regarding Academic Honesty.
• This exam is worth 20% of your final grade.
• Due date: Saturday, August 5, 2022, 12:00 pm. NO-EXTENSION
Presentation
• Presentations will be during the class time on the next Thursday (if you chose in-person)
or with a video recorded of your screen explaining your work
• Your presentation should be around 10 minutes