<!-- ------------ Created By InCoder ------------ -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shareable link to downloadable link converter | InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
  <div class="card">
    <div class="card-header">
      <h2>Drive Link Converter</h2>
      <div class="error">
        <i class="fas fa-exclamation-circle"></i>
        <p class="message"></p>
      </div>
      <div class="linkInput">
        <form id="convertLink">
          <input type="text" name="driveLink" placeholder="Paste Drive Link">
          <button type="submit" class="inBtn inBtn-primary">Convert</button>
        </form>
      </div>
    </div>
    <div class="card-footer">
      <h3>Converted Downloadable Link</h3>
      <div class="convertedLinkBox">
        <input type="text" id="convertedLink" placeholder="Converted Downloadable Link" disabled>
        <button type="submit" class="inBtn inBtn-primary copyBtn" title="Click to Cpoy"><i class="fas fa-clipboard"></i></button>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    let link = $('.linkInput input');
    $('#convertLink').on('submit', function(e) {
      e.preventDefault();
      if (link.val().trim() == '' || link.length == '0') {
        $('.error .message').html('Please Enter Google Drive Shareable Link');
        showError();
      } else {
        if (!is_valid_url(link.val().trim())) {
          $('.error .message').html('Please Enter Valid URL');
          showError();
        } else {
          let id0 = link.val().trim().split('d/')['1'];
          let ID = id0.split('/v')['0'];
          let downloadLink = 'https://drive.google.com/uc?id=' + ID + '&export=download';
          $('#convertedLink').val(downloadLink);
        }
      }
    });
    $('.copyBtn').click(function() {
      copyToClipboard('#convertedLink');
       $('.copyBtn i').remove();
        $('.copyBtn').html('Copied');
      setTimeout(function(){
        $('.copyBtn').html('');
        $('.copyBtn').append('<i class="fas fa-clipboard"></i>');
      }, 2000);
    });

    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).val()).select();
      document.execCommand("copy");
      $temp.remove();
    }

    function showError() {
      $('.error').css('display', 'flex');
      setInterval(function() {
        $('.error').css('display', 'none');
      }, 3000);
    }

    function is_valid_url(url) {
      //regular expression for URL
      var pattern = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
      if (pattern.test(url)) {
        return true;
      } else {
        return false;
      }
    }
  </script>
</body>

</html>
/* ------------ Created By InCoder ------------ */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  background: #3cc091;
  justify-content: center;
}

.card {
  width: 30rem;
  border-radius: 8px;
  margin: 0px 25px 0px 20px;
  background-color: #efefef;
  font-family: "Poppins", sans-serif;
}

.card .card-header {
  margin-top: 1rem;
  text-align: center;
  letter-spacing: 0.1rem;
}

.card .card-header .preview {
  max-width: 100%;
  height: 20rem;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: #626262;
  margin: 15px 30px;
  font-size: 1.2rem;
  max-height: 20rem;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  border: 2px dashed #3cc091;
}

.card .card-header .preview img {
  max-height: 20rem;
  max-width: 15rem;
}

.card .card-header .linkInput input[type="text"] {
  width: 65%;
  height: 2rem;
  outline: none;
  font-size: 1rem;
  margin-right: 2%;
  margin-top: 20px;
  padding-left: 8px;
  border-radius: 5px;
  margin-bottom: 1rem;
  border: 1px solid #cecece;
}

.card .card-header .linkInput form {
  max-width: 28rem;
  display: flex;
  align-items: center;
  justify-content: end;
}

.card .card-header .linkInput input[type="text"]:focus {
  border: 1px solid #3cc091;
  background-color: #90909030;
}

.inBtn {
  color: #fff;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  margin-right: 2%;
  user-select: auto;
  padding: 6px 12px;
  border-radius: 5px;
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.inBtn:hover {
  background-color: #202020;
  border: 2px solid #202020;
}

.inBtn-primary {
  border: 2px solid #3cc091;
  background: #3cc091;
}

.card-footer {
  text-align: center;
}

.card-footer input:disabled {
  width: 75%;
  height: 2rem;
  outline: none;
  font-size: 1rem;
  margin-top: 20px;
  padding-left: 8px;
  margin-right: 1rem;
  border-radius: 5px;
  background: #71837d1f;
  margin-bottom: 1rem;
}

.convertedLinkBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.error {
  width: 70%;
  height: 2rem;
  display: none;
  font-size: 15px;
  margin-top: 1rem;
  color: #ffffff;
  letter-spacing: 0;
  margin-left: auto;
  border-radius: 5px;
  margin-right: auto;
  align-items: center;
  justify-content: start;
  padding: 5px 3px 3px 8px;
  background-color: #e44436;
}

.error p {
  margin-left: 5px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.