Assignment 1

Build the front-end for a web application to browse the NZBirds dataset.

• Due: 8th August, week 4
• Marks: 15% of your final grade

The data set contains 68 species of NZ birds and has been compiled by University of Otago in collaboration with The National Museum of NZ (Te Papa), the Department of Conservation (DOC) and the Ornithological Society of NZ (Birds NZ). There are also 68 images that have been made available by individual bird photographers of New Zealand.

This data was kindly provided to us under good faith under the condition it is only used for research and educational purposes here at the University of Otago.

The NZBirds datasets is made up of 68 JPEG images (one for each bird) and a single JSON file that contains information about each bird including the filename for the image for each bird.

The JSON file and the images files for the datasets are available in two places:

• On Blackboard under the Assignments section. Look for data.zip.

• In the Owheo lab environment at K:\COSC203\assignment1_data

{
   "primary_name": "K\u0101k\u0101",
   "english_name": "Kaka",
   "status": "Recovering",
   "photo": {
      "credit": "Judi Lapsley Miller",
      "source": "data/images/kaka-30.jpg"
   }
}

The final result should look something like the example solution that is linked below. We encourage you to be creative with the design of your web application There will be bonus marks for anything beyond the stated requirements or outside of the box.

Example Solution

Your project should be stored in the School of Computing’s GitLab server, altitude.otago.ac.nz. Your site should be hosted using cspages on GitLab using the GitLab Pages feature. Ensure your repository is private and add Mark George (geoma48p) as a Reporter (not Guest).

We will validate academic integrity with plagiarism detection software. So, make sure your Git repo is set to private. If there are any false positives, we will manually inspect git logs to determine provenance. Your Git repository should show a history of you working on the project throughout the semester — having only one or two large commits is not acceptable, and will result in mark deductions.

Include a brief report (PDF, plain text, or Markdown) that includes:

1. Your student ID
2. A link to your git repository
3. A link to your deployed application on GitLab Pages.
4. A brief description of any unresolved issues
5. A brief description of any enhancements or extra features believe might we worth bonus marks

Submission instructions will be posted on Blackboard closer to the deadline.

The appendices below contain specific information about the project requirements. The marking rubric below is a rough guide to how your assignment will be marked.

*You must identify any extra feature(s) in your report.

1. Site Content
   • Display all 68 birds and their photos
   • Display the bird’s name in both Māori and English
   • Display the bird’s conservation status in both text and colour
     • The colour could be a circular emblem, an accent, literally anything!
     • See the status property in nzbird.json and Appendix C below for more info
   • Credit the photographer for each image displayed
     • See the photo.credit property in nzbird.json
   • Credit https://www.birdsnz.org.nz/ in the page <footer>
2. Search Feature
   • A form to filter the birds
   • A search box to filter by a query string
     • query string should be matched against all the birds different names
       • Māori, English, scientific, etc…
   • A dropdown menu to filter by category
     • Where the category is conservation status (see Appendix A below)
3. Bonus Marks
   • Include something extra, something useful, something shiny.
   • The JSON file includes extra data, maybe use that somehow?

• This assignment is a Single-page application (SPA) so you only need 1 HTML file (named index.html)
  • You may include multiple pages if necessary.
• Correctly use Semantic Elements:
  • <header>, <footer>, <main>, <aside>, <section>, etc…
  • You probably won’t need <nav> as a SPA does not have page navigation.
• Correctly use Form Elements:
  • <form>, <input>, <label>, <button>, <select>, <option>
• Your HTML must pass the W3C Validator with 0 errors and 0 warnings

• Your design should look nice, you have plenty of creative freedom with the site.
• You should use pure CSS to style the web app (Bootstrap, or any other styling/layout framework should not be used)
  • You should <link> the stylesheet from a separate .css file(s).
  • Avoid inline styles.

Since we are developing for modern web browsers, your JavaScript code may target any modern ECMAScript standard (ES6 or above).

You may use first-class function declarations:

function funcName(param) { return param };

You may use arrow function expressions (lambda syntax):

const funcName = (param) => { return param };

• The nzbird.json file should be retrieved asynchronously with JavaScript’s Fetch function.
• You should always handle any potential errors when fetching data.

You could use fetch with promises

function fetchData() {
	fetch('https://website.com/file.json') // fetch data from API
		.then(response => response.json()) // parse to JSON
		.then(data => console.log(data)) // use the data
		.catch(error => console.error(error)) // error handling
	});
}

Or you could use fetch with async/await

async function fetchData() {
	const response = await fetch('https://website.com/file.json');
	if (!response.ok){
		console.error(response.status}); // error handling
	}
	const data = response.json()  // parse to JSON
	console.log(data); // use the data
}

After you have fetched the data, your site should use JavaScript’s DOM manipulation functions to create the elements for each bird’s data/photo. You may find the following functions useful:

• document.querySelector()
• document.createElement()
• document.appendChild()

• For the search feature, you will need to compare strings. Many words in the NZBird dataset contain diacritics (the accents found in many Māori words).
  • The search string "Kaka" should match with the string "Kākā"
  • We recommend using the normalize() function with Unicode Normalization Form C
    • myString.normalize("NFC")
• Converting all strings to lower-case may also improve search results
• You may find JavaScript’s array functions useful (possibly)
  • myArray.filter()
  • myArray.sort()
  • myArray.find()
  • myArray.forEach()

The conservation status of each bird comes directly from the Department of Conservation (DOC). Each status level indicates how endangered the species is. Each status level also has an associated colour, which is provided below:

For more information about conservation status visit the Department of Conservation (DOC) website.