URL shortening API landing page
Design comparison
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
- @omarelbastawesyPosted about 2 years ago
Great job :)
0 - @Luis15HerrPosted over 2 years ago
Amazing Work :)
0 - @TSune-webPosted over 2 years ago
Well done!
0 - @shrki416Posted over 2 years ago
@catherineisonline great job! This looks awesome :)
0 - @NicolasGulaPosted over 2 years ago
Awesome!
0 - @jgengo-altPosted over 2 years ago
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@catherineisonlinePosted over 2 years ago@jgengo-alt I will check it out, thank you for the feedback
0 - @msuryaditriputraRPosted over 2 years ago
Awesome Work..
0@catherineisonlinePosted over 2 years ago@msuryaditriputraR Thank you!
0 - @AditNovadiantoPosted over 2 years ago
@catherineisonline you did this project so nice and not have any issues there!!!
0 - @BikeInManPosted over 2 years ago
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";ormainClone.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@nakoyawilsonPosted over 2 years ago@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 usingmainClone.classList.add('MyClass');is probably better practice as it wouldn't completely overwrite other classes if the element had other classes.0@BikeInManPosted over 2 years ago@nakoyawilson Thank you for testing and clarifying.
0@catherineisonlinePosted over 2 years ago@BikeInMan Thank you I will check it out now
0@catherineisonlinePosted over 2 years ago@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 - @nakoyawilsonPosted over 2 years ago
Hey Catherine! I downloaded your code, changed all occurrences of
sessionStoragetolocalStorageand deletedoriginalHtml = localStorage.getItem("cloneCache");andparentNode.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@catherineisonlinePosted over 2 years ago@nakoyawilson Thank you so much! I will take a look now
0@catherineisonlinePosted over 2 years ago@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.
- If I use localStorage, I receive back only one result, which was requested lastly (Result I mean the link and the shorted link).
- 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.
- If I use sessionStorage and don't clone the DOM element with originalHtml I again receive only one div back with the latest request.
- 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@nakoyawilsonPosted over 2 years ago@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@catherineisonlinePosted over 2 years ago@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@nakoyawilsonPosted over 2 years ago@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 - @Ken9KodehodePosted over 2 years ago
Great work!
0 - @kerminekPosted over 2 years ago
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@catherineisonlinePosted over 2 years ago@kerminek Thank you for the feedback. Yes, that is exactly what I am trying to do which doesn't work
0 - @GitHub-dev12345Posted over 2 years ago
How to make this project and where are you learn APIs. Can you share how to learn APIs.
0@catherineisonlinePosted over 2 years ago@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@GitHub-dev12345Posted over 2 years ago@catherineisonline which resources are used to learn JavaScript can you share with me 😊
0@catherineisonlinePosted over 2 years ago@GitHub-dev12345 freeCodeCamp, Udemy courses by Jonas Schedtmann and Colt Steele, Codecademy and google :))
0 - @GitHub-dev12345Posted over 2 years ago
Hey Catherine nice work😊🎉
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