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

Compare commits

base: isa44.74:main
Branches Tags
isa44.74:main
isa44.74:dev
isa44.74:loadDetails
isa44.74:films
isa44.74:hotfix1
isa44.74:recherche
isa44.74:characters
isa44.74:planets
isa44.74:Personnage
..
compare: isa44.74:characters
Branches Tags
isa44.74:dev
isa44.74:loadDetails
isa44.74:films
isa44.74:main
isa44.74:hotfix1
isa44.74:recherche
isa44.74:characters
isa44.74:planets
isa44.74:Personnage

No commits in common. "main" and "characters" have entirely different histories.
main ... characters

9 changed files with 218 additions and 170 deletions
Show Stats Expand all files Collapse all files

0
assets/image
View File

13
characters.html
View File

@ -23,19 +23,8 @@
</nav> </nav>
</section> </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>
<section id="resultats" class="accordeon"></section>
<div class="image-charactere"></div> <div class="image-charactere"></div>
<section id="resultats" class="accordeon"></section>
</body> </body>

74
films.html
View File

@ -21,18 +21,68 @@
</ul> </ul>
</nav> </nav>
</section> </section>
<div class='accordeon'>
<section id="recherche"> <div class='accordeon_item'>
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')"> <div id="1" class='accordeon_item_header'>
<label for="textRecherche">Recherche : </label> <h2 class="titres"></h2>
<input type="text" name="textRecherche" id="textRecherche"> <p>(Cliquez ici pour étendre)</p>
<input type="submit" value="ok"> </div>
</form> <div class="accordeon_item_body">
</section> <div class="accordeon_item_body_content">
</div>
<section id="resultats" class="accordeon"> </div>
</div>
</section> <div class='accordeon_item'>
<div id="2" class='accordeon_item_header'>
<h2 class="titres"></h2>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="3" class='accordeon_item_header'>
<h4>Return of the Jedi</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="4" class='accordeon_item_header'>
<h4>The Phantom Menace</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div id="5" class='accordeon_item'>
<div class='accordeon_item_header'>
<h4>Attack of the Clones</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
<div class='accordeon_item'>
<div id="6" class='accordeon_item_header'>
<h4>Revenge of the Sith</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
</div>
</div>
</div>
</div>
<div class="image-films"></div> <div class="image-films"></div>
</body> </body>

3
index.html
View File

@ -18,9 +18,6 @@
</ul> </ul>
</nav> </nav>
</section> </section>
<h1 id = "bienvenue">bienvenue</h1>
<p id = "presentation">Bienvenue sur la Star Wars database,
utilisez le menu pour vous déplacer</p>
</body> </body>
</html> </html>

8
planets.html
View File

@ -22,14 +22,6 @@
</nav> </nav>
</section> </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>
<section id="resultats" class="accordeon"> <section id="resultats" class="accordeon">
</section> </section>

91
scripts/films.js
View File

@ -1,33 +1,68 @@
import { api_call } from './util'; const { div } = require("prelude-ls");
const films = document.getElementById("resultats"); const FILMS = document.getElementsByClassName('accordeon');
const VAISSEAUX = document.getElementById('vaisseaux-films');
const ESPECES = document.getElementById('especes-films');
const TITRE = document.getElementsByClassName('titres');
console.log(FILMS);
const API_URL = "https://swapi.dev/api/films/";
fetch(API_URL + target.id)
.then((response) => { // retourne une reponse
console.log(response);
return response.json(); // sous format json
})
.then(afficherFilms => { // on affiche ensuite les films
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
console.log(EPISODES);
TITRE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
`
}
,)
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader =>{
accordeonItemHeader.addEventListener("click", event => {
console.log(event.target.id);
console.log(event.target.nextSibling)
console.log(event.target.nextSibling.nextElementSibling)
console.log(event.target.nextSibling.nextElementSibling.children)
const DEPLIE = event.target.nextSibling.nextElementSibling.children[0];
accordeonItemHeader.classList.toggle("active");
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
fetch(API_URL + event.target.id) // recupère la liste des films
function remplissage(EPISODES) { .then((response) => { // retourne une reponse
console.log(EPISODES); console.log(response);
return response.json(); // sous format json
for (index in EPISODES.results) { })
films.innerHTML += ` .then(afficherFilms => { // on affiche ensuite les films
<section class="resultat accordeon_item"> const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1> console.log(EPISODES);
<div class="accordeon_item_body">
<div class="column1"> DEPLIE.innerHTML +=`
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p> <p class= "titre">${EPISODES.title}</p>
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p> <p class= "episode">Episode : ${EPISODES.episode_id}</p>
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p> <p class= "directeur">Directeur : ${EPISODES.director}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p> <p class= "producteur">Producteur : ${EPISODES.producer}</p>
</div> <p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
</div> `
</section>`
} }
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); /*for(let index = 0; index <5; index++){
accordeonItemHeader.forEach(accordeonItemHeader => { FILMS.innerHTML +=`
accordeonItemHeader.addEventListener("click", event => { <p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
accordeonItemHeader.classList.toggle("active"); `
}) }
}) for(let index = 0; index<8; index++){
} FILMS.innerHTML +=`
<p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p>
`
}*/
,)
api_call(API_URL, remplissage); })
})

134
scripts/personnages.js
View File

@ -1,18 +1,18 @@
import { api_call, API_URL, createPagination } from "./util"; import { api_call,API_URL, createPagination } from "./util";
const PERSONNAGES = document.getElementById("resultats"); const PERSONNAGES = document.getElementById("resultats");
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) {
this.birth_year = birth_year; this.birth_year = birth_year;
this.eye_colo = eye_colo; this.eye_colo = eye_colo;
this.gender = gender; this.gender = gender;
this.hair_color = hair_color; this.hair_color = hair_color;
this.height = height; this.height = height;
this.mass = mass; this.mass = mass;
this.skin_color = skin_color; this.skin_color=skin_color;
} }
} }
@ -32,71 +32,67 @@ console.log('personnage.js loaded');
// ${error.message}`); // ${error.message}`);
// }); // });
function remplissage(json) { function remplissage(json){
console.log(json.results[0]); console.log(json.results[0]);
// api_call(API_URL+ "/planets/1", (response) => { // api_call(API_URL+ "/planets/1", (response) => {
// console.log(response); // console.log(response);
// NAME.innerText = results[i].name; // NAME.innerText = results[i].name;
// }); // });
PERSONNAGES.innerHTML = ''; PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length; const PERPAGE = json.results.length;
const previousUrl = json.previous; const previousUrl = json.previous;
const nextUrl = json.next; const nextUrl = json.next;
console.log(previousUrl); console.log(previousUrl);
console.log(nextUrl); console.log(nextUrl);
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;
const urlgender = json.results[i].gender; const urlgender=json.results[i].gender;
const urlhair_color = json.results[i].hair_color; const urlhair_color=json.results[i].hair_color;
const urlheight = json.results[i].height; const urlheight = json.results[i].height;
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 urlhomeworld=json.results[i].homeworld;
const urlfilms = json.results[i].films; 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 : //Appel Api pour les planetes :
PERSONNAGES.innerHTML += PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item"> `<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1> <h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body"> <div class="accordeon_item_body">
<div class="column1"> <div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div> <div id=genre>Genre : ${urlgender}</div>
<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=taille> Taille : ${urlheight}</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> <div id= poids> Poids du personnage : ${urlmass} kg</div>
</div> <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div> <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film où je suis présent : ${urlfilms}</div> <div class="3"> Film où je suis présent : ${urlfilms}</div>
</div> </div>
</section>`; </section>`;
}
}
//Pagination //Pagination
createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage); createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
});
});
} }
api_call(API_URL + "/people", remplissage); api_call(API_URL + "/people", remplissage);
console.log('personnage.js loaded'); console.log('personnage.js loaded');

29
scripts/planets.js
View File

@ -20,6 +20,15 @@ function remplissage(results) {
const population = resultPlanet.population; const population = resultPlanet.population;
const tabResidents = resultPlanet.residents; 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; const tabFilms = resultPlanet.films;
@ -27,26 +36,26 @@ function remplissage(results) {
`<section class="resultat accordeon_item"> `<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${nom}</h1> <h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon_item_body"> <div class="accordeon_item_body">
<div class="column1"> <div class="1">
<p>${terrain}</p> <p>${terrain}</p>
<p>${climate}</p> <p>${climate}</p>
<p>${diametre}Km</p> <p>${diametre}Km</p>
</div> </div>
<div class="column2">${tabResidents}</div> <div class="2">${tabResidents}</div>
<div class="column3">${tabFilms}</div> <div class="3">${tabFilms}</div>
</div> </div>
</section>`; </section>`;
} }
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
for (item of accordeonItemHeader) {
item.addEventListener("click", (event) => {
item.classList.toggle("active");
});
}
//Pagination //Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage); createPagination(previousUrl, nextUrl, planetes, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
});
});
} }
api_call(API_URL + "/planets", remplissage); api_call(API_URL + "/planets", remplissage);

36
styles/style.css
View File

@ -30,16 +30,6 @@ body{
font-size: 1em; font-size: 1em;
} }
form label{
margin: 0.5em;
color: var(--blanc);
}
form input{
border-color: var(--jaune);
border-radius: 3%;
padding: 0.3em;
}
.titre a{ .titre a{
margin-top : 20px; margin-top : 20px;
@ -85,21 +75,14 @@ form input{
/* border-radius: 10%; */ /* border-radius: 10%; */
} }
#bienvenue{ /* div.image-films {
text-align: center;
background-color: transparent; background-color: transparent;
font-size: 100px; margin-top: -170px;
color :var(--jaune) ; margin-left: auto;
text-decoration: underline; width: 30%;
text-decoration-color: var(--jaune) ; content: url("../assets/imgs/mando.png");
}
#presentation {
text-align: center;
background-color: transparent;
font-size: 40px;
color :var(--jaune)
}
} */
div.image-films { div.image-films {
background-color: transparent; background-color: transparent;
width: 30%; width: 30%;
@ -157,11 +140,8 @@ div.image-charactere {
.accordeon_item_body_content{ .accordeon_item_body_content{
color : #000; color : #000;
padding: 1.5rem; padding: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
}
.column1, .column2, .column3{
padding: 1em;
} }
.accordeon_item_header.active + .accordeon_item_body{ .accordeon_item_header.active + .accordeon_item_body{