Merge branch 'dev' into recherche
This commit is contained in:
William Noris
GitHub
commit
ef0745f020
67
films.html
67
films.html
|
|
@ -28,70 +28,11 @@
|
|||
<input type="text" name="textRecherche" id="textRecherche">
|
||||
<input type="submit" value="ok">
|
||||
</form>
|
||||
</section>
|
||||
</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>
|
||||
<section id="resultats" class="accordeon">
|
||||
|
||||
</section>
|
||||
<div class="image-films"></div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@
|
|||
</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>
|
||||
|
|
@ -1,68 +1,31 @@
|
|||
const { div } = require("prelude-ls");
|
||||
import { api_call } from './util';
|
||||
|
||||
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 films = document.getElementById("resultats");
|
||||
|
||||
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
|
||||
.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>
|
||||
`
|
||||
}
|
||||
/*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>
|
||||
`
|
||||
}*/
|
||||
|
||||
,)
|
||||
})
|
||||
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">
|
||||
<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>
|
||||
</section>`
|
||||
}
|
||||
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
|
||||
accordeonItemHeader.forEach(accordeonItemHeader =>{
|
||||
accordeonItemHeader.addEventListener("click", event => {
|
||||
accordeonItemHeader.classList.toggle("active");
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
api_call(API_URL, remplissage);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { api_call,API_URL } from "./util";
|
||||
import { api_call,API_URL, createPagination } from "./util";
|
||||
|
||||
const PERSONNAGES = document.getElementById("resultats");
|
||||
|
||||
|
|
@ -20,17 +20,17 @@ 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]);
|
||||
|
|
@ -47,42 +47,49 @@ fetch(API_URL+"/people")
|
|||
|
||||
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 :
|
||||
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>`;
|
||||
`<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);
|
||||
}
|
||||
|
||||
api_call(API_URL + "/people", remplissage);
|
||||
console.log('personnage.js loaded');
|
||||
|
|
|
|||
|
|
@ -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.group("Url suivante : " + nextUrl);
|
||||
console.log("Url suivante : " + nextUrl);
|
||||
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
|
||||
console.log("Page courante : " + currentPage);
|
||||
|
||||
|
|
|
|||
|
|
@ -85,14 +85,21 @@ form input{
|
|||
/* border-radius: 10%; */
|
||||
}
|
||||
|
||||
/* div.image-films {
|
||||
#bienvenue{
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
margin-top: -170px;
|
||||
margin-left: auto;
|
||||
width: 30%;
|
||||
content: url("../assets/imgs/mando.png");
|
||||
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)
|
||||
}
|
||||
|
||||
} */
|
||||
div.image-films {
|
||||
background-color: transparent;
|
||||
width: 30%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue