JSFiddle - React, Tailwind, and code Playground

by Ashokaditya Mohanty

HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Promises in JS</title>
        <style>
            body {
                font-family: 'Proxima Nova', sans-serif;
                font-size: 1.2em;
            }

        </style>
    </head>

    <body>
        <h2>Star Wars</h2>
        <div id="output"></div>
    </body>

</html>

JavaScript

// #region Setup
const URL = 'https://starwars.egghead.training/';
const output = document.getElementById('output');
output.innerText = 'Loading...';

function getFilmTitles(films) {
    return films
        .sort((a, b) => a.episode_id - b.episode_id)
        .map(film => film.episode_id < 10 ? `0${film.episode_id}. ${film.title}` : `${film.episode_id}. ${film.title}`)
        .join('\n');
}
// #endregion

const resp = fetch(`${URL}films`);
resp.then(res => res.json())
    .then(films => {
        output.innerText = getFilmTitles(films);
    });