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

people et people

This commit is contained in:
HediMjid 2021-10-19 17:38:55 +02:00
parent 4a91eb99b6
commit f723c6fbf7
2 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
people.html
View File

@ -9,8 +9,17 @@
<script src="./scripts/people.js" defer></script> <script src="./scripts/people.js" defer></script>
</head> </head>
<body> <body>
<h1>People</h1> <header>
<nav class="navAccueil">
<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>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." class="navSearch">
<section id="container" style="font-size:12px;"> <section id="container" style="font-size:12px;">
</section> </section>

63
scripts/people.js
View File

@ -29,20 +29,40 @@ async function getPeople() {
// movies += `<p>${film.title}</p>`; // movies += `<p>${film.title}</p>`;
// } // }
document.getElementById('container').innerHTML += ` document.getElementById('container').innerHTML += `
<p> <section class="card">
<h2>Name : ${hero}</h2> <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>
Height : ${people.results[i].height} cm<br/> <button class="films" value="${people.results[i].films}">Voir les films</button>
Weight : ${people.results[i].mass} Kg<br/> <div id="detailsFilms${i}"></div>
Hair color : ${people.results[i].hair_color}<br/> </section>
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>
<hr>
`; `;
} }
const BUTTONS = document.querySelectorAll('.films'); const BUTTONS = document.querySelectorAll('.films');
@ -112,5 +132,20 @@ fetch(API_URL)
}}); }});
var array = ["Luke Skywalker", "Anakin Skywalker", "Dark Vador"];
function myFunction() {
// Declare variables
let query = myInput.value;
let result = array.filter(user=>user.includes(query));
document.getElementById('container').innerHTML = "";
for(i=0;i<result.length;i++){
document.getElementById('container').innerHTML += `<p>${result[i]}</p>`;
}
console.log(result);
}
// initialisation de la page, pour un affichage au chargement // initialisation de la page, pour un affichage au chargement
getPeople(); //getPeople();