Chaque element de la liste HTML doit comprendre :
- un titre (title)
- un auteur (author)
- un lien (link)
- un type (type)
var books = [
{
title: 'CSS: The Definitive Guide',
author: 'Eric Meyer',
link: 'https://shop.oreilly.com/product/0636920012726.do',
type: 'css'
},
{
title: 'CSS Development with CSS3',
author: 'Zachary Kingston',
link: 'https://shop.oreilly.com/product/0636920057970.do',
type: 'css'
},
{
title: 'You Don\'t Know JS: Up & Going',
author: 'Kyle Simpson',
link: 'https://shop.oreilly.com/product/0636920039303.do',
type: 'js'
},
{
title: 'Programming JavaScript Applications',
author: 'Eric Elliott',
link: 'https://shop.oreilly.com/product/0636920033141.do',
type: 'js'
},
{
title: 'Modern JavaScript',
author: 'unknown',
link: 'https://www.oreilly.com/web-platform/free/modern-javascript.csp',
type: 'js'
}
] ;
Pour reussir cet exercice, vous devez :
- boucler sur les elements du tableau javascript
- créer un element HTML parent pour chaque element du tableau javascript (rappel: document.createElement('li') par exemple)
- créer pour chaque propriétés (title, author, link, type) de chaque element du tableau, un element HTML (rappel: document.createElement('p') par exemple)
- Ajouter les elements HTML correspondant à chaque propriétés (title, author, link, type) à l'element HTML parent (celui créé auparavant)
- Au final, vous devez ajouter (appendChild) chaque element parent à un element UL existant dans le HTML
NB : n'oubliez pas de rajouter du style css.