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

update films.js et films.html

Browse source
This commit is contained in:
Vincent Ramiere 2021-10-19 21:47:54 +02:00
parent b2a39dbced
commit e048663302
2 changed files with 89 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
films.html
View file

@ -4,16 +4,27 @@
<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>Films - Star Wars Choubaka</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./scripts/films.js" defer></script> <script src="./scripts/films.js" defer></script>
</head> </head>
<body> <body>
<h1>FILMS</h1> <header>
<nav class="navSearch">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="films.html">Films</a></li>
<li><a href="people.html">Personnages</a></li>
<li><a href="planetes.html">Planètes</a></li>
</ul>
</nav>
</header>
<h1>Films</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <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 class="container" id="container"></section>
<div class="boutons"> <div class="boutons">
<button class="allButtons" name="moins" value="-1"> < </button> <button class="allButtons" name="moins" value="-1"> < </button>
@ -21,6 +32,6 @@
<button class="allButtons" name="plus" value="+1"> > </button> <button class="allButtons" name="plus" value="+1"> > </button>
</div> </div>
<footer></footer>
</body> </body>
</html> </html>

143
scripts/films.js
View file

@ -2,91 +2,91 @@ const API_URL = "https://swapi.dev/api/films/?page=";
let pageEnCours = 1; let pageEnCours = 1;
// function pour afficher les films et leur correspondances // Fonction pour afficher les films et leur correspondances
async function getMovies() { async function getMovies() {
const url = 'http://swapi.dev/api/films'; const url = 'http://swapi.dev/api/films';
const FILMS = await fetch(API_URL+pageEnCours); const FILMS = await fetch(API_URL+pageEnCours);
const FILM = await FILMS.json(); const FILM = await FILMS.json();
const total_pages = FILM.count/FILM.results.length; const total_pages = FILM.count/FILM.results.length;
// on vide le div // On vide le container
document.getElementById('container').innerHTML = ""; document.getElementById('container').innerHTML = "";
// boucle pour parser les films // Boucle pour parser les films
for(i=0;i<FILM.results.length;i++){ for(i=0;i<FILM.results.length;i++){
const TITRE = FILM.results[i].title; const TITRE = FILM.results[i].title;
const EPISODE = FILM.results[i].episode_id; const EPISODE = FILM.results[i].episode_id;
const OPENING = FILM.results[i].opening_crawl; const OPENING = FILM.results[i].opening_crawl;
const DIRECTOR = FILM.results[i].director; const DIRECTOR = FILM.results[i].director;
const PRODUCER = FILM.results[i].producer; const PRODUCER = FILM.results[i].producer;
const DATE = FILM.results[i].release_date; const DATE = FILM.results[i].release_date;
// const planets = await fetch(people.results[i].homeworld); // Variable pour la concatenation des films
// const planet = await planets.json(); let movies = "";
//console.log(hero+' '+planet.name);
// variable pour la concatenation des films // Boucle pour parser les films
let movies = ""; document.getElementById('container').innerHTML += `
<section class="card">
<h2>${TITRE}</h2>
// boucle pour parser les films <div class="data">
// for(j=0;j<people.results[i].films.length;j++){ <h3> Episode ID : </h3>
// const films = await fetch(people.results[i].films[j]); <p>${EPISODE}</p>
// const film = await films.json(); </div>
// console.log(film.title);
// movies += `<p>${film.title}</p>`;
// }
document.getElementById('container').innerHTML += `
<section class="card">
<h2>${TITRE}</h2> <div class="data">
<h3> Opening Crawl : </h3>
<p>${OPENING}</p>
</div>
<div class="data"> <div class="data">
<h3> Episode ID : </h3> <h3>Director : </h3>
<p>${EPISODE}</p> <p>${DIRECTOR}</p>
</div> </div>
<div class="data"> <div class="data">
<h3> Opening Crawl : </h3> <h3>Producer(s) :</h3>
<p>${OPENING}</p> <p> ${PRODUCER}</p>
</div> </div>
<div class="data">
<h3>Release Date :</h3>
<p>${DATE}</p>
</div>
<p>Director : ${DIRECTOR}</p> <div class="data">
<p>Producer(s) : ${PRODUCER}</p> <button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
<p>Release Date : ${DATE}</p> <div id="detailsStarships${i}"></div>
</div>
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button> <div class="data">
<div id="detailsStarships${i}"></div> <button class="species" value="${FILM.results[i].species}">Voir les especes</button>
<button class="species" value="${FILM.results[i].species}">Voir les especes</button> <div id="detailsSpecies${i}"></div>
<div id="detailsSpecies${i}"></div> </div>
</section>
`;
}
// Bouton pour l'affichage des vaiseaux
const BUTTONS = document.querySelectorAll('.starships');
for(var i = 0;i < BUTTONS.length;i++){
let BUTTON = BUTTONS[i];
BUTTON.addEventListener("click", function() {
getStarships(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
</section> // Bouton pour l'affichage des espèces
<hr> 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);
});
}
}
const BUTTONS = document.querySelectorAll('.starships'); // Fonction pour afficher les vaisseaux
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) { async function getStarships(liste,div) {
const url = liste.split(','); const url = liste.split(',');
console.log(div); console.log(div);
@ -95,26 +95,25 @@ async function getStarships(liste,div) {
console.log(url[i]); console.log(url[i]);
const VAISSEAUX = await fetch(url[i]); const VAISSEAUX = await fetch(url[i]);
const VAISSEAU = await VAISSEAUX.json(); const VAISSEAU = await VAISSEAUX.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${VAISSEAU.name}</h2>`; document.getElementById(div).innerHTML += `<h3>${VAISSEAU.name}</h3>`;
} }
}
// Fonction pour afficher les espèces
}
async function getSpecies(liste,div){ async function getSpecies(liste,div){
const url = liste.split(','); const url = liste.split(',');
document.getElementById(div).innerHTML = ""; document.getElementById(div).innerHTML = "";
for(i=0;i<liste.length;i++){ for(i=0;i<liste.length;i++){
const ESPECES = await fetch(url[i]); const ESPECES = await fetch(url[i]);
const ESPECE = await ESPECES.json(); const ESPECE = await ESPECES.json();
document.getElementById(div).innerHTML += `<h2>${ESPECE.name}</h2>`;
document.getElementById(div).innerHTML += `<h3>${ESPECE.name}</h3>`;
} }
} }
// boucle pour afficher les boutons de navigations // Boucle pour afficher les boutons de navigations
fetch(API_URL) fetch(API_URL)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -154,5 +153,5 @@ fetch(API_URL)
}}); }});
// initialisation de la page, pour un affichage au chargement // Initialisation de la page, pour un affichage au chargement
getMovies(); getMovies();