POST request is not shortening links in my project
Hello, please I need help with my project, it’s a URL shorter. I'm trying to get the shortened links to show but when I submit there’s no shortened link. Please how do I solve this? Live project : https://url-shortner-delta-nine.vercel.app/ Github link : https://github.com/kenekc18/URL_Shortner
GitHub
GitHub - kenekc18/URL_Shortner
Contribute to kenekc18/URL_Shortner development by creating an account on GitHub.
11 Replies
there's an error in the console when you click submit, that url_link is null
that's because
document.querySelector('.input'); doesn't return anything, because there's no elements with class="input"
you can either use document.querySelector('input'); or document.querySelector('#url');
I'd recommend the #url version, selecting by element can lead to unpredictable behavior cause it's much easier to have multiple input elements than multiple elements with the same ID (which isn't allowed in the HTML spec anyway)Ok I've made those changes and the shortened link is still not showing
the call to the bitly api is failing with a 403 error:
generally that means you're not using that API right, did you follow the documentation for the bitly api?
ah, I think you misunderstood
{TOKEN} in the API docs, you also replace the curly braces
it's probably not a good idea to use this on the frontend though, the API seems to have a request limit, and with that API key anyone would be able to copy it and use credits on your account if you ever pay for itOh ok but the API is paid
right, then you'll want to invalidate that key and create a backend service so you don't ever send that key to the end-user
Oh wow backend service?
if a service is paid, you need to protect the API key and there is no way to do that in a front-end only application
This is just a small project I’m trying, so I don’t need to use a GET request to get the shortened link right, a POST request is enough to send and get the link right?
that's what the API docs say yeah, a POST will contain a response that contains the shortlink
Ok so the issue is from how I’m using the API
the issue on the vercel link currently is the curly braces around the token