Cognizant Academy

truYum

Web Interface Specification Document

Version 1.0
Prepared By / Last
Reviewed By Approved By
Updated By
Ramadevanahalli
Chandrasekaran
Name Vimalathithan Krishnan Lingachar,
Janardhanan
Shashidhara Murthy
Learning Solution Learning Solution
Role Learning Solution Lead
Designer Architect

Signature

Date 20 May 2019 21 May 2019 17 Jun 2019

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 1 of 14

 Table of Contents

1.0 Introduction 3
1.1 Purpose of this document 3
1.2 Definitions & Acronyms 3
1.3 Project Overview 3
1.4 Scope 3
1.5 Intended Audience 3
1.6 Hardware and Software Requirement 3

2.0 Preparing the folder structure 4

3.0 Screen Flow 4

4.0 View Menu Item List (TYUC001 & TYUC002) 5

4.1 Menu Item List Admin 5
4.2 Menu Item List Customer 6

5.0 Edit Menu Item (TYUC003) 7

5.1 Edit Menu Item 7
5.2 Edit Menu Item Status 8

6.0 Add to Cart (TYUC004) 9

6.1 Menu Item List Customer (Add to Cart success) 9

7.0 View Cart (TYUC005) 10

7.1 Cart 10
7.1 Cart Empty 11

8.0 Remove item from Cart (TYUC005) 12

8.1 Remove Cart 12

9.0 Standards and Guidelines 12

9.1 HTML 12
9.2 CSS 13
9.3 JavaScript 13

10.0 Change Log 14

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 2 of 14

 1.0 Introduction

1.1 Purpose of this document

The purpose of this document is to define the user interface specification for truYum
project.

1.2 Definitions & Acronyms

Definition / Acronym Description

HTML Hyper Text Markup Language

CSS Cascading Style Sheet

1.3 Project Overview

Refer truYum-use-case-specification.docx for understanding the functionality and
features.

1.4 Scope
Develop static HTML web pages for truYum application.

1.5 Intended Audience

 Product Owner

 Scrum Master

 Application Architect

 Project Manager

 Test Manager

 Development Team

 Testing Team

1.6 Hardware and Software Requirement

1. Hardware Requirement:

a. Developer Desktop PC with 4GB RAM

2. Software Requirement

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 3 of 14

 a. Notepad ++ for editing HTML and CSS

b. Chrome Browser

2.0 Preparing the folder structure

Create the below folder structure for placement of files appropriately:

truyum-ui
|_ images
|_ js
|_ style

3.0 Screen Flow

Flow of screens for Customer and Admin provided below. Blue boxes represent pages. Orange
boxes represent the user role. The label in the lines denote the link in the page used to arrive from
the specific page.

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 4 of 14

 4.0 View Menu Item List (TYUC001 &
TYUC002)

4.1 Menu Item List Admin

Displays the list of menu items. Each menu item will have option to edit a particular menu item

File: truYum/menu-item-list-admin.html

Field Specification

The menu items are listed in table kind of structure. Find below the specification for each column in
the Menu Item List table.

Field Name Field Type Description

Name Label Displays the title of the menu item

Price Label Display the price of the menu item in

currency format with two decimal places.
Should include the currency symbol as well.

Active Label Display ‘Yes’ or ‘No’ based on whether the

item is in stock or not

Date of Launch Label Display date of expiry in DD/MM/YYYY

format

Category Label Displays the category of the menu item

Free Delivery Label Display ‘Yes’ or ‘No’ based the respective

menu item delivery status

Action Link Display ‘Edit’ as a link that points to edit-

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 5 of 14

 menu-item.html

Menu Link Displays menu-item-list-admin.html

4.2 Menu Item List Customer

Displays the list of menu items. Each menu item will have option to add the specific menu item to cart

File: truyum-ui/menu-item-list-customer.html

Field Specification

Field Name Field Type Description

Name Label Displays the title of the menu item

Price Label Display the price of the menu item in

currency format with two decimal places.
Should include the currency symbol as well.

Category Label Displays the category of the menu item

Free Delivery Label Display ‘Yes’ or ‘No’ based the respective

menu item delivery status

Action Link Display ‘Add to Cart’ link, it displays the

same page with notification message that
the Menu Item is added into the cart or not

Menu Link Displays menu-item-list-

customer.html

Cart Link Displays cart.html

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 6 of 14

 5.0 Edit Menu Item (TYUC003)

5.1 Edit Menu Item

Screen with form fields to edit the menu item details. This page is arrived by clicking the Edit link in
menu-item-list-admin.html.

File: truyum-ui/edit-menu-item.html

Field Specification

Field Name Field Type Name in Validation Message

HTML

Name Text Box title  Title is required.

 Title should have 2 to 65 characters.

Price Text Box price  Price is required.

 Price has to be a number.

Date of Text Box dateOfLaunch  Date of Launch is required

Launch

Active Radio Buttons inStock

Category Drop Down List category  Select one category

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 7 of 14

 Free Delivery Checkbox freeDelivery

Save Submit submit Button used by user to submit the form

for saving a Menu Item. Above
mentioned validations needs to be done
on click of this button. The message
needs to be displayed using JavaScript
alert.

Menu Link Displays menu-item-list-

admin.html

5.2 Edit Menu Item Status

Display the status of submission of edit menu item form. This page is arrived after clicking save in
edit-menu-item.html.

File: truyum-ui/edit-menu-item-status.html

Field Name Field Type Description

Menu Link Displays menu-item-list-admin.html

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 8 of 14

 6.0 Add to Cart (TYUC004)

6.1 Menu Item List Customer (Add to Cart success)

Customer can add a menu item to Cart by clicking “Add to Cart” link in menu-item-list-
customer.html. On clicking this link a page similar to Menu Item List page is displayed with the
message that the Menu Item has been added to the cart successfully.

File: truyum-ui/menu-item-list-customer-notification.html

Field Specification

Refer Section Menu Item List Customer

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 9 of 14

 7.0 View Cart (TYUC005)

7.1 Cart
Displays the list of items added to the cart. This screen is arrived based on the navigation link in the
top of the screen from menu-item-list-customer.html.

File: truyum-ui/cart.html

Field Specification

Field Name Field Type Description

Name Label Displays the title of the menu item

Free Delivery Label Display ‘Yes’ or ‘No’ based the respective menu
item delivery status

Price Label Display the price of the menu item in currency

format with two decimal places. Should include the
currency symbol as well.

Delete Link Display ‘Delete’ link, which displays the same page
with notification message that the item is deleted
from the Cart successfully.

Menu Link Displays menu-item-list-customer.html

Cart Link Displays cart.html

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 10 of 14

 7.1 Cart Empty
Displays the view when there are no items in the cart. The Menu Item List link in the message should
point to menu-item-list-customer.html.

File: truyum-ui/cart-empty.html

Field Specification

Field Name Field Type Description

Menu Link Displays menu-item-list-customer.html

Cart Link Displays cart.html

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 11 of 14

 8.0 Remove item from Cart (TYUC005)

8.1 Remove Cart

When Customer click ‘Delete’ link in cart.html, this page is displayed with the message that the
item had been removed from the Cart successfully.

File: truyum-ui/cart-notification.html

Field Specification

Refer section View Cart

9.0 Standards and Guidelines

9.1 HTML
1. Place all HTML files under truyum-ui folder.

2. HTML5 semantic tags has to be used wherever applicable. Avoid using div tags for
header, footer, article and navigation bar.

3. Document Type should be defined as in the first line of the HTML document.
<!DOCTYPE html>
4. Form fields must always include a <label> element with a "for" attribute matching the "id".
<label for="field-email">email</label>
<input type="email" id="field-email" name="email" value="" />
5. Each form field should have "name" attribute.
6. All tag names and attributes must be written in lowercase.

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 12 of 14

 7. Inline style should be never used. Style should be in an external CSS and should be
linked to the document.
8. Image files should be placed in truyum-ui/images folder.
9. Add one more tab on the next line after opening a tag
10. Reduce one tab on line when tag is closed

9.2 CSS
1. CSS files names should be style.css
2. CSS files should be placed in truyum-ui/style folder.
3. Feel free to change the Background Color, Font, Font Size and Font Color of the screen.
But it should be applied consistently across screens using CSS. Following are the
element in the screen that can be targeted for style change:
a. Navigation Bar
b. Page Heading
c. Form Elements
d. Messages
4. Reuse styles wherever applicable. Potential areas are Application Name, Page Title,
Form Fields and Buttons
5. Selector names should be in lower case with words separated by hyphen.
.page-title {
margin: 20px;
}
6. Selector class names should be relevant to the purpose of the element where the style is
applied. For example if common style needs to be applied for all text boxes in an
application.
7. Properties should be followed by a colon and a space
8. Properties and values should be in lower case
9. Use hexadecimal code for color definition
Example:
.login-form {
background: #fdfdfd;
display: block;
margin: 0;
margin-left: 20px;
}

9.3 JavaScript
1. JavaScript file name should script.js
2. JavaScript file should be placed in folder truyum-ui/js
3. Use camelCase for variables and functions.
var firstName = "John";
function alert() {
alert("This is an alert message.");

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 13 of 14

 }
4. All variable names start with a letter.
5. Always put a space before and after an operator.
var profit = sellingPrice - buyingPrice;
6. Always end a statement with semicolon.
7. Open curly braces should be in the same line.
8. All lines following open curly braces should have one level of indent
9. Closing curly braces should be in next line with reduction of indent by one level
Example
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

10.0 Change Log

Changes Made
V1.0.0 Initial baseline created on <dd-Mon-yy> by <Name of Author>
Vx.y.z <Please refer the configuration control tool / change item status form if the
details of changes are maintained separately. If not, the template given below
needs to be followed>
Section Changed Effective Changes Effected
No. By Date

Release Id : QTAD-BREQ / 1.4.0 / 13-Jul-2016

C3: Protected Project ID : 1000180469 | 1.0 / Ver: 1.0 14 of 14