index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      <title>Youtube-dl downloader</title>
   </head>
   <body>
      <div class="container">
         <h1>Youtube-dl downloader</h1>
         <input type="text" id="textArea" placeholder="link"/>
         <input type="button" id="button" value="Start" />
         <h2>PlayList</h2>
         <div id="ListData">
            <p id="listStatus"></p>
            <p id="listProgress"></p>
         </div>
         <h2>Download</h2>
         <div id="downloadData">
            <div id="downloadStatus">
              <p id="videoNumber">
              <p id="videoName">
            </div>
            <div id="downloadProgress" style="display:none;">
               Percentage:
               <!-- <p id="percentage"></p> -->
               <div class="progress">
                  <div id="percentage" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                  </div>
               </div>
               ETA:
               <p id="ETA"></p>
               <p id="converting"></p>
            </div>
         </div>
         <p id="progress">
         </p>
      </div>
      <script>window.$ = window.jQuery = require('./js/jquery-2.1.4.min.js');</script>
      <script src="runner.js"></script>
      <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   </body>
</html>