Shortly URL shortening API

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @GioKhabu,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

  1. Input Validation: According to the design, when the "Shorten It!" button is clicked with an empty input, the input border should turn red and the placeholder text color should also be red.

  2. API Integration: You should integrate a URL shortener API. This API will take the input URL, shorten it, and return the shortened link. The shortened link should then be displayed below, similar to the divs you created for Link 1, Link 2, and Link 3.

  I hope you find these suggestions helpful.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  Giorgi Khaburzania•350

  @GioKhabuPosted 4 months ago

  @krushnasinnarkar Thank you very much for your feedback, I know about those. I just couldn't properly understand the API and how to properly fetch the Post request to get shorten URL.

  0

  

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  @GioKhabu

  The Clean URL API provides a straightforward way to shorten and expand URLs. Below is a detailed guide on how to use the API to shorten a URL using JavaScript.

  API Endpoint

  • Shorten URL: https://cleanuri.com/api/shorten

  Shortening a URL (POST Request)

  To shorten a URL, you'll need to send a POST request to the API endpoint. Here is a demo code that demonstrates how to do this using the fetch function in JavaScript.

  async function shortenUrl(longUrl) {
    try {
      const response = await fetch('https://cleanuri.com/api/shorten', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
          url: longUrl
        })
      });
  
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
  
      const data = await response.json();
      return data.result_url;
    } catch (error) {
      console.error('Error:', error);
    }
  }
  
  // Example usage:
  shortenUrl('https://example.com').then(shortUrl => {
    console.log('Shortened URL:', shortUrl);
  });
  

  Explanation

  • fetch Function: Makes network requests and returns a Promise.
  • method: Specifies the HTTP method (POST in this case).
  • headers: Sets the content type to application/x-www-form-urlencoded.
  • body: Contains the data sent to the API, formatted as URL-encoded parameters.

  I hope you find these suggestions helpful.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0

  

  P

  Giorgi Khaburzania•350

  @GioKhabuPosted 4 months ago

  @krushnasinnarkar Thanks a lot, still I had to use a different API as I guess it needed its server to launch and as I was using just Javascript I couldn't make requests.

  0