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

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

@RJ3605

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


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.

Community feedback

Rom 780

@RomWeb3

Posted

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

1

@RJ3605

Posted

@RomWeb3 Thank you!

0

@RJ3605

Posted

@RomWeb3 The images were broken due to an extra / before the file "images". It's the default in my code editor, but GitHub doesn't like it.

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