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

Merge branch 'dev' into recherche

Browse source
This commit is contained in:
William Noris 2021-10-20 10:42:25 +02:00 • committed by GitHub
commit ef0745f020
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 99 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
films.html
View file

@ -28,70 +28,11 @@
<input type="text" name="textRecherche" id="textRecherche"> <input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok"> <input type="submit" value="ok">
</form> </form>
</section> </section>
<div class='accordeon'> <section id="resultats" class="accordeon">
<div class='accordeon_item'>
<div id="1" class='accordeon_item_header'> </section>
<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> <div class="image-films"></div>
</body> </body>

3
index.html
View file

@ -18,6 +18,9 @@
</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>

83
scripts/films.js
View file

@ -1,68 +1,31 @@
const { div } = require("prelude-ls"); import { api_call } from './util';
const FILMS = document.getElementsByClassName('accordeon'); const films = document.getElementById("resultats");
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
.then((response) => { // retourne une reponse function remplissage(EPISODES){
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); console.log(EPISODES);
DEPLIE.innerHTML +=` for(index in EPISODES.results){
<p class= "titre">${EPISODES.title}</p> films.innerHTML +=`
<p class= "episode">Episode : ${EPISODES.episode_id}</p> <section class="resultat accordeon_item">
<p class= "directeur">Directeur : ${EPISODES.director}</p> <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
<p class= "producteur">Producteur : ${EPISODES.producer}</p> <div class="accordeon_item_body">
<p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p> <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>`
} }
/*for(let index = 0; index <5; index++){ const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
FILMS.innerHTML +=` accordeonItemHeader.forEach(accordeonItemHeader =>{
<p class ="especes"> Espèces : ${EPISODES.species[index]}</p> accordeonItemHeader.addEventListener("click", event => {
` 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);
})

41
scripts/personnages.js
View file

@ -1,4 +1,4 @@
import { api_call,API_URL } from "./util"; import { api_call,API_URL, createPagination } from "./util";
const PERSONNAGES = document.getElementById("resultats"); const PERSONNAGES = document.getElementById("resultats");
@ -20,17 +20,17 @@ console.log('personnage.js loaded');
//api_call(API_URL+"/people", console.log); //api_call(API_URL+"/people", console.log);
fetch(API_URL+"/people") // fetch(API_URL+"/people")
.then(response => { // .then(response => {
return response.json(); // return response.json();
}) // })
.then(jsonResp => { // .then(jsonResp => {
remplissage(jsonResp); // remplissage(jsonResp);
}) // })
.catch(error => { // .catch(error => {
console.log(`Erreur lors de l'appel API : // console.log(`Erreur lors de l'appel API :
${error.message}`); // ${error.message}`);
}); // });
function remplissage(json){ function remplissage(json){
console.log(json.results[0]); console.log(json.results[0]);
@ -47,9 +47,12 @@ fetch(API_URL+"/people")
PERSONNAGES.innerHTML = ''; PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length; 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++) {
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;
@ -63,7 +66,7 @@ for (let i = 0; i < PERPAGE; i++) {
// 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 +=
@ -81,8 +84,12 @@ for (let i = 0; i < PERPAGE; i++) {
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div> <div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film où je suis présent : ${urlfilms}</div> <div class="column3"> Film où je suis présent : ${urlfilms}</div>
</div> </div>
</section>`; </section>`;
} //Pagination
createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
} }
api_call(API_URL + "/people", remplissage);
console.log('personnage.js loaded');

2
scripts/util.js
View file

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

19
styles/style.css
View file

@ -85,14 +85,21 @@ form input{
/* border-radius: 10%; */ /* border-radius: 10%; */
} }
/* div.image-films { #bienvenue{
text-align: center;
background-color: transparent; background-color: transparent;
margin-top: -170px; font-size: 100px;
margin-left: auto; color :var(--jaune) ;
width: 30%; text-decoration: underline;
content: url("../assets/imgs/mando.png"); text-decoration-color: var(--jaune) ;
}
#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%;