Javascript Project to Build Twitter Profile Picture Downloader Using Username in Browser Using AJAX & HTML5

You are currently viewing Javascript Project to Build Twitter Profile Picture Downloader Using Username in Browser Using AJAX & HTML5

Javascript Project to Build Twitter Profile Picture Downloader Using Username in Browser Using AJAX & HTML5

<!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>Twitter Profile Pic Downloader</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">Twitter Profile Pic Downloader</h1>
      <form id="form">
        <div class="form-group">
          <label for="username">Enter Twitter Username:</label>
          <input
            type="text"
            id="username"
            placeholder="Enter Twitter Username"
            required
            class="form-control"
          />
        </div>
        <div class="form-group">
          <button class="btn btn-danger btn-block">Download Image</button>
        </div>
      </form>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $("#form").submit((e) => {
      e.preventDefault();
 
      let username = $("#username").val();
 
      let url =
        "https://twitter-profile-pic.jsoxford.com/" +
        username +
        "?size=original";
 
      forceDownload(url, "image.jpg");
 
      $("#username").val("");
    });
 
    function forceDownload(url, fileName) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement("a");
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
      };
      xhr.send();
    }
  </script>
</html>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply