Node.js Express Youtube Video URL Timestamp Link Generator in Javascript Full Project 2020

You are currently viewing Node.js Express Youtube Video URL Timestamp Link Generator in Javascript Full Project 2020

 

 

Live Demo

 

You can see the live demo of online tool here

 

 

Get Started

 

 

In order to get started you need to create the simple index.html file and copy paste the following code

 

 

<div class="container">
          <h1 class="text-center">
              Youtube Video Timestamp Generator Online
          </h1>
          <div class="form-group">
        <label for="youtubeurl">Youtube Video URL:</label>
        <input
          name=""
          type="text"
          id="url"
          placeholder="https://www.youtube.com/watch?v=4hFFY5Uzazs"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="minutes">Minutes:</label>
        <input
          name=""
          type="number"
          id="minutes"
          placeholder="Enter Minutes"
          value="0"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="seconds">Seconds:</label>
        <input
          name=""
          type="number"
          id="seconds"
          placeholder="Enter Seconds"
          value="0"
          required
          class="form-control"
        >
      </div>
      <br><br>

      <div id="result"></div>
      <br><br>

      
      <div class="form-group">
        <button id="copy" style="display:none" class="btn btn-danger btn-block">
          Copy to Clipboard
        </button>
      </div>
        <br><br>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    var url = ""
    var minutes = ""
    var seconds = ""
    var resultUrl = ""

    $("#url").on('change',function(){
      url = $(this).val()

      generateTimestamp(url,minutes,seconds)
    })

    $("#minutes").on('change',function(){
      minutes = parseInt($(this).val())
      generateTimestamp(url,minutes,seconds)
    })

    $("#seconds").on('change',function(){
      seconds = parseInt($(this).val())
      generateTimestamp(url,minutes,seconds)
    })

    $("#copy").on('click',function(){
      copytoclipboard()
    })

    function generateTimestamp(url,minutes,seconds){
       var minutesseconds = minutes * 60
       console.log(minutesseconds)
       console.log(seconds)
       var total = parseInt(minutesseconds + seconds)
       console.log(total)
       resultUrl = `<h1 class="text-center"><a target="_blank" style="text-decoration:underline" href="https://youtu.be/${youtube_parser(url)}?t=${total}">https://youtu.be/${youtube_parser(url)}?t=${total}</a></h1>`
       $("#result").html(resultUrl)
       $("#copy").show()
    }

    function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
    
}

function copytoclipboard(){
  var textToCopy = $("#result").text();

var myTemporaryInputElement = document.createElement("input");
myTemporaryInputElement.type = "text";
myTemporaryInputElement.value = textToCopy;

document.body.appendChild(myTemporaryInputElement);

myTemporaryInputElement.select();
document.execCommand("Copy");

document.body.removeChild(myTemporaryInputElement);

Swal.fire(
  'Good job!',
  'URL Successfully Copied',
  'success'
)
}

</script>
</html>

 

 

 

 

Screenshot

 

 

 

 

Leave a Reply