Skip to content
Submitted over 3 years ago

URL shortening API landing page

👾 Ekaterine Mitagvaria 👾•7,860
@catherineisonline
A solution to the URL shortening API landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Frontend Mentor community! This is my solution to the URL shortening API landing page.

I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.

I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!

Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Omar Elbastawesy•230
    @omarelbastawesy

    Great job :)

  • Luis Herrera•795
    @Luis15Herr

    Amazing Work :)

  • TsuneWeb•260
    @TSune-web

    Well done!

  • Ahmed Abdelaal•220
    @shrki416

    @catherineisonline great job! This looks awesome :)

  • Nicolas Gula•170
    @NicolasGula

    Awesome!

  • Jordane Gengo•590
    @jgengo-alt

    looks very good, your logo (the brushes) are a bit disappearing compared to what is expected, but that's just a detailed. It's because you used the img to also do the background-color and the border-radius: 50% instead of inserting the image in a div with those ;)

    you did very great work here! thanks for sharing

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Awesome Work..

  • AditNovadianto•1,040
    @AditNovadianto

    @catherineisonline you did this project so nice and not have any issues there!!!

  • bikeinman•1,080
    @BikeInMan

    If @nakoyawilson 's solution works for you, then please ignore. Unlike her, I didn't get time to clone and test it.

    But I get a feeling, mainClone.classList = "search-result"; is wrong.

    May be it should be written as mainClone.className = "search-result"; or mainClone.classList.add('search-result');

    Just a thought.

    BTW, you always say, it is not about design and just practicing js, but most of your work seems to be spot on. Great work as always.

  • Nakoya Wilson•1,530
    @nakoyawilson

    Hey Catherine! I downloaded your code, changed all occurrences of sessionStorage to localStorage and deleted originalHtml = localStorage.getItem("cloneCache"); and parentNode.innerHTML = originalHtml; from the function and the data displayed for me.

    window.onload = function () {
  let mainClone = shortlyResult.cloneNode(true);
  let cloneLinkField = mainClone.querySelector(".inserted-link");
  mainClone.classList = "search-result";
  parentNode.appendChild(mainClone);
  //Retrieving
  let cloneLink = localStorage.getItem("cloneLink");
  console.log(cloneLink);
  //Injecting
  console.log(cloneLinkField);
  cloneLinkField.innerHTML = cloneLink;
};
  • Ken9Code•30
    @Ken9Kodehode

    Great work!

  • Jakub Krwawicz•320
    @kerminek

    Hi, one image makes your page wider than we want it to be. Solve it using "overflow: hidden" on main container of the page. Also, if you want to keep data after refresh try to make it using cookies or simply "localstorage" :)

  • Dev Rathore•2,540
    @GitHub-dev12345

    How to make this project and where are you learn APIs. Can you share how to learn APIs.

  • Dev Rathore•2,540
    @GitHub-dev12345

    Hey Catherine nice work😊🎉

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