Hej, mam do zrobienia zadanie, z którego większość (chyba) już ogarnąłem - było nim stworzenie aplikacji, która łączy się z Spacex API i wyświetla określone dane w tabelach.
Jeśli chodzi o same tabele, to zostały mi do wrzucenia obrazki, kosmetyczne poprawki i CSS (dopiero zacząłem).
Muszę jednak wykonać paginację (pojedyncza strona powinna zawierać 10 elementów) na podstronie wyświetlającej informacje o Starlinkach (w kodzie funkcja renderStarlink)- nigdy jej nie robiłem i nie mam pojęcia, jak się do tego zabrać. Szukając w internetach trafiłem głównie na narzędzia, które robią to za mnie - a ja mam to najpewniej zrobić samodzielnie.
Czy ktoś byłby w stanie pomóc/wytłumaczyć z czym to się je i jak to się robi?
Z góry dziękuję :).
Poniżej wrzucam kod i dokumentację.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>SpaceX</title>
<style>
table {
width: 70%;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
#container0 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 25%;
}
#container1 {
display: flex;
align-items: center;
}
#button1,
#button2,
#button3 {
background-color: black;
color: white;
font-size: 150%;
padding: 32px 16px;
border-radius: 50%;
}
#myHead {
font-size: 2cm;
}
</style>
</head>
<body>
<h1 id='myHead'></h1>
<div id='container0'></div>
<div id='container1'></div>
<script>
renderDef = () => {
var button1 = document.createElement('input');
button1.setAttribute('type', 'button');
button1.setAttribute('value', 'Rockets');
button1.setAttribute('id', 'button1');
document.getElementById('container0').appendChild(button1);
button1.addEventListener('click', () => {
renderRocket();
document.getElementById('button1').remove();
document.getElementById('button2').remove();
document.getElementById('button3').remove();
})
var button2 = document.createElement('input');
button2.setAttribute('type', 'button');
button2.setAttribute('value', 'Starlinks');
button2.setAttribute('id', 'button2');
document.getElementById('container0').appendChild(button2);
button2.addEventListener('click', () => {
renderStarlink();
document.getElementById('button1').remove();
document.getElementById('button2').remove();
document.getElementById('button3').remove();
})
var button3 = document.createElement('input');
button3.setAttribute('type', 'button');
button3.setAttribute('value', 'Tesla Car');
button3.setAttribute('id', 'button3');
document.getElementById('container0').appendChild(button3);
button3.addEventListener('click', () => {
renderTesla();
document.getElementById('button1').remove();
document.getElementById('button2').remove();
document.getElementById('button3').remove();
})
}
renderDef();
renderRocket = () => {
var myHead = document.getElementById('myHead');
myHead.textContent = "Rockets";
class Rocket {
constructor(rcIMG, rcName, rcID) {
this.rcIMG = rcIMG;
this.rcName = rcName;
this.rcID = rcID;
}
}
fetch('https://api.spacexdata.com/v4/rockets').then(response => response.json()).then(data => {
var arrayHead = new Array();
arrayHead = ["Rakieta", "Nazwa", "ID", ""];
var myTable = document.createElement('table');
myTable.setAttribute('id', 'myTable');
var tr = myTable.insertRow(-1);
for (i = 0; i < arrayHead.length; i++) {
let th = document.createElement('th');
th.innerHTML = arrayHead[i];
tr.appendChild(th);
}
var div = document.getElementById('container1');
div.appendChild(myTable);
for (let i = 0; i < data.length; i++) {
const rocketName = data[i].name;
const rocketImg = data[i].flickr_images[0];
const rocketID = data[i].id;
var Rockets = new Rocket(rocketImg, rocketName, rocketID);
console.log(Rockets);
const thisTab = document.getElementById('myTable');
console.log(thisTab);
var myTab = document.getElementById('myTable');
var rowAm = myTab.rows.length;
var tr = myTab.insertRow(rowAm);
tr.classList.add('rows');
for (a = 0; a < arrayHead.length; a++) {
let td = document.createElement('td');
td = tr.insertCell(a);
td.classList.add('column');
if (a === 0) {
var IMGcontainer = document.createElement('div');
IMGcontainer.setAttribute('id', 'IMG');
var textElement = document.createElement('img');
textElement.src = rocketImg;
td.appendChild(IMGcontainer);
IMGcontainer.appendChild(textElement);
}
else if (a === 1) {
var textElement = document.createElement('p');
textElement.textContent = rocketName;
td.appendChild(textElement);
}
else if (a === 2) {
var textElement = document.createElement('p');
textElement.textContent = rocketID;
td.appendChild(textElement);
}
else if (a === 3) {
var button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Zobacz');
button.setAttribute('id', i);
td.appendChild(button);
}
}
}
document.getElementById('0').addEventListener('click', () => {
const remDiv = document.getElementById('myTable');
remDiv.remove();
document.getElementById('returnButton2').remove();
renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69955f709d1eb');
})
document.getElementById('1').addEventListener('click', () => {
const remDiv = document.getElementById('myTable');
remDiv.remove();
document.getElementById('returnButton2').remove();
renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69973a809d1ec');
})
document.getElementById('2').addEventListener('click', () => {
const remDiv = document.getElementById('myTable');
remDiv.remove();
document.getElementById('returnButton2').remove();
renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69974db09d1ed');
})
document.getElementById('3').addEventListener('click', () => {
const remDiv = document.getElementById('myTable');
remDiv.remove();
document.getElementById('returnButton2').remove();
renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d96eda699382d09d1ee');
})
});
const returnButton2 = document.createElement('input');
returnButton2.setAttribute('type', 'button');
returnButton2.setAttribute('value', 'Powrót');
returnButton2.setAttribute('id', 'returnButton2');
document.getElementById('container1').appendChild(returnButton2);
returnButton2.addEventListener('click', () => {
document.getElementById('myTable').remove();
document.getElementById('returnButton2').remove();
document.getElementById('myHead').textContent = "";
renderDef();
})
}
renderoneRocket = (fRocketId) => {
class oneRocket {
constructor(rocName, rocSize, rocIMG, rocDescript, rocFlyDate, rocFlyPrice, rocIfUse, rocEngInfo) {
this.rocName = rocName;
this.rocSize = rocSize;
this.rocIMG = rocIMG;
this.rocDescript = rocDescript;
this.rocFlyDate = rocFlyDate;
this.rocFlyPrice = rocFlyPrice;
this.rocIfUse = rocIfUse;
this.rocEngInfo = rocEngInfo;
}
}
fetch(fRocketId).then(response => response.json()).then(data => {
console.log(data);
var arrayHead = new Array();
arrayHead = ["Nazwa", "Wymiary i waga", "Obraz", "Opis", "Data pierwszego lotu", "Koszt wystrzału", "W użyciu (tak/nie)", "Inrofmacje o silniku"];
var secondTable = document.createElement('table');
secondTable.setAttribute('id', 'secondTable');
var tr = secondTable.insertRow(-1);
for (i = 0; i < arrayHead.length; i++) {
let th = document.createElement('th');
th.innerHTML = arrayHead[i];
tr.appendChild(th);
}
var div = document.getElementById('container1');
div.appendChild(secondTable);
const rocketName = data.name;
const rocketSize = `${data.height.meters}m.
${data.mass.kg}kg.`;
const rocketIMG = data.flickr_images[0];
const rocketDescript = data.description;
const rocketFlyDate = data.first_flight;
const rocketFlyPrice = data.cost_per_launch;
const rocketIfUse = data.active;
const rocketEngineInfo = `thrust vacuum:
${data.engines.thrust_vacuum.kN}
type:
${data.engines.type}
thrust to weigh:
${data.engines.thrust_to_weigh}`;
var ThisRocket = new oneRocket(rocketName, rocketSize, rocketIMG, rocketDescript, rocketFlyDate, rocketFlyPrice, rocketIfUse, rocketEngineInfo);
console.log(ThisRocket);
const thisTab = document.getElementById('secondTable');
console.log(thisTab);
var myTab = document.getElementById('secondTable');
var rowAm = myTab.rows.length;
var tr = myTab.insertRow(rowAm);
tr.classList.add('rows');
for (a = 0; a < arrayHead.length; a++) {
let td = document.createElement('td');
td = tr.insertCell(a);
td.classList.add('column');
if (a === 0) {
var rElement = document.createElement('p');
rElement.textContent = rocketName;
td.appendChild(rElement);
}
else if (a === 1) {
var rElement = document.createElement('p');
rElement.textContent = rocketSize;
td.appendChild(rElement);
}
else if (a === 2) {
var rElement = document.createElement('p');
rElement.textContent = 'notdoneyet';
td.appendChild(rElement);
}
else if (a === 3) {
var rElement = document.createElement('p');
rElement.textContent = rocketDescript;
td.appendChild(rElement);
}
else if (a === 4) {
var rElement = document.createElement('p');
rElement.textContent = rocketFlyDate;
td.appendChild(rElement);
}
else if (a === 5) {
var rElement = document.createElement('p');
rElement.textContent = rocketFlyPrice;
td.appendChild(rElement);
}
else if (a === 6) {
var rElement = document.createElement('p');
rElement.textContent = rocketIfUse;
td.appendChild(rElement);
}
else if (a === 7) {
var rElement = document.createElement('p');
rElement.textContent = rocketEngineInfo;
td.appendChild(rElement);
}
}
const returnButton = document.createElement('input');
returnButton.setAttribute('type', 'button');
returnButton.setAttribute('value', 'Powrót');
returnButton.setAttribute('id', 'returnButton');
div.appendChild(returnButton);
returnButton.addEventListener('click', () => {
const remDiv3 = document.getElementById('secondTable');
remDiv3.remove();
returnButton.remove();
renderRocket();
})
});
}
renderStarlink = () => {
var myHead2 = document.getElementById('myHead');
myHead2.textContent = "Starlinks";
class Starlink {
constructor(stID, stName, stDate) {
this.stID = stID;
this.stName = stName;
this.stDate = stDate;
}
}
fetch('https://api.spacexdata.com/v4/starlink').then(response => response.json()).then(data2 => {
var arrayHead2 = new Array();
arrayHead2 = ["ID", "Nazwa", "Data wystrzelenia"];
var myTable3 = document.createElement('table');
myTable3.setAttribute('id', 'myTable3');
var tr = myTable3.insertRow(-1);
for (i = 0; i < arrayHead2.length; i++) {
let th = document.createElement('th');
th.innerHTML = arrayHead2[i];
tr.appendChild(th);
}
var div2 = document.getElementById('container1');
div2.appendChild(myTable3);
for (let i = 0; i < data2.length; i++) {
const StarlinkID = data2[i].spaceTrack.OBJECT_ID;
const StarlinkName = data2[i].spaceTrack.OBJECT_NAME;
const StarlinkDate = data2[i].spaceTrack.LAUNCH_DATE;
var Starlinks = new Starlink(StarlinkID, StarlinkName, StarlinkDate);
console.log(Starlinks);
const thisTab3 = document.getElementById('myTable3');
console.log(thisTab3);
var myTab3 = document.getElementById('myTable3');
var rowAm = myTab3.rows.length;
var tr = myTab3.insertRow(rowAm);
tr.classList.add('rows');
for (a = 0; a < arrayHead2.length; a++) {
let td = document.createElement('td');
td = tr.insertCell(a);
td.classList.add('column');
if (a === 0) {
var textElement = document.createElement('p');
textElement.textContent = StarlinkID;
td.appendChild(textElement);
}
else if (a === 1) {
var textElement = document.createElement('p');
textElement.textContent = StarlinkName;
td.appendChild(textElement);
}
else if (a === 2) {
var textElement = document.createElement('p');
textElement.textContent = StarlinkDate;
td.appendChild(textElement);
}
}
}
const returnButton3 = document.createElement('input');
returnButton3.setAttribute('type', 'button');
returnButton3.setAttribute('value', 'Powrót');
returnButton3.setAttribute('id', 'returnButton3');
document.getElementById('container1').appendChild(returnButton3);
returnButton3.addEventListener('click', () => {
document.getElementById('myTable3').remove();
document.getElementById('returnButton3').remove();
document.getElementById('myHead').textContent = "";
renderDef();
})
});
}
renderTesla = () => {
var myHead2 = document.getElementById('myHead');
myHead2.textContent = "Tesla Car";
class Tesla {
constructor(eaDist, mrsDist, carDate, carDesc, carImg) {
this.eaDist = eaDist;
this.mrsDist = mrsDist;
this.carDate = carDate;
this.carDesc = carDesc;
this.carImg = carImg;
}
}
fetch('https://api.spacexdata.com/v4/roadster').then(response => response.json()).then(data3 => {
var arrayHead3 = new Array();
arrayHead3 = ["Odległość od Ziemi", "Odległość od Marsa", "Data wystrzelenia", "Opis", "Obraz"];
var myTable4 = document.createElement('table');
myTable4.setAttribute('id', 'myTable4');
var tr = myTable4.insertRow(-1);
for (i = 0; i < arrayHead3.length; i++) {
let th = document.createElement('th');
th.innerHTML = arrayHead3[i];
tr.appendChild(th);
}
var div4 = document.getElementById('container1');
div4.appendChild(myTable4);
const earthDist = data3.earth_distance_km;
const marsDist = data3.mars_distance_km;
const carFlyDate = data3.launch_date_utc;
const carDescript = data3.details;
const carIMG = "not set yet";
var TeslaCar = new Tesla(earthDist, marsDist, carFlyDate, carDescript, carIMG);
console.log(TeslaCar);
const thisTab4 = document.getElementById('myTable4');
console.log(thisTab4);
var myTab4 = document.getElementById('myTable4');
var rowAm = myTab4.rows.length;
var tr = myTab4.insertRow(rowAm);
tr.classList.add('rows');
for (a = 0; a < arrayHead3.length; a++) {
let td = document.createElement('td');
td = tr.insertCell(a);
td.classList.add('column');
if (a === 0) {
var textElement = document.createElement('p');
textElement.textContent = earthDist;
td.appendChild(textElement);
}
else if (a === 1) {
var textElement = document.createElement('p');
textElement.textContent = marsDist;
td.appendChild(textElement);
}
else if (a === 2) {
var textElement = document.createElement('p');
textElement.textContent = carFlyDate;
td.appendChild(textElement);
}
else if (a===3){
var textElement = document.createElement('p');
textElement.textContent = carDescript;
td.appendChild(textElement);
}
else if (a===4){
var textElement = document.createElement('p');
textElement.textContent = carIMG;
td.appendChild(textElement);
}
}
const returnButton4 = document.createElement('input');
returnButton4.setAttribute('type', 'button');
returnButton4.setAttribute('value', 'Powrót');
returnButton4.setAttribute('id', 'returnButton4');
document.getElementById('container1').appendChild(returnButton4);
returnButton4.addEventListener('click', () => {
document.getElementById('myTable4').remove();
document.getElementById('returnButton4').remove();
document.getElementById('myHead').textContent = "";
renderDef();
})
});
}
</script>
</body>
</html>
Dokumentacja: https://github.com/r-spacex/SpaceX-API/ , https://github.com/r-spacex/SpaceX-API/blob/master/docs/v4/README.md