simple URL Shortener Using HTML CSS & JAVASCRIPT






Hello developers! Today we're going to talk about a URL shortener code that we can use in our web applications.

URL shorteners have become increasingly popular in recent years, as they allow us to create shorter, more manageable URLs. These shortened URLs can be easily shared and are great for social media posts, email marketing, and other forms of online advertising.
The code we're going to look at is a simple HTML, CSS, and JavaScript implementation of a URL shortener. It uses the shrtcode API to create a shortened URL from a long one.
The HTML code consists of a form that allows users to enter a long URL and a "Shorten" button to initiate the process. When the button is clicked, the JavaScript function is called, which retrieves the long URL value and sends a request to the shrtcode API to get the shortened URL.
Once the API response is received, the shortened URL is displayed in a container and a "Copy" button is provided for easy copying to the clipboard. The CSS code provides styling for the HTML elements and makes the application visually appealing.
This code is a great starting point for anyone looking to implement a URL shortener in their web application. It's simple, easy to understand, and can be easily customized to fit specific needs.
In conclusion, URL shorteners are a great tool for managing and sharing long URLs. This code provides a simple implementation of a URL shortener that can be used in any web application. As always, happy coding!


simple URL Shortener [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>URL Shortener</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="maincontainer"> <h1>URL Shortener</h1> <form> <label for="long-url">Enter or Paste Your long URL:</label> <input type="text" id="long-url" name="long-url"> <button type="button" id="shorten-btn">Shorten</button> </form> <div id="short-url-container" style="display:none"> <p>Here's your shortened URL:</p> <div id="short-url"> <a href="" target="_blank"></a> <button type="button" id="copy-btn">Copy</button> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  html, body {
    height: 100%;
}
  .maincontainer h1{
    color:#fff;
    text-align: center;
  }
  form label {
    display: block;
    margin-bottom: 20px;
    margin-left: 10px;
    color: #fff;
  }
  
  form input[type="text"] {
    width: 90%;
    padding: 10px;
    margin:auto;
    border-radius: 20px;
    border:2px solid #8f94fb;
    box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
  }
  
  form button {
    background-color: #fff;
    color: #8f94fb;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 25px;
    margin-top: 20px;
  }
  form button:hover{
    border:2px solid #8f94fb;
  }
  
  #short-url-container {
    margin-top: 20px;
  }
  #short-url-container p{
    text-align: center;
    color: #fff;
  }
  
  #short-url {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #short-url a {
    word-wrap: break-word;
    margin-right: 10px;
    color: #fff;
  }

  .maincontainer
  {
    width:80%;
    height: auto;
    min-height:350px;
    padding:40px;
    border-radius: 30px;
    box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
    background: #4e54c8;
    background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);  
    background: linear-gradient(to right, #8f94fb, #4e54c8);
    margin: auto;
  }

  #copy-btn{
    background-color: #fff;
    color: #8f94fb;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 25px;
    margin-top: 20px;
  }
  .credit a {
    text-decoration: none;
    color: #000;
    font-weight: 800;
}

.credit {
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name script.js, and remember that you've got to make a file with a .js extension.


const shortenUrl = async () => {
    const longUrl = document.getElementById('long-url').value;
    const response = await fetch(`https://api.shrtco.de/v2/shorten?url=${longUrl}`);
    const data = await response.json();
    const shortUrl = data.result.full_short_link;
  
    const shortUrlContainer = document.getElementById('short-url-container');
    const shortUrlLink = document.getElementById('short-url').querySelector('a');
    shortUrlLink.href = shortUrl;
    shortUrlLink.textContent = shortUrl;
    shortUrlContainer.style.display = 'block';
  
    const copyBtn = document.getElementById('copy-btn');
    copyBtn.addEventListener('click', () => {
      navigator.clipboard.writeText(shortUrl).then(() => {
        alert('Copied to clipboard!');
      });
    });
  };
  
  const shortenBtn = document.getElementById('shorten-btn');
  shortenBtn.addEventListener('click', shortenUrl);
  
We hope you would like this simple URL Shortener using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this simple URL Shortener using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome