responsive design with css, html y js

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!

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!