Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Shortly URL shortening API

P

@GioKhabu

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Created with Tailwind CSS and a little bit of javascript.

Community feedback

@krushnasinnarkar

Posted

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

@GioKhabu

Posted

@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

@krushnasinnarkar

Posted

@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

@GioKhabu

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord