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

modif des js

Browse source
This commit is contained in:
HediMjid 2021-10-20 12:25:27 +02:00
parent 438c3ba8b2
commit 0b77dedc1c
3 changed files with 81 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scripts/films.js
View file

@ -55,12 +55,12 @@ async function getMovies() {
</div> </div>
<div class="data"> <div class="data">
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button> <button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux +</button>
<div id="detailsStarships${i}"></div> <div id="detailsStarships${i}"></div>
</div> </div>
<div class="data"> <div class="data">
<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> </div>
</div> </div>

8
scripts/people.js
View file

@ -55,7 +55,7 @@ class People {
<p>${this.gender}</p> <p>${this.gender}</p>
</div> </div>
<button class="films" value="${this.films}">Voir les films</button> <button class="films" value="${this.films}">Voir les films +</button>
<div id="detailsFilms${this.index}"></div> <div id="detailsFilms${this.index}"></div>
</div> </div>
</section> </section>
@ -70,9 +70,6 @@ async function getPeople() {
const total_pages = people.count/people.results.length; const total_pages = people.count/people.results.length;
tableau_perso = []; tableau_perso = [];
// on vide le div // on vide le div
document.getElementById('container').innerHTML = ""; document.getElementById('container').innerHTML = "";
@ -197,7 +194,8 @@ function searchPeople() {
const accordion = document.getElementsByClassName('etendre'); const accordion = document.getElementsByClassName('etendre');
for (i=0; i<accordion.length; i++) { for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () { accordion[i].addEventListener('click', function (e) {
e.preventDefault();
//console.log('this.nextElementSibling'); //console.log('this.nextElementSibling');
this.nextElementSibling.classList.toggle('active'); this.nextElementSibling.classList.toggle('active');
}); });

78
scripts/planetes.js
View file

@ -1,5 +1,6 @@
const API_URL = "https://swapi.dev/api/planets/?page="; const API_URL = "https://swapi.dev/api/planets/?page=";
let pageEnCours = 1; let pageEnCours = 1;
let tableau_perso = new Array();
// function pour afficher les planetes et leur correspondances // function pour afficher les planetes et leur correspondances
@ -7,6 +8,7 @@ async function getPlanets() {
const PLANETS = await fetch(API_URL+pageEnCours); const PLANETS = await fetch(API_URL+pageEnCours);
const PLANET = await PLANETS.json(); const PLANET = await PLANETS.json();
const total_pages = PLANET.count/PLANET.results.length; const total_pages = PLANET.count/PLANET.results.length;
tableau_perso = [];
// on vide le div // on vide le div
document.getElementById('container').innerHTML = ""; document.getElementById('container').innerHTML = "";
@ -61,17 +63,19 @@ async function getPlanets() {
<p>${POPULATION}</p> <p>${POPULATION}</p>
</div> </div>
<div class="data"> <div class="data">
<button class="films" value="${PLANET.results[i].films}">Films</button> <button class="films" value="${PLANET.results[i].films}">Voir les films +</button>
<div id="detailsFilms${i}"></div> <div id="detailsFilms${i}"></div>
</div> </div>
<div class="data"> <div class="data">
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button> <button class="residents" value="${PLANET.results[i].residents}">Voir les résidents +</button>
<div id="detailsResidents${i}"></div> <div id="detailsResidents${i}"></div>
</div> </div>
</div> </div>
</section> </section>
`; `;
tableau_perso.push({name:PLANET_NAME,rotation:ROTATION_PERIOD,orbital:ORBITAL_PERIOD,diameter:DIAMETER,climate:CLIMATE,gravity:GRAVITY,terrain:TERRAIN,surface:SURFACE_WATER,population:POPULATION});
} }
const BUTTONS_FILMS = document.querySelectorAll('.films'); const BUTTONS_FILMS = document.querySelectorAll('.films');
for(var i = 0;i < BUTTONS_FILMS.length;i++){ for(var i = 0;i < BUTTONS_FILMS.length;i++){
@ -183,5 +187,75 @@ fetch(API_URL)
}}); }});
document.getElementById('myInput').addEventListener("keyup", function() {
searchPeople();
});
function searchPeople() {
// Declare variables
let query = myInput.value;
// if(query.length>1){
// getSearch(query);
// }else{
// getPeople();
// }
//console.log(tableau_perso);
let results = tableau_perso.filter(user=>user.name.includes(query));
console.log(results);
document.getElementById('container').innerHTML = "";
for(i=0;i<results.length;i++){
document.getElementById('container').innerHTML += `
<section class="card">
<h2 style="display: inline;">${results[i].name}</h2> </h2><a href="#" class="etendre">+</a>
<div class="details">
<div class="data">
<h3>Rotation :</h3>
<p>${results[i].rotation}</p>
</div>
<div>
<h3>ORBITAL :</h3>
<p>${results[i].orbital}</p>
</div>
<div class="data">
<h3>Diameter :</h3>
<p>${results[i].diameter}</p>
</div>
<div class="data">
<h3>Climate :</h3>
<p>${results[i].climate}</p>
</div>
<div class="data" >
<h3>Gravity : </h3>
<p>${results[i].gravity}</p>
</div>
<div class="data" >
<h3>Terrain :</h3>
<p>${results[i].terrain}</p>
</div>
<div class="data">
<h3>Surface water : </h3>
<p>${results[i].surface}</p>
</div>
<div class="data">
<h3>Population :</h3
<p>${results[i].population}</p>
</div>
</div>
</section>
`;
const accordion = document.getElementsByClassName('etendre');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function (e) {
e.preventDefault();
//console.log('this.nextElementSibling');
this.nextElementSibling.classList.toggle('active');
});
}
}
}
// initialisation de la page, pour un affichage au chargement // initialisation de la page, pour un affichage au chargement
getPlanets(); getPlanets();