responsive design with css, html y js

Community feedback

• 

  Nguyen Duy•245

  @koalalikecodePosted about 3 years ago

  Hey, great work on this challenge!

  • I think you can use the icon on 'fontawesome' for network icons that you mentioned instead of images, then css the color of their hover state
  • Moreover, I don't think you shorten links work well enough because I have to click on the button twice for the result, you can consult my code https://www.frontendmentor.io/solutions/shortly-url-shortening-api-challenge
  • And you should use your h tag respectively, such as h1>h2>...

  Aside from that, great work!

  0
• 

  T

  Mike Hayden•1,005

  @mickygingerPosted about 3 years ago

  Hi Matias! 👋

  The reason you have to click the "shorted it" button twice, is because if there is no enlaces array in localStorage you skip adding the URL to the DOM:

  const mostrarDatos = () => {
      enlaces = JSON.parse(localStorage.getItem("enlaces"));
  
      if(enlaces === null){
          enlaces = [];
          // then do nothing...
      } else {
         // add the URL to the DOM
      }
  }
  

  How about this:

  const mostrarDatos = () => {
      // if `enlaces` does not exist in localStorage parse "[]"
     // which will set `enlaces` to an empty array
      enlaces = JSON.parse(localStorage.getItem("enlaces") || '[]'); 
  
      if(enlaces.length > 0) {
          $sectionBorrar.style.display = "block";
      } 
  
      $insertarEnlace.innerHTML = "";
  
      enlaces.forEach(el => {
          $insertarEnlace.innerHTML+=`
              <div class="divAgregado">
                  <p class="enlaceOriginal">${el.enlaceOriginal}</p>
                  <div class="divAdentroGenerado">
                      <p class="enlaceOriginal enlacecorto">${el.enlaceCorto}</p>
                      <button class="botonParaCopiar">copy</button>
                  </div>
              </div>`;
      })
  }
  

  I'm not sure what you mean by "network icons" but you can change SVGs by opening the file and modifying the code. If you let me know which icons you want to change the background image of I'll be happy to take another look.

  Hope that helps!

  0

  ---

  

  Matias•330

  @mmc1999Posted about 3 years ago

  @mickyginger hi mike, thanks for taking the time to reply. I corrected the error as you told me, but even so I still have to press the button twice for it to work.

  0