URL shortening API landing page challenge hub

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  Hey @Kwill3 Lovely job here! 🥳 The site looks great and responds nicely.

  Some small suggestions:

  1. Regarding HTML, I would suggest putting all the links in the footer inside a nav element like you have done for the main nav at the top of the page.

  2. On CSS, it all looks solid to me, but I would have another look at the top navigation alignment and approach you have used. It should be fairly easy to align things centrally using nested flex boxes, and align:center.

  3. For JS, I would suggest two things: 1) When the user clicks the shorten link button, perhaps give some feedback that it worked (e.g. some animated dots something?), but more importantly, do some validation and provide feedback to the user if they entered an invalid string.

  If you replace the link.value === '' || link.value == null with a more robust validation function this could work perhaps? I used the following, which returns a boolean.

  function validateUrl(url) {
    return /[\w#%+.:=@~-]{2,256}\.[a-z]{2,6}\b([\w#%&+./:=?@~-]*)/.test(url);
  }
  

  Also, if you enter something that won't work you will actually be able to see in the console that the API returns some error messages, you can capture the error message and render its content to the page to inform the user what happened.

  I'm sure there's better solutions out there, but here's the repo for my solution in case it helps. https://github.com/dwhenson/frontendmentor-url-shortner/tree/3aecdbd26d59288dc060e2ed20e48e035ca2cd00

  Keep up the great work and let me know if I can clarify anything.

  Cheers 👋

  Dave

  Marked as helpful

  1

  ---

  

  William Lee•70

  @Kwill3Posted almost 3 years ago

  @dwhenson thanks for taking time to read my code, I will try to implement the suggestions you have made, in fact I was gonna implement the error codes in JS but I completely forgot about them because I was so excited to share my attempt so thanks for reminding me.

  Can you briefly teach me how to get the cyan line between the 3 boxes at the bottom?

  0

  

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  @Kwill3 so I had the three boxes wrapped in a ul and then I used a pseudo element to create the line, with the following code:

      content: "";
      position: absolute;
      inset-block-start: 50%;
      inline-size: 40rem;
      block-size: 0.5rem;
      inset-inline-start: 4rem;
      inline-size: 80%;
      transform: translateX(0) rotate(0);
  

  Not sure if that approach can work for you?

  Cheers!

  Marked as helpful

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! William Lee Good Job on challenge

  -> Check out my article on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  1
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Good job man. Keep it up

  1
• 

  Abdo Achhoubi•330

  @abdoachhoubiPosted almost 3 years ago

  Hi there, Great work!

  1