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
Log in with GitHub

Submitted

URL shortening API landing page

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Preview siteView code
Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison

SolutionDesign

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

Community feedback

Jordane Gengo• 590

@jgengo-alt

Posted

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

0
AditNovadianto• 1,040

@AditNovadianto

Posted

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

0
bikeinman• 1,080

@BikeInMan

Posted

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.

0
Nakoya Wilson• 1,530

@nakoyawilson

Posted

@BikeInMan Good point about the mainClone.classList = "search-result";. I just checked and writing it like this isn't affecting it being rendered in the browser but using mainClone.classList.add('MyClass'); is probably better practice as it wouldn't completely overwrite other classes if the element had other classes.

0
bikeinman• 1,080

@BikeInMan

Posted

@nakoyawilson Thank you for testing and clarifying.

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@BikeInMan so what happens here is that mainClone.classList = "search-result"; doesn't just add the class but replaces it. Because the original div is hidden and its class is called "hidden-result" when the div receives some data - like links and code, it becomes visible but its class name is replaced. I know usually you can do toggle class, so it's shown or hidden however in this case, it didn't work for me because I don't toggle it. I hope it makes sense. :D

0
Nakoya Wilson• 1,530

@nakoyawilson

Posted

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;
};
0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@nakoyawilson I tried it but it still doesn't do what I needed. originalHtml = localStorage.getItem("cloneCache"); is supposed to save the whole target dom I want to keep. I need dom elements to stay there so they can accept past search results. "cloneLink" is just the link I requested to shorten. If I don't save the DOM elements in storage, upon reloading the only thing I receive is the last created element(including the latest link). Basically, there will not be enough DOM for several results, if that makes sense.

I added some changes and it started working finally but not fully.

  1. If I use localStorage, I receive back only one result, which was requested lastly (Result I mean the link and the shorted link).
  2. If I don't use originalHtml = localStorage.getItem("cloneCache") as you said, I will receive only one div back with the latest result, but if I keep it, I receive back all the divs with empty result fields. The latest request remains though.
  3. If I use sessionStorage and don't clone the DOM element with originalHtml I again receive only one div back with the latest request.
  4. If I do clone the DOM element as well, with sessionStorage I receive back all the divs but this time they are all filled up. All the requested links and short urls are present. However, the last one appears empty.

My main goal was to keep all the past requests and the reason I was choosing sessionStorage is to let the visitor of my project, clean the requests if they closed the website and opened it some other time. Instead of setting additional code to clear the local cache. I could make it leave only the latest one but I think that won't make sense. I will try to do something else now and fix that last empty div.

1
Nakoya Wilson• 1,530

@nakoyawilson

Posted

@catherineisonline Oh ok. After your question I decided to try the challenge myself and I used localStorage and stored the links as an array of objects and just pushed each new search to the array. Maybe you can try saving the links as an array of objects and see if you get the functionality you want?

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@nakoyawilson I tried to check again however seems like I have an issue not retrieving the data but displaying it. For some reason, it's ignoring my first request. Let's say if I request two results and reload, it will display only one div with values inside it. If I request only one url shortening, it will display an empty div after reloading. Decided to leave it like that for now, at least it looks better now than before. Thank for the suggestions!

0
Nakoya Wilson• 1,530

@nakoyawilson

Posted

@catherineisonline When you come back to it and figure out the issue, let me know. I'd love to know what the problem was.

0
Jakub Krwawicz• 320

@kerminek

Posted

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" :)

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@kerminek Thank you for the feedback. Yes, that is exactly what I am trying to do which doesn't work

0
Dev Rathore• 2,600

@GitHub-dev12345

Posted

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

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@GitHub-dev12345 I didn't really spend much time learning API, I am learning JavaScript and that's why I tried this project to practice API on the way. Just reading some quick guides if I don't know how to request specific data or anything else related. Practice is the best way to learn. I also didn't realize I can do it :D

0
Dev Rathore• 2,600

@GitHub-dev12345

Posted

@catherineisonline which resources are used to learn JavaScript can you share with me 😊

0
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@GitHub-dev12345 freeCodeCamp, Udemy courses by Jonas Schedtmann and Colt Steele, Codecademy and google :))

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