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

Merge pull request #9 from rasoirnoir/films 

Films
This commit is contained in:
William Noris 2021-10-19 15:26:42 +02:00 committed by GitHub
parent 769cfcd949 c01a40a823
commit 59e7f0efb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 190 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.parcel-cache/lock.mdb
View File

Binary file not shown.

BIN
assets/imgs/dead trooper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
assets/imgs/grogu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
assets/imgs/mando.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

BIN
assets/imgs/titre.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

17
films.html
View File

@ -9,7 +9,6 @@
<title>Films</title>
</head>
<body>
<div id = "background-films">
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
<nav class="nav-menu">
@ -20,11 +19,15 @@
</ul>
</nav>
</section>
<div id = "Ep4">
<div id="donnees"></div>
<div id="vaisseaux"></div>
<div id="planetes"></div>
</div>
</div>
<section id = "reponses-films"> </section>
<button id = "deploiement-films">Click pour le détail</button>
<button id = "deploiement-films2">Click pour le détail</button>
<button id = "deploiement-films3">Click pour le détail</button>
<button id = "deploiement-films4">Click pour le détail</button>
<button id = "deploiement-films5">Click pour le détail</button>
<button id = "deploiement-films6">Click pour le détail</button>
<div class = "vaisseaux-films"></div>
<div class = "especes-films"></div>
<div class = "image-films"></div>
</body>
</html>

125
scripts/films.js
View File

@ -1,5 +1,122 @@
const EPISODE4 = document.getElementById('Ep4');
const DONNEES = document.getElementById('donnees');
const VAISSEAUX = document.getElementById('vaisseaux');
const PLANETES = document.getElementById('planetes');
const FILMS = document.getElementById('reponses-films');
const VAISSEAUX = document.getElementById('vaisseaux-films');
const ESPECES = document.getElementById('especes-films');
const DEPLIE = document.getElementById ('deploiement-films');
const DEPLIE2 = document.getElementById ('deploiement-films2');
const DEPLIE3 = document.getElementById ('deploiement-films3');
const DEPLIE4 = document.getElementById ('deploiement-films4');
const DEPLIE5 = document.getElementById ('deploiement-films5');
const DEPLIE6 = document.getElementById ('deploiement-films6');
console.log(FILMS);
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
fetch(API_URL) // 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
console.log(afficherFilms);
for(let index = 0; index <6; index++){ // on sait qu'il y en a 6, donc une boucle pour les afficher tous
console.log(afficherFilms.results[index]);
const EPISODES = afficherFilms.results[index]; // on déclare qu'un épisode est toujours la fonction avec sa boucle
console.log(EPISODES);
FILMS.innerHTML +=`
<p class= "titre">${EPISODES.title}</p>
`
}
})
DEPLIE.addEventListener('click', ()=>{
const API_URL_1 = "https://swapi.dev/api/films/1";
fetch(API_URL_1)
.then((response1) => {
console.log(response1);
return response1.json();
})
.then(afficherFilms => {
/*console.log(afficherFilms);
for(let index = 0; index <6; index++){
console.log(afficherFilms.results[index]); */
const EPISODE1 = afficherFilms;
console.log(EPISODE1);
FILMS.innerHTML +=`
<p class= "episode">Episode : ${EPISODE1.episode_id}</p>
<p class= "directeur">Directeur : ${EPISODE1.director}</p>
<p class= "producteur">Producteur : ${EPISODE1.producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODE1.release_date}</p>
`
}
,)
const API_URL_VAISSEAUX = "https://swapi.dev/api/starships/"
fetch(API_URL_VAISSEAUX)
.then((response2)=>{
console.log(response2);
return response2.json();
})
.then(afficherVaisseaux =>{
console.log(afficherVaisseaux);
for (let index = 0; index <36; index++){
console.log(afficherVaisseaux.results[index]);
const VAISSEAU = afficherVaisseaux.results[index];
console.log(VAISSEAU);
VAISSEAUX.innerHTML +=`
<p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
`
}
}
,)
const API_URL_ESPECES = "https://swapi.dev/api/species/"
fetch(API_URL_ESPECES)
.then((response3)=>{
console.log(response3);
return response3.json();
})
.then(afficherEspeces =>{
console.log(afficherEspeces);
for (let index = 0; index <37; index++){
console.log(afficherEspeces.results[index]);
const ESPECE = afficherEspeces.results[index];
console.log(ESPECE);
ESPECES.innerHTML +=`
<p class= "Nom des Espèces">${ESPECE.name}</p>
`
}
})
DEPLIE2.addEventListener('click', ()=>{
const API_URL_2 = "https://swapi.dev/api/films/2";
fetch(API_URL_2)
.then((response) => {
console.log(response);
return response.json();
})
.then(afficherFilms => {
/*console.log(afficherFilms);
for(let index = 0; index <6; index++){
console.log(afficherFilms.results[index]); */
const EPISODE2 = afficherFilms;
console.log(EPISODE2);
FILMS.innerHTML +=`
<p class= "titre">${EPISODE2.episode_id}</p>
<p class= "titre">${EPISODE2.director}</p>
<p class= "titre">${EPISODE2.producer}</p>
<p class= "titre">${EPISODE2.release_date}</p>
`
}
,)
})
})

67
styles/style.css
View File

@ -7,34 +7,85 @@
margin: 0;
padding: 0;
font-family: 'star-wars', serif;
color : #FFF;
}
.titre a{
text-decoration: none;
margin-top : 20px;
background-color: transparent;
width: 25%;
content: url("../assets/imgs/titre.png");
font-size: xx-large;
text-decoration: underline;
text-decoration-color: #ffe81f;
}
.ul-menu{
list-style-type: none;
font-size: large;
text-decoration: underline;
text-decoration-color: #ffe81f;
}
.ul-menu li{
display: inline;
float: left;
margin: 1em;
font-size: large;
text-decoration: underline;
text-decoration-color: #ffe81f;
}
.ul-menu li a{
display: block;
padding: 5px;
text-align: center;
text-decoration: none;
font-size: large;
text-decoration: underline;
text-decoration-color: #ffe81f;
}
#background-films {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment : fixed;
background-image: url("../assets/imgs/backgroung_mando.jpg");
body{
background-image: url("../assets/imgs/starry_sky.jpg");
}
div.image-films {
background-color: transparent;
margin-top: -170px;
margin-left: auto;
width: 30%;
content: url("../assets/imgs/mando.png");
}
#reponses-films {
color : #FFF;
float: left;
margin-top : 200px;
margin-left:-350px;
}
#deploiement-films2 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films3 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films4 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films5 {
color : #000;
float: left;
margin-top : 200px;
}
#deploiement-films6 {
color : #000;
float: left;
margin-top : 200px;
}