This assessment contains materials that may be subject to copyright and other intellectual property rights.

Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this
document or its solution anywhere will be subject to the college’s Academic Integrity policy.

Assignment 1

Submission Checklist

For your submission to be graded, you must provide a zip file of your project, and a screen recording
demonstrating the functionality you implemented.

1. Creating Your Project

● When creating your project, name the project: Books-firstname, example: Books-Peter
● Ensure your project is configured as a NodeJS project. You can do this by running “npm init -y”
in your project folder
● After completing your project, create a zip file containing all project code.
● Name the project Books-firstname.zip. No 7zip or rar files are accepted.

2. Creating Your Screen Recording

● In the screen recording, demonstrate the app functionalities you implemented
● During the screen recording, you must verbally narrate/explain what you are doing while you are
doing it (do not assume the instructor will understand what you are doing simply by watching you
click things on the screen)
● You are not required to explain your code
● Max 5 min

3. In the assignment dropbox:

● Submit your zip file and screen recording to the dropbox
● If your screen recording is too large for the dropbox, then upload your screen recording to
OneDrive and ensure that the link is set to: “Anyone with the link can view”. Paste a link to the
recording in the submission comments.

Academic Integrity

● This is an individual assessment.

● Permitted activities: Usage of Internet to search for syntax only; usage of course materials
● Not permitted:
○ Communication with others (both inside and outside the class)
○ Discussion of solution or approaches with others; sharing/using a “reference” from someone
○ Searching the internet for full or partial solutions
○ Sharing of resources, including links, computers, accounts

1
 This assessment contains materials that may be subject to copyright and other intellectual property rights.
Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this
document or its solution anywhere will be subject to the college’s Academic Integrity policy.

Problem Description

Using Node, Express, and Handlebars, create a full stack website that enables a user to search for books
in a library.

The webpage consists of three pages:

1. Home Page: Shows the home page for the library
2. Books Page: Display a list of books in the library
3. Error page: Displays error messages.

HTML and CSS Styling

1. The website’s pages must be implemented using Handlebars templates.

2. You should have:

● A template that contains the page layout
● Templates for the main content of each page
● A partial for the HTML that represents a book on the Books page.

3. Use the expected output as an example for what the user interface of your application should look like.

4. You should customize the content of the website.

5. You should customize colors, typography, and spacing to match your own design aesthetic. Use
reasonably pretty colors and non-default fonts.

Data Modeling

1. The books in the library must be modeled with an array of Javascript object literals. The array
should be implemented as a global const variable in your server.js file.

2. Each book must be represented using a Javascript object literal.

3. Each book in the library has properties to describe:

a. Book title
b. Book author
c. Is the book available for borrowing?
d. Is the book checked out by the current user?

4. You must provide a minimum of eight (8) books of varying titles, authors, prices, and availability.
Use meaningful values for the title, author, and price.

2
 This assessment contains materials that may be subject to copyright and other intellectual property rights.
Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this
document or its solution anywhere will be subject to the college’s Academic Integrity policy.

Website Pages

Page Layouts

Every page of the website contains two sections.

1. Header section: displays the library name and website navigation menu
a. Clicking on the library name will navigate the user to the “Home Page”.
b. The navigation menu has two links: Books, Branches, Contact Us
● Clicking on Books navigates to the “All Books” page
● Clicking on Branches and Contact Us does not do anything.

2. Main section: displays the main content for the page

Home Page

The main content of the Home Page shows information about new books in the library.

Provide a link called “Get Started”. Clicking the link navigates the user to the “Books” page.

3
 This assessment contains materials that may be subject to copyright and other intellectual property rights.
Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this
document or its solution anywhere will be subject to the college’s Academic Integrity policy.

All Books Page

1. By default, this page displays a list of books in the library. Fo reach book, display:
● Book title
● Book author
● Availability status

2. The page also displays form to enable the user to:

● Search for a book
● Filter the list of books
● Borrow a book

Example of the page:

Examples of UI for commuincating the books’s status

Book that is checked out by user Book that is not available Book that is available

4
 This assessment contains materials that may be subject to copyright and other intellectual property rights.
Modification, distribution or reposting of this document is strictly prohibited. Learners found reposting this
document or its solution anywhere will be subject to the college’s Academic Integrity policy.

3. Search for a Book

● User can type a keyword into the search box. When search is pressed, the application must
search for books that have the specified keyword in the book title. The search is
case-insensitive
● For the search to be initiated, the search box must contain a value. If the search box is empty,
display an appropriate message on the Error Page.

4. Filtering Results
● The list of displayed books can be filtered one of three ways:
a. Show All Books: Reloads the page to show all books in the library
b. Show Available Books: Reloads the page to show only books that are available for
borrowing
c. Show My Books: Reloads the page to show books checked out by the user. If the user
does not have any books checked out, display appropriate message in Error Page

5. Borrowing a Book
● If a book is available for borrowing, then clicking on the Borrow button will update the book status
to indicate that it is checked out by the current user.

Error Page

If the user performs an operation that results in an error, an error page should be displayed.

Pressing the GO BACK button returns the user to the website home page.

END OF ASSESSMENT