JavaScript In Practice: ES6 And Beyond/

...

/

Exercise on String and Template Literals

Exercise on String and Template Literals

Practice your string and template literals by printing an array in a tabular format, manipulating strings, printing emojis, and playing with if-else clauses.

We'll cover the following...

Exercise 1:

Use template literals to create a table that prints the following array in a tabular format.

Press + to interact
let departures = [
    {
        id                    : 'KL 1255',
        destination           : 'Amsterdam',
        departureTime         : '21:55',
        gate                  : 'A13',
    },
    {
        id                    : 'OK 001',
        destination           : 'Prague',
        departureTime         : '20:40',
        gate                  : 'A13',
        status                : 'Check-in'
    },
    {
        id                    : '4U 2011',
        destination           : 'Stuttgart', 
        departureTime         : '20:35',
        gate                  : 'A11',
        status                : 'Check-in'
    },
    {
        id                    : 'LX 911',
        destination           : 'Zurich',
        departureTime         : '20:15',
        expectedDepartureTime : '21:15',
        status                : 'check-in'
    },
    {
        id                    : 'OS 133',
        destination           : 'Vienna',
        departureTime         : '19:25',
        gate                  : 'A06',
        status                : 'Departed'  
    }
];
let headers = {
    id                    : 'Id',
    destination           : 'Destination',
    departureTime         : 'DepartureTime',
    expectedDepartureTime : 'Expected Departure Time',
    gate                  : 'Gate',
    status                : 'Status'
}
//Write your code here...
  • We will build our solution brick by brick and start with the table header.
  • We will then create a template literal for one table row. For the sake of simplicity, we will use departures[0] as sample data.
  • We already know how to insert one row into a template. We will then insert all rows.

In real life, you might want to research escaping the result, and automatizing some parts of the template building process. By substituting the variables recursively in the template ...