window.onload = init;

// let b;

​

let liste;

​

function init() {

    // on récupère la liste ul avec selector API

    // param = selecteur CSS

​

   liste = document.querySelector("#listeRestaus");

  afficherLesRestaurants();

  // on aurait pu faire ça

  //b = document.querySelector("#boutonAjouter");

  //b.addEventlistener("click", ajouterRestaurant)

}

​

let restaurants = [

  {

    id:1,

    nom:'Sun city café',

    cuisine: 'francaise'

  },

  {

    id:2,

    nom:'Café de Paris',

    cuisine: 'Française'

  }

];

​

function afficherLesRestaurants() {

  console.log("afficher les restaurants");

  restaurants.forEach(r => {

    console.log(r.nom);

    // on rajoute le li au ul

    liste.append(creerUnLI(r));

  })

}

​

function creerUnLI(r) {

      // on cree un li, avec API du DOM

    let li = document.createElement("li");

    li.id = r.id;

    li.innerHTML = r.nom + ", cuisine " + r.cuisine;

    li.onclick = function(event) {

      console.log("suprimer");

      // event.targer = le li qu'on a cliqué

      supprimerRestaurant(event.target);

    }

​

    return li;

}

​

function ajouterRestaurant() {

  let nom = document.querySelector("#nom").value;

  let cuisine = document.querySelector("#cuisine").value;

  console.log("Ajout du restaurant " + nom);

​

  // on le rajoute au tableau 

  const nouveauRestaurant = {

    id: Math.random(),

    nom: nom,

    cuisine: cuisine

  }

  restaurants.push(nouveauRestaurant);

  console.log(restaurants);

​

    // on rajoute le li au ul

    liste.append(liste.append(creerUnLI(nouveauRestaurant)));

}

​

function supprimerRestaurant(li) {

  console.log("supprimer restaurant id=" + li.id);

  for(let i = 0; i < restaurants.length; i++) {

    if(restaurants[i].id == li.id) {

        // supprime 1 element à la position i

        restaurants.splice(i, 1);

​

      break;

    }

  }

  // On doit aussi supprimer le li de l'affichage

  li.parentNode.removeChild(li);

  // ou liste.removeChild(li)

}