Mandatory Assignment 1

Part two (JS)

Relevant Resources

Step 1: Add

Create a new HTML-document with an unordered list element, a text-box with the placeholder Currency, and a button that says Add. Feel free to style the HTML content with CSS as you wish.

Create a new JavaScript file. Add a function that takes one variable as an argument. The function should create a new list element (<li>) containing the value of the variable and append it to the unordered list in your HTML-document. For example, if the function is called with the argument Norwegian Kroner, a new list element with the text Norwegian Kroner should be appended to your unordered list. Use this function when the button is clicked.

The text of the new li-element should correspond to the text entered by the user in the text-box. Make sure that the content of the text-box is cleared when the button is clicked to be ready for new input from the user.

Demo

Step 2: Delete

Add functionality to allow the user to delete a selected list item. When the delete button is clicked, the item should be removed from the list.

Hint: This button should be created when the list elements are added to the unordered list.

If you want to find some suitable icons to use as labels check out Font Awesome.

Demo

Step 3: Search functions

In JavaScript, modular code with small, reusable functions is common best practice. In the next couple of step, we are going to create some small JavaScript functions, and then use these to create a searchable list. To make your code structured and readable, make sure you name your functions to reflect their behavior.

A

Create a function that takes in two variables as arguments, called element and searchWord. If the value of element starts with the value of searchWord, return true, if not, return false. For example, if the function is called with the following arguments: ("Fortran", "For"), the function should return true, since the element (Fortran) starts with searchWord (For). If the arguments are ("Fortran", "Java"), it should return false.

The string startsWith method could be useful here.

B

Now, create a function that takes an array (named list), and a variable (named searchWord), as arguments. The function should iterate the array and call the function created in A with the current list element and searchWord as arguments. For instance, a call could look like this: example(list[i], searchWord). All elements where the function evaluates to true should be added to a list which is returned when the array has been iterated.

The array filter method could be useful here.

In the following example, we call the function with a list of names and the search-word (Ind). Our function returns a list of all elements in the array that starts with the search word.

functionName(["Australian dollar",
              "United States dollar",
              "Chilean peso",
              "United Arab Emirates dirham",
              "Norwegian Kroner",
              "Sterling"],
             "Uni") // search word
// [“United States dollar”, “United Arab Emirates dirham”] // expected result

Step 4: Integrating search

Add a new input-element to the same HTML-document with the placeholder Search. This textbox shall be used to search for different currencies by name. The displayed list of currencies should update according to the input provided by the user. For example, if the user types E, only currencies starting with E should be shown in the list.

Use the functions created in the previous steps to populate the unordered list based on the text provided by the user through the search box. The list should update every time the text in the input-element changes (see figure below). Make sure that the search is not case sensitive, that is, it should ignore whether the user used upper or lower-case letters.

Demo

Step 5: Population lookup (optional)

Using the concepts utilized above, create a country and population app using a live API: population.io to fetch the population figure of a given country. An example request to the API is shown below. The country Norway can be substituted with any other valid country. The API will return a completely empty response if it does not recognize the country specified.

// fetch details
{
  url: 'https://d6wn6bmjj722w.population.io/1.0/population/Norway/today-and-tomorrow/',
  accept: 'application/json'
}

// returns
{
  total_population: [
    { date: "2020-08-15", population: 5499647 },
    { date: "2020-08-16", population: 5499788 },
  ],
}

We can even get a list of all its supported countries by making a request to the countries endpoint, as shown below.

// fetch details
{
  url: 'https://d6wn6bmjj722w.population.io/1.0/countries/',
  accept: 'application/json'
}

// returns
{
  countries: [
    "Afghanistan",
    "Albania",
    ...,
    "Zambia",
    "Zimbabwe",
  ],
}

When the user has entered the name of a country and press add, your application should retrieve the population data from the API, and add the name of the country and its population figure to the list.

If the user enters something that is not recognized as a country by the API, it should not be added to the list, and an appropriate message be shown to the user. You can display this message by using a simple alert box, or by creating a more advanced, but user-friendly modal box.

How you check for an invalid country name input is up to you. You can wait for the population endpoint to return an empty response, or you can fetch the list of supported countries from the countries endpoint at page load and compare the input to the elements in that list.

Demo

Try adding countries.

Step 6: Ticking population counter (optional)

Make the population figures for all countries in your list count upwards/downwards every second to attempt to reflect the current updated figure.

Hint: To find the count rate you can use the population.io-API to get the estimated figure for today and tomorrow and divide the difference between these two on the number of seconds within 24 hours.

The setInterval method can be of help here as it executes a function every x milliseconds.

Demo

Suggestion: Try adding China, United States or Nigeria.

PrevNext Lesson