isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #13 from rasoirnoir/characters

Browse Source 
Characters
This commit is contained in:
William Noris 2021-10-19 19:30:16 +02:00 committed by GitHub
commit ef38db8421
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.parcel-cache/lock.mdb
View File

Binary file not shown.

3
characters.html
View File

@ -16,9 +16,12 @@
<li id="films"><a href="films.html">Films</a></li> <li id="films"><a href="films.html">Films</a></li>
<li id="planets"><a href="planets.html">Planets</a></li> <li id="planets"><a href="planets.html">Planets</a></li>
<li id="characters"><a href="characters.html">Characters</a></li> <li id="characters"><a href="characters.html">Characters</a></li>
</ul> </ul>
</nav> </nav>
</section> </section>
<div class="image-charactere" ></div>
<section id="resultats"></section> <section id="resultats"></section>

13
scripts/personnages.js
View File

@ -1,7 +1,7 @@
import { api_call,API_URL } from "./util"; import { api_call,API_URL } from "./util";
const PERSONNAGES = document.getElementById("resultats"); const PERSONNAGES = document.getElementById("resultats");
const NAME = document.getElementById("titreaccordeon");
class People { class People {
constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) { constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
@ -48,7 +48,7 @@ fetch(API_URL+"/people")
PERSONNAGES.innerHTML = ''; PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length; const PERPAGE = json.results.length;
console.log('coucou');
for (let i = 0; i < PERPAGE; i++) { for (let i = 0; i < PERPAGE; i++) {
const urlbirth_year = json.results[i].birth_year; const urlbirth_year = json.results[i].birth_year;
const urleye_colo=json.results[i].eye_colo; const urleye_colo=json.results[i].eye_colo;
@ -58,8 +58,13 @@ for (let i = 0; i < PERPAGE; i++) {
const urlmass=json.results[i].mass; const urlmass=json.results[i].mass;
const urlskin_color= json.results[i].skin_color; const urlskin_color= json.results[i].skin_color;
const urlname= json.results[i].name; const urlname= json.results[i].name;
const urlhomeworld=json.results[i].homeworld;
const urlfilms=json.results[i].films;
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color); // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// console.log(gens); // console.log(gens);
//Appel Api pour les planetes :
PERSONNAGES.innerHTML += PERSONNAGES.innerHTML +=
`<section class="resultat"> `<section class="resultat">
@ -72,8 +77,8 @@ for (let i = 0; i < PERPAGE; i++) {
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div> <div id= poids> Poids du personnage : ${urlmass} kg</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
<div class="2"> 2</div> <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="3"> 3</div> <div class="3"> Film où je suis présent : ${urlfilms}</div>
</div> </div>
</section>`; </section>`;

16
styles/style.css
View File

@ -61,6 +61,22 @@ div.image-films {
} }
div.image-charactere {
background-color: transparent;
margin-top: -170px;
margin-left: auto;
width: 30%;
content: url("../assets/imgs/grogu.png");
}
#reponses-films {
color : #FFF;
float: left;
margin-top : 200px;
margin-left:-350px;
}
.accordeon { .accordeon {
color : #000; color : #000;
float: left; float: left;