vincentRamiere/Brief_starWars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modif films.html et films.js

Browse Source
This commit is contained in:
Vincent Ramiere 2021-10-19 15:49:48 +02:00
parent b6904486e8
commit 3b0f0dc056
2 changed files with 136 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
films.html
View File

@ -1,19 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brief Star Wars - Films</title> <title>Brief Star Wars - FILMS</title>
<script src="./scripts/films.js" defer></script> <script src="./scripts/films.js" defer></script>
</head> </head>
<body> <body>
<h1>People</h1> <h1>FILMS</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<section id="container" style="font-size:12px;"> <section id="container" style="font-size:12px;">
</section> </section>
<div class="boutons"> <div class="boutons">

156
scripts/films.js
View File

@ -1,27 +1,135 @@
const FILMS = document.getElementById('container'); const API_URL = "https://swapi.dev/api/films/?page=";
const API_URL = "https://swapi.dev/api/films"; let pageEnCours = 1;
fetch(API_URL) // function pour afficher les films et leur correspondances
.then((reponse) => { async function getMovies() {
//console.log(reponse); const url = 'http://swapi.dev/api/films';
return reponse.json() const FILMS = await fetch(API_URL+pageEnCours);
}) const FILM = await FILMS.json();
.then(reponseFormat => { const total_pages = FILM.count/FILM.results.length;
for(let index = 0; index < reponseFormat.results.length; index++){
//console.log(reponseFormat.results[index]); // on vide le div
const data = reponseFormat.results[index]; document.getElementById('container').innerHTML = "";
console.log(data);
// boucle pour parser les films
FILMS.innerHTML +=` for(i=0;i<FILM.results.length;i++){
<p div class="films">${data.title}</p> const TITRE = FILM.results[i].title;
<p div id="episode_id">${data.episode_id}</p> // const planets = await fetch(people.results[i].homeworld);
<p div id="opening_crawl">${data.opening_crawl}</p> // const planet = await planets.json();
<p div id="director">${data.director}</p> //console.log(hero+' '+planet.name);
<p div id="producer">${data.producer}</p>
<p div id="release_date">${data.release_date}</p> // variable pour la concatenation des films
<p div id="starships">${data.starships}</p> let movies = "";
<p div id="species">${data.starships}</p>
<hr>` // boucle pour parser les films
// for(j=0;j<people.results[i].films.length;j++){
// const films = await fetch(people.results[i].films[j]);
// const film = await films.json();
// console.log(film.title);
// movies += `<p>${film.title}</p>`;
// }
document.getElementById('container').innerHTML += `
<p>
<h2>${TITRE}</h2>
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
<div id="detailsStarships${i}"></div>
<button class="species" value="${FILM.results[i].species}">Voir les especes</button>
<div id="detailsSpecies${i}"></div>
</p>
<hr>
`;
}
const BUTTONS = document.querySelectorAll('.starships');
for(var i = 0;i < BUTTONS.length;i++){
let BUTTON = BUTTONS[i];
BUTTON.addEventListener("click", function() {
//console.log(BUTTON.nextElementSibling);
getStarships(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
const BUTTONS1 = document.querySelectorAll('.species');
for(var i =0; i<BUTTONS1.length; i++){
let BUTTON1 = BUTTONS1[i];
BUTTON1.addEventListener("click", function() {
getSpecies(BUTTON1.value,BUTTON1.nextElementSibling.id);
}
);
}
}
// function pour afficher les vaisseaux
async function getStarships(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<liste.length;i++){
console.log(url[i]);
const VAISSEAUX = await fetch(url[i]);
const VAISSEAU = await VAISSEAUX.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${VAISSEAU.name}</h2>`;
}
}
async function getSpecies(liste,div){
const url = liste.split(',');
document.getElementById(div).innerHTML = "";
for(i=0;i<liste.length;i++){
const ESPECES = await fetch(url[i]);
const ESPECE = await ESPECES.json();
document.getElementById(div).innerHTML += `<h2>${ESPECE.name}</h2>`;
}
} }
})
// boucle pour afficher les boutons de navigations
fetch(API_URL)
.then(response => response.json())
.then(data => {
let totalPages = data.count / data.results.length;
for (let index = 1; index < totalPages +1; index++) {
document.getElementById('buttons').innerHTML += `
<button class="allButtons boutonNum" name="${index}" value="${index}"> ${index} </button>`;
}
let buttons = document.querySelectorAll('.allButtons');
let boutonNum = document.querySelectorAll('.boutonNum');
console.log(boutonNum);
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
if (e.target.name === "moins" || e.target.name === "plus"){
pageEnCours = pageEnCours + parseInt(e.target.value);
if(pageEnCours < 1){
pageEnCours = 1;
}else if(pageEnCours > boutonNum.length){
pageEnCours = boutonNum.length;
}
}else{
pageEnCours = parseInt(e.target.value);
}
getMovies();
});
}});
// initialisation de la page, pour un affichage au chargement
getMovies();