JSFiddle - React, Tailwind, and code Playground

by jaimem

HTML

<div id="content"> 
        <h1 class="pageTitle">Level Ten</h1> 
        
        <div class="post"> 
            <div class="post_content"> 
                
        <p>You are the captain of a starship :-) traveling far far away, you are about to run out of fuel.</p> 
        <p>Your ship travels by jumping from star to star using wormholes. Create a route to get back to the Sun Solar System based on the wormholes available in the table. You have enough fuel for 6 more jumps.</p> 
        <p>Write the code necessary to determine the jumps you need to make to get back to Sun and send it to the server using JavaScript, the answer should be a Comma-Separated List. We will check your answer and save your code.</p> 
        <p>Use the provided functions <b>GetPosition</b> and <b>SendAnswer</b>.</p> 
        <p>Start by calling GetPosition on the first line, run your script and finish calling SendAnswer.</p> 
        <p>Every time you press 'Run My Code' a new galaxy is generated, the galaxy will expire after 10 seconds so you don't get tempted to perform the process manually; your script should take less than ten seconds to run.</p> 
 
        <form method='post'> 
            <p>You are currently in: <b>Alnilam</b> </p>
            <p>These are the available wormholes:</p>

              <table id='galaxy' border='2' cellpadding='5'> 
        <tr><td><b>From:</b></td><td colspan='8'>You can travel to:</td></tr> 
        <tr> 
            <td id='Girtab'><b>Girtab</b></td> 
            <td>Lambda Velorum</td> 
            <td>Alhena</td> 
            <td>Bellatrix</td> 
            <td>Sadr</td> 
            <td>Deneb</td> 
            <td>Alpha Centauri B</td> 
            <td>Antares</td> 
            <td>Betelgeuse</td> 
        </tr> 
        <tr> 
            <td id='Achernar'><b>Achernar</b></td> 
            <td>Wei</td> 
            <td>Caph</td> 
            <td>Atria</td> 
            <td>Ankaa</td> 
            <td>Ras Alhague</td> 
           ...

JavaScript

var loadData = function(){
  var galaxies = [],
      table = document.getElementById('galaxy'),
      rows  = table.getElementsByTagName('tr'),
      home  = document.forms[0].getElementsByTagName('p')[0].getElementsByTagName('b')[0].textContent;

  for(var i=1, t = rows.length; i<t; i++){

    var cells = rows[i].getElementsByTagName('td');

    // The first cell in the row contains the name of the galaxy in its id attribute.
    // Destinations are inside the following cells as text
    var destinations= [];
    for(var j=1, t2 = cells.length; j<t2; j++){
      destinations.push( cells[j].textContent );
    }

    // Add galaxies and destinations to galaxies array
    galaxies.push({
        name :        cells[0].id,
        destinations: destinations
    });
  }

  return{
    galaxies: galaxies,
    home    : home
  };
};


var jm10a = function(){
  var galaxies,
  routes    = [],
  sunRoute  = '';

  return{

    init: function(galaxies_obj){
      galaxies = galaxies_obj;
      return this;
    },

    // gets a galaxy
    getGalaxy: function(gname, mark){

      for (var i = 0, t=galaxies.length; i < t; i++) {
          if(galaxies[i].name === gname){
              if (mark === true) galaxies[i].visited = true;
              return galaxies[i];
          }
      }
    },

    // gets a galaxy and marks it as visited
    visitGalaxy: function(gname){
      return this.getGalaxy(gname, true);
    },

    // checks if a galaxy contains a star (unused)
    hasStar:function(gname, sname){
      var galaxy = this.getGalaxy(gname);
      for (var i = 0, t=galaxy.destinations.length; i < t; i++) {
        if(galaxy.destinations[i]===sname){
          return true;
        }
      }
      return false;
    },
    // returns the galaxy of a destination (unused)
    whereIs:function(sname){
      for (var i = 0, t=galaxies.length; i < t; i++) {
        if(this.hasStar(galaxies[i].name,sname)){
          console.log('found in ' + galaxies[i].name);
        }
      }
...