JSFiddle - React, Tailwind, and code Playground

by kaidez

HTML

<ul>
 <li><a href="#" id="eTrain">Catch the G train by taking the E Train</a></li>
 <li><a href="#" id="fTrain">Catch the G train by taking the F Train</a></li>
 <li><a href="#" id="nTrain">Catch the G train by taking the N Train</a></li>
</ul>
 
<div id="myRoute"></div>

CSS

a {color: blue;}

JavaScript

(function() {
 
var brooklyn,
 connectWithETrain,
 connectWithFTrain,
 connectWithNTrain;
 
brooklyn = function() {
 var GLine = 'G line!';
 function howToGetThere(trainLine,startingStation,endingStation) {
    $('#myRoute').html('Catch the ' + trainLine + ' at the ' + startingStation + ' station. Take it to ' + endingStation + ' station and get off to catch the ' + GLine);
  }
 
  return {
    ETrain: function() {
      howToGetThere('E train','14th Street, Manhattan','Court Square');
    },
    FTrain: function() {
      howToGetThere('F train','2nd Avenue Manhattan','Fort Hamilton Parkway');
    },
    NTrain: function() {
      howToGetThere('N train','34th Street Manhattan','4th Avenue');
    }
  };
};
 
connectWithETrain = brooklyn();
connectWithFTrain = brooklyn();
connectWithNTrain = brooklyn();
 
$('#eTrain').click(function () {
  return connectWithETrain.ETrain();
});
 
$('#fTrain').click(function () {
  return connectWithFTrain.FTrain();
});
 
$('#nTrain').click(function () {
  return connectWithNTrain.NTrain();
});
})();