Skip to content
Submitted almost 2 years ago

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

Ronald Sayre•260
@RJ3605
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

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
    @RomWeb3Posted almost 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
    1
    Ronald Sayre•260
    @RJ3605Posted almost 2 years ago

    @RomWeb3 Thank you!

    0
    Ronald Sayre•260
    @RJ3605Posted almost 2 years ago

    @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

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