people et people
This commit is contained in:
parent
0132c31c85
commit
9982758f16
11
people.html
11
people.html
@ -7,6 +7,15 @@
|
|||||||
<title>Brief Star Wars - People</title>
|
<title>Brief Star Wars - People</title>
|
||||||
|
|
||||||
<script src="./scripts/people.js" defer></script>
|
<script src="./scripts/people.js" defer></script>
|
||||||
|
<style type="text/css">
|
||||||
|
.details{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -18,7 +27,7 @@
|
|||||||
<li><a href="planetes.html">Planètes</a></li>
|
<li><a href="planetes.html">Planètes</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." class="SearchBar">
|
<input type="text" id="myInput" placeholder="Search for names.." class="SearchBar">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section id="container" style="font-size:12px;">
|
<section id="container" style="font-size:12px;">
|
||||||
|
@ -1,6 +1,66 @@
|
|||||||
const API_URL = "https://swapi.dev/api/people/?page=";
|
const API_URL = "https://swapi.dev/api/people/?page=";
|
||||||
let pageEnCours = 1;
|
let pageEnCours = 1;
|
||||||
|
|
||||||
|
class People {
|
||||||
|
constructor(name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, index, films) {
|
||||||
|
this.name = name;
|
||||||
|
this.height = height;
|
||||||
|
this.mass = mass;
|
||||||
|
this.hair_color = hair_color;
|
||||||
|
this.skin_color = skin_color;
|
||||||
|
this.eye_color = eye_color;
|
||||||
|
this.birth_year = birth_year;
|
||||||
|
this.gender = gender;
|
||||||
|
this.homeworld = homeworld;
|
||||||
|
this.index = index;
|
||||||
|
this.films = films;
|
||||||
|
}
|
||||||
|
|
||||||
|
affichePeople () {
|
||||||
|
document.getElementById('container').innerHTML += `
|
||||||
|
<section class="card">
|
||||||
|
<h2 style="display: inline;">Name : ${this.name} </h2><a href="#" class="etendre">+</a>
|
||||||
|
<div class="details">
|
||||||
|
<div class="data">
|
||||||
|
<h3>Né sur :</h3>
|
||||||
|
<p>${this.homeworld}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Height :</h3>
|
||||||
|
<p>${this.height} cm</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Weight :</h3>
|
||||||
|
<p>${this.mass} Kg</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Hair color :</h3>
|
||||||
|
<p>${this.hair_color}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Skin color :</h3>
|
||||||
|
<p>${this.skin_color}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Eye color :</h3>
|
||||||
|
<p>${this.eye_color}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Birth year :</h3>
|
||||||
|
<p>${this.birth_year}</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<h3>Gender :</h3>
|
||||||
|
<p>${this.gender}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="films" value="${this.films}">Voir les films</button>
|
||||||
|
<div id="detailsFilms${this.index}"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// function pour afficher les peoples et leur correspondances
|
// function pour afficher les peoples et leur correspondances
|
||||||
async function getPeople() {
|
async function getPeople() {
|
||||||
@ -12,10 +72,10 @@ async function getPeople() {
|
|||||||
document.getElementById('container').innerHTML = "";
|
document.getElementById('container').innerHTML = "";
|
||||||
|
|
||||||
// boucle pour parser les peoples
|
// boucle pour parser les peoples
|
||||||
for(i=0;i<total_pages;i++){
|
for(i=0;i<people.results.length;i++){
|
||||||
const hero = people.results[i].name;
|
const hero = people.results[i].name;
|
||||||
// const planets = await fetch(people.results[i].homeworld);
|
const planets = await fetch(people.results[i].homeworld);
|
||||||
// const planet = await planets.json();
|
const planet = await planets.json();
|
||||||
//console.log(hero+' '+planet.name);
|
//console.log(hero+' '+planet.name);
|
||||||
|
|
||||||
// variable pour la concatenation des films
|
// variable pour la concatenation des films
|
||||||
@ -28,42 +88,8 @@ async function getPeople() {
|
|||||||
// console.log(film.title);
|
// console.log(film.title);
|
||||||
// movies += `<p>${film.title}</p>`;
|
// movies += `<p>${film.title}</p>`;
|
||||||
// }
|
// }
|
||||||
document.getElementById('container').innerHTML += `
|
const perso = new People(people.results[i].name,people.results[i].height,people.results[i].mass,people.results[i].hair_color,people.results[i].skin_color,people.results[i].eye_color,people.results[i].birth_year,people.results[i].gender,planet.name,i,people.results[i].films);
|
||||||
<section class="card">
|
perso.affichePeople();
|
||||||
<h2>Name : ${hero}</h2>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Height :</h3>
|
|
||||||
<p>${people.results[i].height} cm</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Weight :</h3>
|
|
||||||
<p>${people.results[i].mass} Kg</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Hair color :</h3>
|
|
||||||
<p>${people.results[i].hair_color}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Skin color :</h3>
|
|
||||||
<p>${people.results[i].skin_color}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Eye color :</h3>
|
|
||||||
<p>${people.results[i].eye_color}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Birth year :</h3>
|
|
||||||
<p>${people.results[i].birth_year}</p>
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<h3>Gender :</h3>
|
|
||||||
<p>${people.results[i].gender}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="films" value="${people.results[i].films}">Voir les films</button>
|
|
||||||
<div id="detailsFilms${i}"></div>
|
|
||||||
</section>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
const BUTTONS = document.querySelectorAll('.films');
|
const BUTTONS = document.querySelectorAll('.films');
|
||||||
for(var i = 0;i < BUTTONS.length;i++){
|
for(var i = 0;i < BUTTONS.length;i++){
|
||||||
@ -73,6 +99,14 @@ async function getPeople() {
|
|||||||
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
|
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
|
for (i=0; i<accordion.length; i++) {
|
||||||
|
accordion[i].addEventListener('click', function () {
|
||||||
|
//console.log('this.nextElementSibling');
|
||||||
|
this.nextElementSibling.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// function pour afficher les peoples et leur correspondances
|
// function pour afficher les peoples et leur correspondances
|
||||||
@ -132,20 +166,59 @@ fetch(API_URL)
|
|||||||
|
|
||||||
}});
|
}});
|
||||||
|
|
||||||
var array = ["Luke Skywalker", "Anakin Skywalker", "Dark Vador"];
|
document.getElementById('myInput').addEventListener("keyup", function() {
|
||||||
function myFunction() {
|
searchPeople();
|
||||||
|
});
|
||||||
|
|
||||||
|
function searchPeople() {
|
||||||
// Declare variables
|
// Declare variables
|
||||||
let query = myInput.value;
|
let query = myInput.value;
|
||||||
let result = array.filter(user=>user.includes(query));
|
if(query.length>1){
|
||||||
|
getSearch(query);
|
||||||
|
}else{
|
||||||
|
getPeople();
|
||||||
|
}
|
||||||
|
|
||||||
|
//let result = array.filter(user=>user.name.includes(query));
|
||||||
|
//console.log(result);
|
||||||
|
// document.getElementById('container').innerHTML = "";
|
||||||
|
// for(i=0;i<result.length;i++){
|
||||||
|
// document.getElementById('container').innerHTML += `<p>${result[i].name}</p>`;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function getSearch(query) {
|
||||||
document.getElementById('container').innerHTML = "";
|
document.getElementById('container').innerHTML = "";
|
||||||
for(i=0;i<result.length;i++){
|
const searchs = await fetch("https://swapi.dev/api/people/?search="+query);
|
||||||
document.getElementById('container').innerHTML += `<p>${result[i]}</p>`;
|
const search = await searchs.json();
|
||||||
|
console.log(search);
|
||||||
|
for(i=0;i<search.count;i++){
|
||||||
|
const planets = await fetch(search.results[i].homeworld);
|
||||||
|
const planet = await planets.json();
|
||||||
|
|
||||||
|
const perso = new People(search.results[i].name,search.results[i].height,search.results[i].mass,search.results[i].hair_color,search.results[i].skin_color,search.results[i].eye_color,search.results[i].birth_year,search.results[i].gender,planet.name,i,search.results[i].films);
|
||||||
|
perso.affichePeople();
|
||||||
|
}
|
||||||
|
const BUTTONS = document.querySelectorAll('.films');
|
||||||
|
for(var i = 0;i < BUTTONS.length;i++){
|
||||||
|
let BUTTON = BUTTONS[i];
|
||||||
|
BUTTON.addEventListener("click", function() {
|
||||||
|
//console.log(BUTTON.nextElementSibling);
|
||||||
|
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(result);
|
const accordion = document.getElementsByClassName('etendre');
|
||||||
|
for (i=0; i<accordion.length; i++) {
|
||||||
|
accordion[i].addEventListener('click', function () {
|
||||||
|
//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
|
||||||
//getPeople();
|
getPeople();
|
||||||
|
Loading…
Reference in New Issue
Block a user