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

styles updates

This commit is contained in:
William Noris 2021-10-20 10:37:54 +02:00
parent 4f69d290b8
commit 696a638d56
5 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
characters.html
View File

@ -23,10 +23,21 @@
</nav>
</section>
<div class="image-charactere"></div>
<section id="recherche">
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
<label for="textRecherche">Recherche : </label>
<input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok">
</form>
</section>
<section id="resultats" class="accordeon"></section>
<div class="image-charactere"></div>
</body>
</html>

9
films.html
View File

@ -21,6 +21,15 @@
</ul>
</nav>
</section>
<section id="recherche">
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
<label for="textRecherche">Recherche : </label>
<input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok">
</form>
</section>
<div class='accordeon'>
<div class='accordeon_item'>
<div id="1" class='accordeon_item_header'>

19
scripts/personnages.js
View File

@ -70,15 +70,16 @@ for (let i = 0; i < PERPAGE; i++) {
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<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"> Planète de Naissance : ${urlhomeworld}</div>
<div class="3"> Film où je suis présent : ${urlfilms}</div>
<div class="column1">
<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>
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film où je suis présent : ${urlfilms}</div>
</div>
</section>`;

21
scripts/planets.js
View File

@ -20,15 +20,6 @@ function remplissage(results) {
const population = resultPlanet.population;
const tabResidents = resultPlanet.residents;
//Problème de requêtes asyncrones
// let tabResidents = [];
// for(index in resultPlanet.residents){
// api_call(resultPlanet.residents[index], (jsonresp)=>{
// console.log(jsonresp.name);
// });
// }
// console.log(`${nom} - résidents : ${resultPlanet.residents}`);
// console.log(`nom des résidents : ${tabResidents}`);
const tabFilms = resultPlanet.films;
@ -36,26 +27,26 @@ function remplissage(results) {
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon_item_body">
<div class="1">
<div class="column1">
<p>${terrain}</p>
<p>${climate}</p>
<p>${diametre}Km</p>
</div>
<div class="2">${tabResidents}</div>
<div class="3">${tabFilms}</div>
<div class="column2">${tabResidents}</div>
<div class="column3">${tabFilms}</div>
</div>
</section>`;
}
//Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
for (item of accordeonItemHeader) {
item.addEventListener("click", (event) => {
item.classList.toggle("active");
});
}
//Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage);
}
api_call(API_URL + "/planets", remplissage);

8
styles/style.css
View File

@ -32,6 +32,7 @@ body{
form label{
margin: 0.5em;
color: var(--blanc);
}
form input{
@ -149,8 +150,11 @@ div.image-charactere {
.accordeon_item_body_content{
color : #000;
padding: 1.5rem;
line-height: 1.5rem;
line-height: 1.5rem;
}
.column1, .column2, .column3{
padding: 1em;
}
.accordeon_item_header.active + .accordeon_item_body{