Creating and working with JavaScript modules

WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Introduction
This assignment is the second of six assignments. It has been designed to give you practical experience
creating and working with JavaScript modules and creating Express Handlebars views.
Before you begin this assignment, you must finish your previous assignment. All objectives listed for this
assignment are to be made “on top” of your previous assignment.
This assignment is worth 9% of your final grade.
Note: Database connectivity is not required for this assignment and you do not need to implement the
MVC design pattern.
Reminder about academic integrity
Most of the materials posted in this course are protected by copyright. It is a violation of Canada’s
Copyright Act and Seneca’s Copyright Policy to share, post, and/or upload course material in part or in
whole without the permission of the copyright owner. This includes posting materials to third-party filesharing sites such as assignment-sharing or homework help sites. Course material includes teaching
material, assignment questions, tests, and presentations created by faculty, other members of the
Seneca community, or other copyright owners.
It is also prohibited to reproduce or post to a third-party commercial website work that is either your
own work or the work of someone else, including (but not limited to) assignments, tests, exams, group
work projects, etc. This explicit or implied intent to help others may constitute a violation of Seneca’s
Academic Integrity Policy and potentially involve such violations as cheating, plagiarism, contract
cheating, etc.
These prohibitions remain in effect both during a student’s enrollment at the college as well as
withdrawal or graduation from Seneca.
This assignment must be worked on individually and you must submit your own work. You are
responsible to ensure that your solution, or any part of it, is not duplicated by another student. If you
choose to push your source code to a source control repository, such as GIT, ensure that you have made
that repository private.
A suspected violation will be filed with the Academic Integrity Committee and may result in a grade of
zero on this assignment or a failing grade in this course.
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Technical Requirements
• All back-end functionality must be implemented using only Node.js, Express, and ExpressHandlebars. Other frameworks/packages are not allowed for this assignment.
• Your views must be created with Express-Handlebars.
• You can use a front-end CSS framework such as Bootstrap, Bulma or Materialize CSS to make
your website responsive and aesthetically pleasing.
• You are not allowed to use any Front-End JavaScript Frameworks. For example, you may not
use React, Vue, or Angular.
Objectives
Data Module
In this assignment, you are not reading data from a database. Instead, you will create one back-end
node.js module file to encapsulate the static (“fake”) data for both the “Featured Rentals” section on
the home page and the rentals shown on the “Rentals” page. For now, this module is going to represent
the model for your MVC application but in the future, it will be deprecated. Place the file in a “models”
folder and call it “rentals-db.js”.
Your module, when complete, will:
• Contain a local variable to store an Array of rental objects.
Note: You may only use a single variable to store the rentals. This variable is a local variable and
therefore it should not be exported. You will need to include at minimum six rentals: four in one
city and two in another.
• Export a function called getFeaturedRentals() that will return a single array of rentals where the
rental has been flagged as “featured”. This function is used on the home page to display the
featured rentals.
• Export a function called getRentalsByCityAndProvince(), used by the “rentals” page, that will
return a single array of rentals grouped by the city and province. More information about this
function is available on the next page.
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Each rental object will require at minimum the following JS properties. Use the property name and data
type provided.
• headline (String) – Cozy Lakefront Log Cabin
• numSleeps (Number) – 2
• numBedrooms (Number) – 1
• numBathrooms (Numbers) – 1
• pricePerNight (Number) – 125.99
• city (String) – Scugog
• province (String) – Ontario
• imageUrl (String) – For now, point to an image placed in your assets folder.
• featuredRental (Boolean) – true
Notes regarding the getRentalsByCityAndProvince() function.
• Do not hardcode or limit the number of cities that will be returned.
• All logic must be written into a single function using vanilla JS. There is no need to have
supporting local functions.
• It is possible that cities in different provinces may have the same name. Use the city and
province when grouping the rental properties.
• You may use ES6 JavaScript features to help but this is not mandatory.
• The array returned should look similar to this:
[ {
“cityProvince”: “Scugog, Ontario”,
“rentals”: [
{ headline: “Rental 1”, city: “Scugog”, province: “Ontario”, … “featuredRental”: true },
{ headline: “Rental 2”, city: “Scugog”, province: “Ontario”, … “featuredRental”: false }
] },
{
“cityProvince”: “Toronto, Ontario”,
“rentals”: [
{ headline: “Rental 3”, city: “Toronto”, province: “Ontario”, … “featuredRental”: false },
{ headline: “Rental 4”, city: “Toronto”, province: “Ontario”, … “featuredRental”: true },
] }
]
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Handlebars Implementation
In the previous assignment, you created a home page containing several components, for example, a
header, navbar, hero, content sections, and a footer. You will move some of these components into
reusable handlebars partial view files.
Create only the following partial views and refrain from adding additional ones.
• navbar.hbs – contains the html used to construct the header and navigation bar.
• footer.hbs – contains the html used to construct the footer area.
• rental.hbs – contains the html used to construct a single rental card.
The remaining components, such as the hero and content sections will not be moved into partial views.
Create a handlebars default layout view called main.hbs. The layout will contain markup that is shared
across all pages of your website. This view will render the partial views for the header and footer. The
layout should not include the hero image, content sections, or the rental partial view file.
Create the following handlebars view files for the routes defined in the previous assignment. Make sure
these pages use the default layout view. Anytime a rental is displayed, ensure you are using the “rental”
partial view from above. Do not change the URL for any of the routes, simply use res.render() to display
the correct view file. Remember that you are not implementing controllers, so place all you views in the
“views” folder and partial views in the “partials” folder. Delete the index.html file from the previous
assignment once you have created the views.
• home.hbs – Home page, contains the hero, content sections, and featured rentals.
• rentals.hbs – Rentals page, displays rentals grouped by city and province.
• sign-up.hbs – A customer registration page to allow new users to create an account.
• log-in.hbs – A login page to allow existing users to access their account.
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Rentals Page
You are required to build a well-designed listing page.
The rental properties are organized in a grid with two columns. The third rental property will wrap to
the next row.
You will notice the rentals in the above screen shot are categorized in a section titled “Scugog, Ontario”.
This title is read from the “cityProvince” property. If you have created your data module correctly, the
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
data you are working with is already grouped for you. Use two {{each}} iterators (one embedded in the
other) to render the page. To demonstrate this functionality works correctly, you must ensure that the
rentals view displays at least two sections. At least one section should show four rentals.
Every rental card will display in a similar fashion as the home page (featured rentals). Furthermore, like
the “Featured Rentals” section on the home page, the data for this section will not be pulled from a
database, however, you are required to define the data in a separate back-end node.js module.
This view must include the header, navigation bar, and footer. Don’t forget, the html for the rental
cards are contained in a partial view and included on this page.
Registration Page
You are required to build a well-designed user registration form as shown below. You must ensure that
the page maintains consistency. The view must include the header, navigation bar and footer. Do not
include the hero or content section(s) on this page.
Do not implement form submission, client-side validation, or server-side validation.
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Login Page
You are required to build a well-designed user login form as shown below. You must ensure that the
page maintains consistency. The view must include the header, navigation bar and footer. Do not
include the hero or content section(s) on this page.
Do not implement form submission, client-side validation, or server-side validation.
Responsive Design
Ensure that your entire website renders well on a variety of devices, specifically on desktops, tablets,
and smartphones. To accomplish this, you will need to use CSS Media Queries in combination with a
modern CSS Layout Module (CSS Grids, or Flexbox, or both). You may optionally use Bootstrap in this
assignment. Also ensure that all pages of your site follow the same branding outlined in your original
home page. This means that all pages should use consistent colours, fonts, and styles.
Reminder
All back-end functionality must be done using Node.js, Express and Express-Handlebars. Your views
must be created with Express-Handlebars. You will have three partial views and four view pages. All
pages must operate responsively, in other words, must function well on all browser sizes.
WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Rubric

Criteria	Not Implemented (0) Little or no work done. Unacceptable attempt.	Partially Implemented (1) Work is minimally acceptable but is incomplete or needs significant modification.	Fully Implemented (2) Work is complete and done perfectly.
Data Module • Contained in a separate Node.JS module named “models/rentals-db.js”. Includes only one private/local variable, no private/local functions, and two public/exported functions. • Contains a local variable that stores an array of six rental properties across two “city and provinces”. Array only contains rental objects as described in the specifications. • Contains the getFeaturedRentals() function coded as specified. • Contains the getRentalsByCityAndProvince() function coded as specified.
Partial Views • Header with nav bar as specified. Named navbar.hbs.

WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST

• Footer as specified. Named footer.hbs. • Rental “card” as specified, includes all required fields. Named rental.hbs.

Views • Main layout view as specified. All views use the layout file. Named main.hbs • Registration form as specified. Named sign-up.hbs. • Login form as specified. Named log-in.hbs.

Home Page • Converted to a view with the necessary partial views included. As specified. Named home.hbs. • “Featured rentals” data is dynamic and passed into the view.

Rentals Page • Rentals broken by city and province. Named rentals.hbs. • Rentals are displayed in a two-column grid. • Rental data is dynamic and passed into the view as specified.

WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST

Responsive Design • Overall site looks polished on all devices, specifically on smartphones, tablets, and large screens.

Poor (1)

Average (3)

Exceeds (6)

Total: 36 Marks
Note: Half marks may be awarded.

Deductions	No Deduction (0)	Partial Deduction (1)	Full Deduction (2)
A front-end CSS or JavaScript framework was used. Only Bootstrap, Bulma, or Materialize are allowed.	No	Exactly one	More than one
An unapproved NPM package was installed.	No	Exactly one	More than one
Additional deductions may occur if the requirements outlined in this document are not followed precisely.

WEB322 – ASSIGNMENT #2 – WINTER 2023 DUE: FEBRUARY 20, 2023 @ 11:59 PM EST
Submitting your work
Make sure you submit your assignment before the due date and time. It will take a few minutes to
package up your project so make sure you give yourself a bit of time to submit the assignment.
1. Locate the folder that holds your solution files. It is recommended that you delete the
node_modules folder but do not delete any other files or folders.
2. Compress the copied folder into a zip file. You must use ZIP compression, do not use 7z, RAR,
or other compression algorithms or your assignment will not be marked.
3. Login to My.Seneca, open the Web Programming Tools and Frameworks course area, then click
the Project link on the left-side navigator. Follow the link for this assignment.
4. Submit/upload your zip file. The page will accept unlimited submissions so you may re-upload
the project if you need to make changes. Make sure you make all your changes before the due
date. Only the latest submission will be marked.