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

people et people

Browse Source
This commit is contained in:
HediMjid 2021-10-19 16:41:40 +02:00
parent 5bc631e887
commit 4a91eb99b6
3 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
css/style.css
View File

@ -0,0 +1,47 @@
body{
background-color:#2A4158;
}
.header{
width: 100%;
text-align: center;
margin: 50px;;
}
ul{
display:flex;
justify-content: center;
}
li{
color:#fff;
padding: 10px;
border-radius: 10% 10% 0% 0%;
margin :25px;
list-style: none;
font-size:18px;
}
.active{
background-color: #000;
}
.body{
width:100%;
}
img{
width:100%;
height:auto;
}
a{
color:#fff;
font-size:18px;
}
a:hover{
text-decoration: none;
}

2
people.html
View File

@ -10,7 +10,7 @@
</head>
<body>
<h1>People</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<section id="container" style="font-size:12px;">
</section>

19
scripts/people.js
View File

@ -4,7 +4,6 @@ let pageEnCours = 1;
// function pour afficher les peoples et leur correspondances
async function getPeople() {
const url = 'http://swapi.dev/api/people';
const peoples = await fetch(API_URL+pageEnCours);
const people = await peoples.json();
const total_pages = people.count/people.results.length;
@ -20,7 +19,7 @@ async function getPeople() {
//console.log(hero+' '+planet.name);
// variable pour la concatenation des films
let movies = "";
//let movies = "";
// boucle pour parser les films
// for(j=0;j<people.results[i].films.length;j++){
@ -31,7 +30,15 @@ async function getPeople() {
// }
document.getElementById('container').innerHTML += `
<p>
<h2>${hero}</h2>
<h2>Name : ${hero}</h2>
Height : ${people.results[i].height} cm<br/>
Weight : ${people.results[i].mass} Kg<br/>
Hair color : ${people.results[i].hair_color}<br/>
Skin color : ${people.results[i].skin_color}<br/>
Eye color : ${people.results[i].eye_color}<br/>
Birth year : ${people.results[i].birth_year}<br/>
Gender : ${people.results[i].gender}<br/>
<button class="films" value="${people.results[i].films}">Voir les films</button>
<div id="detailsFilms${i}"></div>
</p>
@ -50,10 +57,10 @@ async function getPeople() {
// function pour afficher les peoples et leur correspondances
async function getFilms(liste,div) {
const url = liste.split(',');
console.log(div);
let url = liste.split(',');
console.log(url);
document.getElementById(div).innerHTML = "";
for(i=0;i<liste.length;i++){
for(i=0;i<url.length;i++){
console.log(url[i]);
const films = await fetch(url[i]);
const film = await films.json();