Merge branch 'main' of https://github.com/VincentRamiere/Brief_starWars
This commit is contained in:
commit
fb61e9dfd7
@ -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
156
scripts/films.js
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user