Assignment Description:
Make a web application that compares starships based upon the Star Wars API.
There shall be:
A label "Select two Starships from the dropdown lists to compare".
Two dropdown-controls filled with starships.
Button "Compare".
Table displaying the specs (speed, cargo, cost, etc.) of the two starships.
When the user clicks the compare-button the table is filled. Based upon the selected options in the drowdown-controls.
On each row: The cell with the higher value is highlighted.
(() => {
function removeHigherValueClass() {
document.querySelectorAll('.data-cell').forEach((dataCell) => {
dataCell.classList.remove('higher-value');
});
}
function runGen() {
let genObj = gen();
function nextItem(obj) {
if (obj.done) {
return obj.value;
}
// As long as there a further yield
// statements in the generator function ...
obj.value.then((value) => {
nextItem(genObj.next(value));
}).catch((error) => {
console.log(error);
});
}
nextItem(genObj.next()); // Trigger the recursion the first time.
}
function* gen() {
let url = 'https://swapi.co/api/starships/';
let dataCells = document.querySelectorAll('.data-cell');
let json = [];
let oneResponse = yield fetch(
url + document.getElementById('starShipOne').value,
{ mode: 'cors' } );
json.push(yield oneResponse.json());
let twoResponse = yield fetch(
url + document.getElementById('starShipTwo').value,
{ mode: 'cors' } );
json.push(yield twoResponse.json());
dataCells.forEach((dataCell) => {
let key = dataCell.dataset.key; // The more general name ...
// Starship One == 0, Starship Two == 1
for (let i = 0; i < 2; i++) {
document.getElementById(key + i).textContent = json[i][key]; // The general name together with the index gives the concrete ID.
}
if (!isNaN(json[0][key])) { // If it is computable, comparable data ...
if (parseFloat(json[0][key]) > parseFloat(json[1][key])) { // ... then compare the current spec. Class has only to be attached if one value is really higher. No attachment when equal.
document.getElementById(key + 0)
.classList.add('higher-value');
} else if (parseFloat(json[1][key]) > parseFloat(json[0][key])) {
document.getElementById(key + 1)
.classList.add('higher-value');
}
}
});
}
document
.getElementById('compare')
.addEventListener('click', () => {
removeHigherValueClass();
runGen();
});
})();
html {
background-color: rgba(245, 245, 245, .5);
}
.higher-value {
background-color: pink;
font-weight: 900;
}
.main-wrap {
max-width: 800px;
margin: 40px auto;
}
.main-nav {
margin: 0 0 30px;
}
.data-cell {
text-align: center;
width: 200px;
}
<section>
<div class="main-wrap">
<h3>Select two Starships from the dropdown lists to compare</h3>
<nav class="main-nav">
<select id="starShipOne">
<option value="2" selected="selected">CR90 Corvette</option>
<option value="75">V-wing</option>
<option value="74">Belbullab-22 Starfighter</option>
<option value="65">Jedi Interceptor</option>
<option value="3">Star Destroyer</option>
<option value="59">Trade Fedaration Cruiser</option>
<option value="58">Solar Sailer</option>
<option value="63">Republic Attack Cruiser</option>
<option value="28">A-wing</option>
<option value="29">B-wing</option>
<option value="39">Naboo Fighter</option>
<option value="10">Millenium Falcon</option>
</select>
<select id="starShipTwo">
<option value="2">CR90 Corvette</option>
<option value="75" selected="selected">V-wing</option>
<option value="74">Belbullab-22 Starfighter</option>
<option value="65">Jedi Interceptor</option>
<option value="3">Star Destroyer</option>
<option value="59">Trade Fedaration Cruiser</option>
<option value="58">Solar Sailer</option>
<option value="63">Republic Attack Cruiser</option>
<option value="28">A-wing</option>
<option value="29">B-wing</option>
<option value="39">Naboo Fighter</option>
<option value="10">Millenium Falcon</option>
</select>
<button id="compare">Compare</button>
</nav>
<table border="1">
<tr>
<th></th>
<th>Starship 1</th>
<th>Starship 2</th>
</tr>
<tr>
<td>Name</td>
<!-- 'data-key' will later determine the row.
id='data-key-value[ 0 || 1 ]' determines the cell -->
<td class="data-cell" data-key="name" id="name0"></td>
<td class="data-cell" data-key="name" id="name1"></td>
</tr>
<tr>
<td>Cost</td>
<td class="data-cell" data-key="cost_in_credits" id="cost_in_credits0"></td>
<td class="data-cell" data-key="cost_in_credits" id="cost_in_credits1"></td>
</tr>
<tr>
<td>Speed</td>
<td class="data-cell" data-key="max_atmosphering_speed" id="max_atmosphering_speed0"></td>
<td class="data-cell" data-key="max_atmosphering_speed" id="max_atmosphering_speed1"></td>
</tr>
<tr>
<td>Cargo Size</td>
<td class="data-cell" data-key="cargo_capacity" id="cargo_capacity0"></td>
<td class="data-cell" data-key="cargo_capacity" id="cargo_capacity1"></td>
</tr>
<tr>
<td>Passengers</td>
<td class="data-cell" data-key="passengers" id="passengers0"></td>
<td class="data-cell" data-key="passengers" id="passengers1"></td>
</tr>
</table>
</div>
</section>
What do you think about my idea with the general name-attribute and the specific ID? Is there are better solution to this? Is it good practice at all to depend so much on HTML-attributes?
What do you think about the implementation in general?
All hints, recommendations and comments are appreciated.