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:planets
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 "planets" have entirely different histories.
main ... planets

10 changed files with 223 additions and 186 deletions
Show Stats Expand all files Collapse all files

0
assets/image
View File

13
characters.html
View File

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

74
films.html
View File

@ -21,18 +21,68 @@
</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>
<section id="resultats" class="accordeon">
</section>
<div class='accordeon'>
<div class='accordeon_item'>
<div id="1" 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="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>
</body>

3
index.html
View File

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

8
planets.html
View File

@ -22,14 +22,6 @@
</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>
<section id="resultats" class="accordeon">
</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
function remplissage(EPISODES) {
console.log(EPISODES);
for (index in EPISODES.results) {
films.innerHTML += `
<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
<div class="accordeon_item_body">
<div class="column1">
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
</div>
</div>
</section>`
fetch(API_URL + event.target.id) // recupère la liste des films
.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);
DEPLIE.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
<p class= "episode">Episode : ${EPISODES.episode_id}</p>
<p class= "directeur">Directeur : ${EPISODES.director}</p>
<p class= "producteur">Producteur : ${EPISODES.producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
`
}
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
})
})
}
/*for(let index = 0; index <5; index++){
FILMS.innerHTML +=`
<p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
`
}
for(let index = 0; index<8; index++){
FILMS.innerHTML +=`
<p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p>
`
}*/
api_call(API_URL, remplissage);
,)
})
})

153
scripts/personnages.js
View File

@ -1,18 +1,18 @@
import { api_call, API_URL, createPagination } from "./util";
import { api_call,API_URL } from "./util";
const PERSONNAGES = document.getElementById("resultats");
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;
}
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;
}
}
@ -20,83 +20,68 @@ 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}`);
// });
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]);
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;
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 urlhomeworld=json.results[i].homeworld;
const urlfilms=json.results[i].films;
// api_call(API_URL+ "/planets/1", (response) => {
// console.log(response);
// NAME.innerText = results[i].name;
// });
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// console.log(gens);
//Appel Api pour les planetes :
PERSONNAGES.innerHTML +=
`<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>
</section>`;
PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length;
const previousUrl = json.previous;
const nextUrl = json.next;
console.log(previousUrl);
console.log(nextUrl);
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 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);
// console.log(gens);
//Appel Api pour les planetes :
PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<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>`;
}
//Pagination
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);
console.log('personnage.js loaded');
}
}

29
scripts/planets.js
View File

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

2
scripts/util.js
View File

@ -43,7 +43,7 @@ export const api_call = (url, callback) => {
*/
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
console.log("Url précédente : " + prevUrl);
console.log("Url suivante : " + nextUrl);
console.group("Url suivante : " + nextUrl);
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
console.log("Page courante : " + currentPage);

36
styles/style.css
View File

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