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

Merge pull request #8 from rasoirnoir/characters

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

3
characters.html
View File

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
<script src="scripts/personnages.js" defer type="module"></script>
<title>Characters</title> <title>Characters</title>
</head> </head>
<body> <body>
@ -18,6 +19,8 @@
</ul> </ul>
</nav> </nav>
</section> </section>
<section id="resultats"></section>
</body> </body>
</html> </html>

7222
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

82
scripts/personnages.js Normal file
View File

@ -0,0 +1,82 @@
import { api_call,API_URL } from "./util";
const PERSONNAGES = document.getElementById("resultats");
const NAME = document.getElementById("titreaccordeon");
class People {
constructor(birth_year, eye_colo, gender, hair_color,height,mass,skin_color) {
this.birth_year = birth_year;
this.eye_colo = eye_colo;
this.gender = gender;
this.hair_color = hair_color;
this.height = height;
this.mass = mass;
this.skin_color=skin_color;
}
}
console.log('personnage.js loaded');
//api_call(API_URL+"/people", console.log);
fetch(API_URL+"/people")
.then(response => {
return response.json();
})
.then(jsonResp => {
remplissage(jsonResp);
})
.catch(error => {
console.log(`Erreur lors de l'appel API :
${error.message}`);
});
function remplissage(json){
console.log(json.results[0]);
// api_call(API_URL+ "/planets/1", (response) => {
// console.log(response);
// NAME.innerText = results[i].name;
// });
PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length;
console.log('coucou');
for (let i = 0; i < PERPAGE; i++) {
const urlbirth_year = json.results[i].birth_year;
const urleye_colo=json.results[i].eye_colo;
const urlgender=json.results[i].gender;
const urlhair_color=json.results[i].hair_color;
const urlheight = json.results[i].height;
const urlmass=json.results[i].mass;
const urlskin_color= json.results[i].skin_color;
const urlname= json.results[i].name;
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// console.log(gens);
PERSONNAGES.innerHTML +=
`<section class="resultat">
<h1 class="titreAccordeon">${urlname}</h1>
<div class="accordeon">
<div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div>
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
<div class="2"> 2</div>
<div class="3"> 3</div>
</div>
</section>`;
}
}