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

Submitted

API shortening - CSS animations and transistions

#accessibility#sass/scss#gulp
P
Daveā€¢ 5,245

@dwhenson

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

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Marlon Passosā€¢ 940

@MarlonPassos-git

Posted

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/1v52tzj

and 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

1

P
Daveā€¢ 5,245

@dwhenson

Posted

@MarlonPassos-git thanks for the good words. For sure, I don't think you are far behind me! I hadn't tested with very long urls. Nice catch, I'll look into sorting that out!

Cheers

1
Raymart Pamplonaā€¢ 16,140

@pikapikamart

Posted

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 size background-size then you could make use of clamp inside that property to manage well the size. Sometimes svg 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 the results 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

1

P
Daveā€¢ 5,245

@dwhenson

Posted

@pikamart thanks so much for taking the time to go through my code and consider the questions I asked. This is really appreciated.

I'm on my night off today! But I will go through your suggestions tomorrow and try and get things working. I think I can see the JS issue now - thanks again for that.

As for the SVG, I just have to hope that I get lucky!!

0
P
Daveā€¢ 5,245

@dwhenson

Posted

@pikamart this worked perfectly, I think I understand the issue - I'll have to read up a little more to really get my head around it.

I've not battled the SVG yet.... saving that for when I'm feeling strong!! Thanks so much for the advice - much appreciated.

1

@anapimolodec

Posted

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~

1

P
Daveā€¢ 5,245

@dwhenson

Posted

@anapimolodec thanks for the kind words! Yes the API is very slow. There's not much I can do about that as it is a problem on their side.

I really struggled with the landing image and I have not succeeded. Normally I would expect an svg to respond to the size of the container but this one didn't.

I'm not sure why, but I'll have another look later...

1

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