Skip to content

Afficher les données sous forme de liste dans la page html

Notifications You must be signed in to change notification settings

simplonco/js-basic-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

js-basic-list

1. Afficher les données ci-dessous sous forme de liste dans une page html :

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.

2. Ajouter 2 boutons intitulés JS et CSS dans la page html qui permettent de filtrer, respectivement, les livres de type CSS et JS.

About

Afficher les données sous forme de liste dans la page html

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published