vincentRamiere/Brief_starWars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modification js et Html planetes

Browse Source
This commit is contained in:
Sana EL HIRI 2021-10-19 16:19:10 +02:00
parent b6904486e8
commit 230d0e938f
2 changed files with 202 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
planetes.html
View File

@ -4,9 +4,26 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Planètes - Star Wars Choubaka</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./scripts/planetes.js" defer></script>
</head> </head>
<body> <body>
<h1>Planètes</h1>
<section class="container" id="container">
</section>
<div class="boutons">
<button class="allButtons" name="moins" value="-1"> < </button>
<div id="buttons"></div>
<!-- <button name="un" value=1> 1 </button>
<button name="deux" value=2> 2 </button> -->
<button class="allButtons" name="plus" value="+1"> > </button>
</div>
</body> </body>
</html> </html>

183
scripts/planetes.js
View File

@ -0,0 +1,183 @@
const API_URL = "https://swapi.dev/api/planets/?page=";
let pageEnCours = 1;
// function pour afficher les peoples et leur correspondances
async function getPlanets() {
const PLANETS = await fetch(API_URL+pageEnCours);
const PLANET = await PLANETS.json();
const total_pages = PLANET.count/PLANET.results.length;
// on vide le div
document.getElementById('container').innerHTML = "";
// boucle pour parser les peoples
for(i=0;i<total_pages;i++){
const PLANET_NAME = PLANET.results[i].name;
const ROTATION_PERIOD = PLANET.results[i].rotation_period;
const ORBITAL_PERIOD = PLANET.results[i].orbital_period;
const DIAMETER = PLANET.results[i].diameter;
const CLIMATE = PLANET.results[i].climate;
const GRAVITY = PLANET.results[i].gravity;
const TERRAIN = PLANET.results[i].terrain;
const SURFACE_WATER = PLANET.results[i].surface_water;
const POPULATION = PLANET.results[i].population;
// boucle pour parser les films
// for(j=0;j<people.results[i].films.length;j++){
// const films = await fetch(people.results[i].films[j]);
// const film = await films.json();
// console.log(film.title);
// movies += `<p>${film.title}</p>`;
// }
document.getElementById('container').innerHTML += `
<p>
<h2>${PLANET_NAME}</h2>
<div>
<h3>Rotation :</h3>
<p>${ROTATION_PERIOD}</p>
</div>
<div>
<h3>ORBITAL :</h3>
<p>${ORBITAL_PERIOD}</p>
</div>
<div>
<h3>Diameter :</h3>
<p>${DIAMETER}</p>
</div>
<div>
<h3>Climate :</h3>
<p>${CLIMATE}</p>
</div>
<div>
<h3>Gravity : </h3>
<p>${GRAVITY}</p>
</div>
<div>
<h3>Terrain :</h3>
<p>${TERRAIN}</p>
</div>
<div>
<h3>Surface water : </h3>
<p>${SURFACE_WATER}</p>
</div>
<div>
<h3>Population :</h3
<p>${POPULATION}</p>
</div>
<button class="films" value="${PLANET.results[i].films}">Films</button>
<div id="detailsFilms${i}"></div>
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
<div id="detailsResidents${i}"></div>
</p>
<hr>
`;
}
const BUTTONS_FILMS = document.querySelectorAll('.films');
for(var i = 0;i < BUTTONS_FILMS.length;i++){
let BUTTON = BUTTONS_FILMS[i];
BUTTON.addEventListener("click", function() {
//console.log(BUTTON.nextElementSibling);
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
const BUTTONS_RESIDENTS = document.querySelectorAll('.residents');
for(var i = 0;i < BUTTONS_RESIDENTS.length;i++){
let BUTTON = BUTTONS_RESIDENTS[i];
BUTTON.addEventListener("click", function() {
//console.log(BUTTON.nextElementSibling);
getResidents(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
}
// function pour afficher les films
async function getFilms(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<url.length;i++){
console.log(url[i]);
const FILMS = await fetch(url[i]);
const FILM = await FILMS.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${FILM.title}</h2>`;
}
}
// function pour afficher les résidents
async function getResidents(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<url.length;i++){
console.log(url[i]);
const RESIDENTS = await fetch(url[i]);
const RESIDENT = await RESIDENTS.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${RESIDENT.name}</h2>`;
}
}
// boucle pour afficher les boutons de navigation
fetch(API_URL)
.then(response => response.json())
.then(data => {
let totalPages = data.count / data.results.length;
for (let index = 1; index < totalPages +1; index++) {
document.getElementById('buttons').innerHTML += `
<button class="allButtons boutonNum" name="${index}" value="${index}"> ${index} </button>`;
}
let buttons = document.querySelectorAll('.allButtons');
let boutonNum = document.querySelectorAll('.boutonNum');
console.log(boutonNum);
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
if (e.target.name === "moins" || e.target.name === "plus"){
pageEnCours = pageEnCours + parseInt(e.target.value);
if(pageEnCours < 1){
pageEnCours = 1;
}else if(pageEnCours > boutonNum.length){
pageEnCours = boutonNum.length;
}
}else{
pageEnCours = parseInt(e.target.value);
}
getPlanets();
});
}});
// initialisation de la page, pour un affichage au chargement
getPlanets();