JavaScript Web Application

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Css/ Java and html

 

JavaScript Web Application 

Assignment Aims

This assignment provides an opportunity for students to demonstrate their understanding of basic front-end web programming concepts. Students will be required to analyse a problem statement and then design and build a web application using HTML, CSS and JavaScript that provides a solution to this problem.

Learning Outcomes

• Discuss a range of client-side web and Internet technologies.

• Explain approaches to web site design and implementation.

• Apply design techniques and web technologies to build web sites.

• Develop client-side scripts to implement dynamic behaviours and interactivity.

 

Assessment Brief

A charity for endangered animals has asked you to build a web application that will allow users to find out information about endangered species. It will allow users to enter and/or select options such as habitat, conservation status and population. The application should then present information about species that match the user's search options. Your application should be based on the following information. Your application should feature the following data:

Name Category Conservation Status Estimated Population Habitat

Orangutan Mammal Critically Endangered 120000 Forest

Snow Leopard Mammal Vulnerable 4000-6500 Mountains

Tiger Mammal Endangered 4000 Forest

Indus River Dolphin Mammal Endangered 1800 Freshwater

Galapagos Penguin Bird Endangered 2000 Ocean

Polar Bear Mammal Vulnerable 22000-31000 Arctic

Hawksbill Turtle Reptile Critically Endangered 20000-23000 Ocean

Greater sage-grouse Bird Near Threatened 100000-500000 Grasslands

Giant Ibis Bird Critically Endangered 194 Forest

Lau Banded Iguana Reptile Endangered 8000-22000 Forest

 

The web application you create should meet the following basic requirements:

• The application should be written using HTML5, CSS and JavaScript.

• There should be no use of server-side scripting.

• There should be no use of JavaScript or CSS frameworks e.g. jQuery, Bootstrap.

• The application must use the data provided above. To make a more interesting final application, feel free to add information for additional animals, but you must still use the dat in the above table. 

 

Don’t Panic

At first glance the assignment can seem very difficult. You don’t need a perfect application to pass or even to get a good grade. If you look at the assessment criteria you can show a basic level of understanding by using prompt boxes to gather user preferences, matching against a single animal and using the console to feedback to the user. By gradually implementing more complex functionality e.g. gathering data using an HTML form, you can improve the grade. 

 

 

Higher marks will be awarded to applications that:

Provide flexible matching. For example, the user may be able to specify a range of estimated population sizes they would like to search within, the user may be able to specify 'no preference' for some criteria e.g. the user might not care about the animals habitat, or the user may be able to select multiple options e.g. specifying mammals and reptiles. This is a challenge not only of your programming abilities (flexible matching and selection is harder to implement), but also of your design abilities. You will need to select appropriate form controls and think carefully about how to word questions to create an application that is intuitive and easy to use.

Provide an image of matching animals. You should be able to find example images of each of the species in the above table. When the search results are presented an image of each animal should be displayed.  The images should be licensed for re-use. 

 

Marking Scheme

HTML, CSS and design (30%)

You will need to create an HTML form and apply CSS even if you don’t get as far as form processing in your JavaScript code. When assessing the HTML and CSS the following requirements will be considered: 

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of