Submitted over 2 years ago

URL Shortening API Project Using Basic HTML, CSS, and JS

@RJ3605

A solution to the URL shortening API landing page challenge

Solution retrospective

This one took me a while because I stepped away from the project due to an issue with my browser guard and the API website. I eventually used a different browser to sidestep the issue. I also found that Visual Studio Code has an issue where it loads your live site zoomed in to 150%, which caused me to build the page with too small of font. I'm fixing it over time, but I wanted to upload my solution since it is functional now.

The fetchWrapper.js is a overkill for this project, but I like using it because I am familiar with it.

Any feedback is always welcome. I had an issue with reassigning the text for the "Copy" buttons. It changes to "Copied" when clicked, but for some reason I was having trouble changing the text back. Eventually I just ended up using a .forEach() to change all of them back to "Copy" before changing the text of the selected one to "Copied". Another issue I ran into was not realizing I did not have to Post, only Get, but that was due to me not understanding how the API actually worked.

Code

Please log in to post a comment

Community feedback

Rom•780
@RomWeb3
Posted over 2 years ago
Hey, For the Copy button, you can use a setTimeout to automatically go back to the original copy button with the delay you want. On my code below i switch back to original button after 2s.

Example :
```
 copyBtn.addEventListener("click", () => {
  clipboard(shortenUrl.innerHTML);
  copyBtn.classList.add("active");
  copyBtn.textContent = "Copied!";
  setTimeout(() => {
    copyBtn.classList.remove("active");
    copyBtn.textContent = "Copy";
 }, 2000);
```
});

For the social icons on footer, it's not loading, you can use https://fontawesome.com/icons it's really nice and easy to use
Marked as helpful

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