Requirements

Tools to use:

JS

Bootstrap 4.1.2

Basic CSS only

Website Name:

Paws to Care

Follow this Process:

data 3 sets of real data (law of 3, law of real data)

gui complete gui html/css with embedded data (Vanilla CSS, dont use anything but vanilla CSS)

json same html dynamically generated from hardcoded json variable

ajax json from web server from a file

Vet

Cynthia (Owner)

Triska (Practice manager)

Check cutting/ supporter (Audience)

Frank (Supporter)

Practice is a partnership:

3 partners (Cynthia, husband, and two others)

2 new vets

Website

3 target audiences:

Public facing

Open 9-6

Story

Dunham Lane

Meet the vets

Customer Login

Info about pets

Admin (Business Users)

See all animals

Change data

Dogs (3 samples)

name

breed

sex

shots

age

size s < 20, m<50, l<100, g

licensed

neutered

owners

notes

Cats (3 samples)

name

breed

sex

shots

age

declawed

neutered

owners

notes

Exotics, which are farm animals (3 samples)

name

species

sex

age

owners

notes

Navbar with links to

home (public) - static html

dogs (admin, user)

cats (admin, user)

exotics (admin, user)

contact (public) - static html

about us (public) - static html

Value

Minimum (phase 1)

Cut down on phone calls

Look up animal info quicklyPages on animals

Dogs

Cats

Exotics

Two pages on first phase

Admin

Public

More information on requirements

Paws to Care contracted with you to build their web site.

Phase I Requirements

Build these public pages, all of which share a common navbar. They are all static html pages.

home

contact [us]

about [us]

Build these admin pages, all of which share a common navbar.

home

dogs

cats

exotics

contact [us]

about [us]

You may only use Bootstrap, jQuery, and LoDash--no other libraries. You must include them by CDN. You may not do any custom CSS except for

.clickable {

cursor: pointer;

}

Tables

The three animal pages each has a table of data.

Sortable

Each column should be sortable if sorting provides value. Clicking the column heading will sort the rows in ascending order and display the up triangle. You must use the literal character for an up triangle in your code. Clicking the same column again results in reversing the sort order and displaying the down triangle.

Filterable

String columns such as name should have a text box above the column with the placeholder of filter. Anything typed in the filter box will filter out the rows by keeping only the rows that start with the same letters. Use the change event to trigger the filtering. The filtering must be done using Array.prototype.filter function on the json array. Use the String.prototype.startsWith function as the filter predicate. The filtering must be case insensitive.

Modals

Each of the three tables ends with Owner and Notes columns. The row contents for both columns is a link that pops up a modal. The modals are just a stubs for Phase I. Like all stubs, they need only identify themselves. They won't have any useful info in them.

Code I have so far

Admin.html

• Home

• Contact

• About

Home info

name	breed	sex	shots	age	size	licensed	neutered	owners	notes

Contact info

About us info

pets.js

$.ajax({

url: '/echo/json/',

type: "post",

dataType: "json",

data: {

json: JSON.stringify([

{

"name": "Rocky",

"breed": "Bulldog",

"sex": "Male",

"shots": "True",

"age": "10",

"size": "Large",

"licenced": "True",

"neutered": "False",

"owners": "Adam",

"notes": "None"

},

{

"name": "Snowflake",

"breed": "Husky",

"sex": "Male",

"shots": "True",

"age": "12",

"size": "Large",

"licenced": "True",

"neutered": "False",

"owners": "Henry",

"notes": "None"

},

{

"name": "Lassie",

"breed": "$Poodle",

"sex": "Female",

"shots": "True",

"age": "8",

"size": "Small",

"licenced": "True",

"neutered": "False",

"owners": "Susan",

"notes": "None"

}

]),

delay: 1

},

success: function(data, textStatus, jqXHR) {

drawTable(data);

}

});

function drawTable(data) {

for (var i = 0; i < data.length; i++) {

drawRow(data[i]);

}

}

function drawRow(rowData) {

var row = $("")

$("#tblDogs").append(row);

row.append($("" + rowData.name + ""));

row.append($("" + rowData.breed + ""));

row.append($("" + rowData.sex + ""));

row.append($("" + rowData.shots + ""));

row.append($("" + rowData.age + ""));

row.append($("" + rowData.size + ""));

row.append($("" + rowData.licenced + ""));

row.append($("" + rowData.neutered + ""));

row.append($("" + rowData.owners + ""));

row.append($("" + rowData.notes + ""));

}

Cats.json

[

{

"name": "Pepper",

"breed": "Korat",

"sex": "Male",

"shots": "True",

"age": "2",

"declawed": "True",

"neutered": "False",

"owners": "Linda",

"notes": "None"

},

{

"name": "Salt",

"breed": "Manx",

"sex": "Male",

"shots": "True",

"age": "4",

"declawed": "True",

"neutered": "False",

"owners": "Lindsay",

"notes": "None"

},

{

"name": "Bengal",

"breed": "",

"sex": "Female",

"shots": "True",

"age": "9",

"declawed": "True",

"neutered": "True",

"owners": "Patrick",

"notes": "None"

}

]

Dogs.json

[

{

"name": "Rocky",

"breed": "Bulldog",

"sex": "Male",

"shots": "True",

"age": "10",

"size": "Large",

"licenced": "True",

"neutered": "False",

"owners": "Adam",

"notes": "None"

},

{

"name": "Snowflake",

"breed": "Husky",

"sex": "Male",

"shots": "True",

"age": "12",

"size": "Large",

"licenced": "True",

"neutered": "False",

"owners": "Henry",

"notes": "None"

},

{

"name": "Lassie",

"breed": "$Poodle",

"sex": "Female",

"shots": "True",

"age": "8",

"size": "Small",

"licenced": "True",

"neutered": "False",

"owners": "Susan",

"notes": "None"

}

]

Exotic.json

[

{

"name": "Captain",

"species": "Horse",

"sex": "Male",

"age": "5",

"size": "Medium",

"owners": "Cassie",

"notes": "None"

},

{

"name": "Pancake",

"species": "Bunny",

"sex": "Male",

"age": "2",

"size": "Small",

"owners": "Kim",

"notes": "None"

},

{

"name": "Feathers",

"species": "Chicken",

"sex": "Female",

"age": "3",

"size": "Small",

"owners": "Jann",

"notes": "None"

}

]