Extension: Dictionaries to HTML

In this exercise, your task is to create a generic function that will display information in a simple HTML element. The function should:

  1. read the keys in the dictionary
  2. display the data from the dictionary in the order of the keys
  3. the element should be styled as required
You should test this funciton with two dictionaries - the dictionaries in cards.js and the dictionaries in cars.js

Remember that the SAME function will take each dictionary as a parameter on TWO different calls and create the elements according to the contents of the dictionary - the code will not be changed.

image of cars dictionary


You need to know that there is a built-in function called Object.keys()that will return a list of the keys given a dictionary. It works in the following way:

  1. Object.keys() is the function
  2. the dictionary is passed inside the brackets Object.keys(someDictionary) as shown here
  3. the array/list is returned
  4. remember that to access an element in a list we can use its ordinal number i.e. the position of where it is in the list whcih is indexed from 0 in JS
This is a good challenge for you to attempt! Enjoy!!!

image of cars dictionary