Commit 3806e5a2 authored by Evan GISDAL's avatar Evan GISDAL

Fin du tp3 avec ajout informations dans popup et ajouts css

parent b8f7e420
......@@ -52,6 +52,10 @@ header{
display: inline-block;
}
#main a{
text-decoration: none;
}
#albums{
visibility: visible;
width:500px;
......@@ -63,6 +67,24 @@ header{
padding-bottom: 0.5em
}
#albums img{
height: 75px;
width: 75px;
}
#albums td{
padding-right: 20px;
}
#albums h2{
background-color: steelblue;
height: 40px;
position: relative;
top: -20px;
color: white;
}
footer{
text-align: center;
padding: 0.5em 0;
......
//TP3 WEB INFO3 G2
//HUMBERT Antoine et GISDAL Evan
//lien git: https://gitlab.univ-nantes.fr/E19A613A/tp3-web-xml
//TP3 WEB INFO3 G2 VERSION FINALE
//Travail en binome : HUMBERT Antoine et GISDAL Evan
//Lien git: https://gitlab.univ-nantes.fr/E19A613A/tp3-web-xml
'use strict';
......@@ -13,12 +13,22 @@ console.log('Almost Everything Is Asynchronous');
let urlGenre = 'http://localhost:3000/genres';
//Apparition de la popup aside lors d'un click sur un artiste
async function artistSelected(evt) {
try {
let artistID = evt.target.parentElement.id;
let resp = await fetch(`http://localhost:3000/artists/${artistID}/albums`);
if (resp.ok) {
resp = await resp.json();
let aside = document.querySelector('aside');
let tbody, td;
//On enleve les images qui persistent
while (aside.querySelector('tbody td') !== null) {
td = aside.querySelector('tbody td');
td.remove();
}
aside.style.visiblity = 'visible';
aside.style.opacity = '1';
aside.style.transition = 'all 1s ease-out';
......@@ -29,9 +39,33 @@ async function artistSelected(evt) {
let button = aside.querySelector('button');
console.log(button);
button.addEventListener('click', () => aside.style.opacity = '0');
button.addEventListener('click', () => {
aside.style = '';
});
console.log(resp);
tbody = aside.querySelector('tbody');
console.log(tbody);
resp.forEach((element) => {
let tr = document.createElement('tr');
let popupCover = document.createElement('td');
let imageCover = document.createElement('img');
imageCover.setAttribute('src', `${element.cover}`);
imageCover.setAttribute('alt', `image of ${element.title}`);
popupCover.appendChild(imageCover);
let popupTitle = document.createElement('td');
popupTitle.innerHTML = element.title;
let popupYear = document.createElement('td');
popupYear.innerHTML = element.year;
let popupLabel = document.createElement('td');
popupLabel.innerHTML = element.label;
tr.appendChild(popupCover);
tr.appendChild(popupTitle);
tr.appendChild(popupYear);
tr.appendChild(popupLabel);
tbody.appendChild(tr);
console.log(tbody);
});
}
else {
throw new Error('Mauvaise réponse du réseau');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment