API shortening - CSS animations and transistions

Solution retrospective
Some details in the readme but, I would very much welcome advice on the following issues:
-
I have failed get the final of the three svg icons working properly. I spent a long time on this and still failed. I need to have an approach to standardize icons of different sizes. Any suggestions on how to do this are most welcome.
-
have struggled to off-set the introduction section banner image. I tried
translate
and positioning, but it always resulted in horizontal scrolling. I have not got an approach to deal with this kind of issue that I can fall back to. Any suggestions would be very much appreciated. -
When I add a single result the JS renders the entire containing element meaning that all the
li
elements animate in again rather than only the one just added. I have had this issue a couple of times now and would appreciate any advice on how to make a change that affects just the item added.
Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarlonPassos-git
hello dave great job as always, one hour i get to your level.
A little detail that I saw that can improve your project and avoid this mistake in the future. When I put a very big link that doesn't have "-" it breaks the designer, see https://prnt.sc/1v52ne7
to solve this problem you can use
overflow-wrap: anywhere;
on the element that looks good, see https://prnt.sc/1v52tzjand if you pay attention we see that there is a little purple border near the corner of the white balloon, a slight detail that adding a border-radius to the bottom element solves.
Otherwise keep up the great work and we are here waiting for your next project 😃
Marked as helpful - @pikapikamart
Hey, awesome work for this one. Layout in desktop looks really great, it is responsive and the mobile layout looks great, just that hero-section image that you are talking about right.
Have you tried using it as a
background-image
? This way you can manage it's sizebackground-size
then you could make use ofclamp
inside that property to manage well the size. Sometimessvg
does not work the way we wanted it haha and I don't know why as well.Let me just fork the repo and test on my end:
- Okay, so I just look at it and it seems fine, until this line:
results.innerHTML += urls .map((url) => { return ` <li class="split container"> <p class="original">${url.original_link}</p> <p class="short">${url.full_short_link}</p> <button class="cta" aria-live="polite">Copy</button> </li>`; }) .join("");
You might think, " I am just adding an li element, why does it render the whole content" It is because of
+=
operator.+=
differs in every language in concatenating strings. Some languages does not iterate per characters on the string, but some like js iterates through.So when you use:
results.innerHtml +=
It iterates through the current string of the
results
element, meaning you are iterating again on the previous result of theresults
element, so instead of actually adding a single element, you are adding the previous ones plus the new added url on it. That is why you should avoid+=
concatenation in strings in js, it would be better to make them an array then.join
them.So a fix to the solution, you can use this:
const list = document.createElement("li"); list.className = "split container"; list.innerHTML = urls.map(url => (` <p class="original">${url.original_link}</p> <p class="short">${url.full_short_link}</p> <button class="cta" aria-live="polite">Copy</button>`) ) results.appendChild(list);
This way you are actually adding only one.
Marked as helpful - @anapimolodec
Hey, I really liked your work! Everything is working great, but it was quite long for a link to get shortened.
Design is top! But, one small thing -> in mobile, the landing image is not centered.
Keep coding~
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