JSFiddle - React, Tailwind, and code Playground

by Gautham PJ

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
 <!DOCTYPE html>
 <html>

   <head>
     <meta charset="UTF-8">
     <title>BHAV Copy URL Generator</title>
   </head>

   <body>

     <div class="container">

       <div class="row">
         <div class="twelve columns">
           <h3>
             NSE Link Generator
           </h3>
         </div>
       </div>

       <form id="linkGeneratorForm">

         <div class="row">
           <div class="six columns">
             <label for="fromDate">From Date</label>
             <input type="text" id="fromDate" name="fromDate">
           </div>

           <div class="six columns">
             <label for="toDate">To Date</label>
             <input type="text" id="toDate" name="toDate">
           </div>
         </div>

         <div class="row">
           <div class="twelve columns">
             <button id="generateButton" class="button-primary">Generate</button>
           </div>
         </div>

       </form>
       <hr />

       <div class="row">
         <div class="twelve columns">
           <h5>Output</h5>
           <pre id="output">
             <code>Waiting ...</code>
           </pre>
         </div>
       </div>
     </div> <!-- End of ".container" -->

   </body>

 </html>

CSS

input {
  width: 100%;
}

JavaScript

const PREFIX_URL = 'https://www1.nseindia.com/content/historical/EQUITIES';
const POSTFIX_URL = 'bhav.csv.zip';


function generateUrl(dateObj) {

  if (!dateObj) {
    return 'Date not available';
  }

  // Required Formatted Value: 2021/JAN/cm13JAN2021
  let formattedDate = $.datepicker.formatDate('ddMyy', dateObj).toUpperCase();
  let formattedYear = $.datepicker.formatDate('M', dateObj).toUpperCase();

  console.log(`Generated URL: ${PREFIX_URL}${formattedDate}${POSTFIX_URL}`);
  return `${PREFIX_URL}/${dateObj.getFullYear()}/${formattedYear}/cm${formattedDate}${POSTFIX_URL}`;
}


function generateUrlsForDateRange(fromDate, toDate) {

	// To get the URL for the selected date as well.
	toDate.setDate(toDate.getDate() + 1);

  let response = [];

  while (fromDate.toDateString() !== toDate.toDateString()) {

    // Exclude Saturdays and Sundays.
    if (fromDate.getDay() === 0 || fromDate.getDay() === 6) {
      console.log(`Skipping ${fromDate.toDateString()} as it's a weekend.`);
      fromDate.setDate(fromDate.getDate() + 1);
      continue;
    }

    response.push(generateUrl(fromDate));
    fromDate.setDate(fromDate.getDate() + 1);
  }

  return response;
}


$(document).ready(function() {

  $("#fromDate").datepicker({
    minDate: "-10Y",
    maxDate: "+0D"
  });

  $("#toDate").datepicker({
    minDate: "-10Y",
    maxDate: "+0D"
  });


  // Hanlde form submission.
  $("#linkGeneratorForm").submit(function(event) {

    event.preventDefault();

    const fromDateValue = $("#fromDate").datepicker("getDate");
    const toDateValue = $("#toDate").datepicker("getDate");

    const output = generateUrlsForDateRange(fromDateValue, toDateValue);
    $('#output').html(output.map(o => `<code>${o}</code>`));
  });

});