API shortening - CSS animations and transistions

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 😃

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.

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~