changements js et html pour ajouts boutons
This commit is contained in:
Blandine Bajard
parent
8d7069003c
commit
c01a40a823
|
|
@ -21,6 +21,13 @@
|
|||
</section>
|
||||
<section id = "reponses-films"> </section>
|
||||
<button id = "deploiement-films">Click pour le détail</button>
|
||||
<button id = "deploiement-films2">Click pour le détail</button>
|
||||
<button id = "deploiement-films3">Click pour le détail</button>
|
||||
<button id = "deploiement-films4">Click pour le détail</button>
|
||||
<button id = "deploiement-films5">Click pour le détail</button>
|
||||
<button id = "deploiement-films6">Click pour le détail</button>
|
||||
<div class = "vaisseaux-films"></div>
|
||||
<div class = "especes-films"></div>
|
||||
<div class = "image-films"></div>
|
||||
</body>
|
||||
</html>
|
||||
121
scripts/films.js
121
scripts/films.js
|
|
@ -1,23 +1,122 @@
|
|||
const FILMS = document.getElementById('reponses-films');
|
||||
const VAISSEAUX = document.getElementById('vaisseaux-films');
|
||||
const ESPECES = document.getElementById('especes-films');
|
||||
const DEPLIE = document.getElementById ('deploiement-films');
|
||||
const DEPLIE2 = document.getElementById ('deploiement-films2');
|
||||
const DEPLIE3 = document.getElementById ('deploiement-films3');
|
||||
const DEPLIE4 = document.getElementById ('deploiement-films4');
|
||||
const DEPLIE5 = document.getElementById ('deploiement-films5');
|
||||
const DEPLIE6 = document.getElementById ('deploiement-films6');
|
||||
|
||||
console.log(FILMS);
|
||||
|
||||
const API_URL = "https://swapi.dev/api/films/";
|
||||
fetch(API_URL)
|
||||
.then((response) => {
|
||||
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
|
||||
fetch(API_URL) // recupère la liste des films
|
||||
.then((response) => { // retourne une reponse
|
||||
console.log(response);
|
||||
return response.json();
|
||||
return response.json(); // sous format json
|
||||
})
|
||||
.then(afficherFilms => {
|
||||
.then(afficherFilms => { // on affiche ensuite les films
|
||||
console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){
|
||||
console.log(afficherFilms.results[index]);
|
||||
const EPISODES = afficherFilms.results[index];
|
||||
console.log(EPISODES);
|
||||
for(let index = 0; index <6; index++){ // on sait qu'il y en a 6, donc une boucle pour les afficher tous
|
||||
console.log(afficherFilms.results[index]);
|
||||
const EPISODES = afficherFilms.results[index]; // on déclare qu'un épisode est toujours la fonction avec sa boucle
|
||||
console.log(EPISODES);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "titre">${EPISODES.title}</p>
|
||||
`
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
DEPLIE.addEventListener('click', ()=>{
|
||||
|
||||
const API_URL_1 = "https://swapi.dev/api/films/1";
|
||||
fetch(API_URL_1)
|
||||
.then((response1) => {
|
||||
console.log(response1);
|
||||
return response1.json();
|
||||
})
|
||||
.then(afficherFilms => {
|
||||
/*console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){
|
||||
console.log(afficherFilms.results[index]); */
|
||||
const EPISODE1 = afficherFilms;
|
||||
console.log(EPISODE1);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "episode">Episode : ${EPISODE1.episode_id}</p>
|
||||
<p class= "directeur">Directeur : ${EPISODE1.director}</p>
|
||||
<p class= "producteur">Producteur : ${EPISODE1.producer}</p>
|
||||
<p class= "sortie">Date de Sortie : ${EPISODE1.release_date}</p>
|
||||
`
|
||||
}
|
||||
,)
|
||||
|
||||
const API_URL_VAISSEAUX = "https://swapi.dev/api/starships/"
|
||||
fetch(API_URL_VAISSEAUX)
|
||||
.then((response2)=>{
|
||||
console.log(response2);
|
||||
return response2.json();
|
||||
})
|
||||
.then(afficherVaisseaux =>{
|
||||
console.log(afficherVaisseaux);
|
||||
for (let index = 0; index <36; index++){
|
||||
console.log(afficherVaisseaux.results[index]);
|
||||
const VAISSEAU = afficherVaisseaux.results[index];
|
||||
console.log(VAISSEAU);
|
||||
|
||||
VAISSEAUX.innerHTML +=`
|
||||
<p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
|
||||
`
|
||||
}
|
||||
}
|
||||
,)
|
||||
|
||||
const API_URL_ESPECES = "https://swapi.dev/api/species/"
|
||||
fetch(API_URL_ESPECES)
|
||||
.then((response3)=>{
|
||||
console.log(response3);
|
||||
return response3.json();
|
||||
})
|
||||
.then(afficherEspeces =>{
|
||||
console.log(afficherEspeces);
|
||||
for (let index = 0; index <37; index++){
|
||||
console.log(afficherEspeces.results[index]);
|
||||
const ESPECE = afficherEspeces.results[index];
|
||||
console.log(ESPECE);
|
||||
|
||||
ESPECES.innerHTML +=`
|
||||
<p class= "Nom des Espèces">${ESPECE.name}</p>
|
||||
`
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
DEPLIE2.addEventListener('click', ()=>{
|
||||
|
||||
const API_URL_2 = "https://swapi.dev/api/films/2";
|
||||
fetch(API_URL_2)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
return response.json();
|
||||
})
|
||||
.then(afficherFilms => {
|
||||
/*console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){
|
||||
console.log(afficherFilms.results[index]); */
|
||||
const EPISODE2 = afficherFilms;
|
||||
console.log(EPISODE2);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "titre">${EPISODE2.episode_id}</p>
|
||||
<p class= "titre">${EPISODE2.director}</p>
|
||||
<p class= "titre">${EPISODE2.producer}</p>
|
||||
<p class= "titre">${EPISODE2.release_date}</p>
|
||||
`
|
||||
}
|
||||
,)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
body{
|
||||
background-image: url("../assets/imgs/starry_sky.jpg")
|
||||
background-image: url("../assets/imgs/starry_sky.jpg");
|
||||
}
|
||||
|
||||
div.image-films {
|
||||
|
|
@ -61,9 +61,30 @@ div.image-films {
|
|||
color : #FFF;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
margin-left:-350px;
|
||||
}
|
||||
|
||||
#deploiement-films {
|
||||
#deploiement-films2 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
#deploiement-films3 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
#deploiement-films4 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
#deploiement-films5 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
}
|
||||
#deploiement-films6 {
|
||||
color : #000;
|
||||
float: left;
|
||||
margin-top : 200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue