Assignment 1

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

• Due: 4th August, week 4
• Marks: 10% 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.

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

All 68 images are under data/images/

The final result should look something like the below image. We encourage you to be creative with the design of your web application, you will be rewarded for anything experimental or outside of the box.

Your project should be stored in the department’s GitLab server, altitude.otago.ac.nz. Your site should be hosted using cspages on GitLab. Ensure your repository is private and add Reuben Crimp (crire90p) 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.

Include a brief report (.pdf, .doc, .txt, …) that includes:

1. Your student ID
2. A link to your git repository
3. A link to your site
4. A brief description of any unresolved issues
5. A brief description of any enhancements or extra features for bonus marks!

Via Blackboard

The appendicies 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
  • 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 (ES5 or ES6).

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 nzdata.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.