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

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>

 

READ  Build Flappy Bird Clone Game in 25 Lines of Javascript Code and Deploy it on Vercel Full Project For Beginners

 

 

 

Screenshot

 

 

 

 

Leave a Reply