<div class="wrapper">
    <h1>Table of Contents</h1>
    <hr>

<div id="table-of-contents"></div>

<h2 id="cat-o-nine-tails">Cat O'Nine Tails</h2>

<p>Cat o'nine tails Pieces of Eight swab carouser tackle. Pink hornswaggle gabion Sea Legs Davy Jones' Locker.</p>

<p>Hang the jib Nelsons folly trysail ahoy prow. Transom strike colors scallywag aft league.</p>

<h3 id="the-brig">The Brig</h3>

<p>Dead men tell no tales topmast Sail ho Davy Jones' Locker chantey. Wherry fluke pillage rope's end brig.</p>

<h4 id="privateer">Privateer</h4>

<p>Tack topgallant draft line flogging. Maroon overhaul grog blossom Privateer main sheet.</p>

<p>Provost me cackle fruit Corsair Cat o'nine tails. Hempen halter Davy Jones' Locker clipper bring a spring upon her cable run a shot across the bow.</p>

<h2 id="ahoy">Ahoy</h2>

<p>Booty squiffy wench overhaul ahoy. Parrel Pirate Round long clothes long boat come about.</p>

<p>Squiffy jack crow's nest bilged on her anchor barkadeer. Snow bucko mizzen six pounders tack.</p>

<h3 id="man-of-war">Man-of-War</h3>

<p>Lee lad nipperkin avast pressgang. Man-of-war prow ho Sail ho landlubber or just lubber.</p>

<p>Ho no prey, no pay fire ship salmagundi capstan. Hail-shot doubloon wherry loaded to the gunwalls cutlass.</p>

<h2 id="corsair">Corsair</h2>

<p>Corsair chantey hardtack ahoy snow. Maroon cog galleon topmast tender.</p>

<h3 id="shiver-me-timbers">Shiver Me Timbers</h3>

<p>Galleon nipper Shiver me timbers lugger Nelsons folly. Wench ballast scurvy man-of-war hearties.</p>

<p>Poop deck clap of thunder Corsair grog hornswaggle. Dead men tell no tales brigantine long clothes black spot sutler.</p>

<h4 id="scurvy-dog">Scurvy Dog</h4>

<p>Jury mast Letter of Marque boatswain scurvy sheet. Jolly boat plunder jack starboard Pirate Round.</p>

<p>Holystone bring a spring upon her cable grog blossom deadlights league. Lanyard gabion reef sails booty gaff.</p>

<h4 id="sea-legs">Sea Legs</h4>

<p>Sea Legs to go on account skysail Yellow Jack heave down. Spanker heave down yawl starboard barque.</p>

<p>To go on account hulk swing the lead heave to tack. Fore fire in the hole prow run a rig Jack Ketch.</p>

<h2 id="quarterdeck">On the Quarterdeck</h2>

<p>Tack chase red ensign league pinnace. Holystone quarterdeck me boatswain rope's end.</p>

<p>Sink me lanyard Pieces of Eight starboard black spot. Blimey heave down crimp mutiny matey.</p>

<h3 id="jolly-roger">Jolly Roger</h3>

<p>Belay piracy come about jolly boat transom. Heave to gally snow Arr wherry.</p>

<p>Sutler Davy Jones' Locker ahoy walk the plank lugger. Jolly Roger matey hornswaggle Privateer marooned.</p>

<h2 id="davy-jones-locker">Davy Jones' Locker</h2>

<p>Davy Jones' Locker jib trysail bowsprit heave down. Transom square-rigged clipper Jack Ketch chandler.</p>

<p>Square-rigged yawl execution dock sloop American Main. Six pounders red ensign lugger heave to dead men tell no tales.</p>

<h3 id="sloop">Sloop</h3>

<p>Spanker rutters Arr sloop pinnace. List crimp swab Blimey grog.</p>

<p>Shiver me timbers hulk black jack Pirate Round clap of thunder. Scuppers six pounders carouser spirits jib.</p>
    <hr>
    <br>
<footer>
    <em>Text provided by <a href="https://pirateipsum.me/">Pirate Ipsum</a></em>
</footer>
</div>

body {
    font-family: "Apple SD Gothic Neo", sans-serif;
    display: grid;
    place-items: center;
}


.wrapper {
    max-width: 640px;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    padding: 2%;
}

 ol {
     padding: 0;
     margin: 0;
     list-style: none;
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row wrap;
     justify-content: space-around;
 }

 li {
     line-height: 40px;
     color: #f8f8f8;
 }

 a {
     color: white;
     background-color: #472b62;
     padding: 5px;
     border-radius: 5px;
     text-decoration: none;
 }

 a:hover {
     color: #472b62;
     background-color: white;
 }

  // Get all the H2 and create an array
    const allTheH2 = Array.prototype.slice.call(document.querySelectorAll("h2"));

    // Get The Table of content
    let tableOfContent = document.querySelector('#table-of-contents');

// Function create content
const createContent = function(item){

    return   '<li>' + '<a aria-live="polite" role="button" href=" ./#' + item.id + '" >' + item.innerHTML + '</li>';

};

// Push the content in the dom
tableOfContent.innerHTML = '<nav><ol>' + allTheH2.map(createContent).join("") + '</ol></nav>';