Proyecto sencillo HTML, CSS y Javascript para tu portafolios

Portada

Hola 👋, hoy te quiero presentar un proyecto sencillo en el que trabajé, el cual esta orientado a la manipulación de una URL, el cual si tu quieres lo puedes añadir a tu portafolio. Para que te des una idea de lo sencillo que es tiene tan solo 30 líneas de código de JavaScript, el HTML tiene más líneas, jejeje. Sin más que decir comencemos:

Construyendo el HTLM:

Creamos un formulario sencillo donde podremos introducir la URL para luego analizarla con nuestro JS

<form action="gpurl.com">
    <article>
     <label for="link">Introduce una URL:</label>
     <input type="url" placeholder="URL" id="link"> 
    </article>

    <br>

    <article>
     <label for="protocol">Protocolo:</label>
     <input type="text" id="protocol" readonly>
    </article>

    <br>

    <article>
     <label for="host">Dominio:</label>
     <input type="text" id="host" readonly>
    </article>

    <br>

    <article>
     <label for="port">Puerto:</label>
     <input type="text" id="port" readonly>
    </article>

    <br>

    <article>
     <label for="path">Ruta del sistema de archivos:</label>
     <input type="text" id="path" readonly>
    </article>

    <br>

    <input type="button" value="Analizar URL" class="enviar">
   </form>

Armando nuestro Javascript

Muy bien una vez realizado el paso anterior vamos a implementar la magia, primero creamos una función a la cual le pasamos un parámetro que será la URL a revisar, la convertimos a un tipo URL la poder aplicar los métodos y propiedades para este objeto, obtenemos los datos deseados, los guardamos en una constante de tipo objeto y retornamos la constante:

const getPartsUrl = (link) => {
    const url = new URL(link);
    const protocol = url.protocol;
    const port = url.port;
    const host = url.host;
    const path = url.pathname;

        const values = {
          v1 : protocol,
          v2 : port,
          v3 : host,
          v4 : path
         };
         return values;
}

Luego accedemos al elemento button con la clase “.submit” y le indicamos que cuando se produzca el evento “click” se ejecute la función para obtener las partes de una URL y luego las añadimos a sus respectivos campos en el formulario accediendo a su atributo value

const button = document.querySelector(".submit");
button.addEventListener("click", () => {
 const val = document.querySelector("#link").value;
 let parts = getPartsUrl(val);
 document.getElementById("protocol").value = parts.v1;
 document.getElementById("port").value = parts.v2;
 document.getElementById("host").value = parts.v3;
 document.getElementById("path").value = parts.v4;
})

Estilizando un poco

Con lo anterior este programita ya debería estar funcionando, pero vamos a pintarlo un poco para ello le aplique los siguientes estilos:

form article input,label {
    display: inline-block;
}
form article input {
 float: right;
}
form article label {
 float: left;
 padding-right: 10px;
} 
article {
 margin: 10px 0;
}
.submit {
 margin-top: 10px;
}
/*Estilos para el boton*/
.submit {
 background: #ab987a;
 color: #fff;
 font-weight: bold;
 font-size: 16px;
 border: 2px solid #f5f5f5;
 border-radius: 5px;
}
.submit:hover {
 opacity: .9;
 cursor: pointer;
}
/*Estilizar los inputs*/
article input {
 border-radius: 10px;
 padding: 4px;
 border: 1px solid #e7dfdd;
 background: #0f1626;
 color: #fff;
}

Captura del proyecto en una prueba

Bueno, ahora si todos esta listo y funcionando, tu puedes seguir mejorando el código y ampliándolo si quieres. Como bonus podrías agregar un titulo y centrar el formulario y quedaría mucho más bonito. Eso sería todo hasta la proxima 👌.