Generador de un perfil condicional

Nota: Si trabajas localmente, asegúrate de que tienes node.js instalado en tu computadora escribiendo en tu terminal:

1$ node -v

1https://github.com/breatheco-de/exercise-conditional-profile-card.git

1$ npm run start

Un poco de Contexto

Como desarrollador web, estarás creando muchos HTML dinámicos y CSS usando algoritmos de JavaScript.

En este ejercicio, debes crear el código HTML necesario para renderizar una tarjeta de perfil en función de una serie de variables que pueden cambiar. Aquí hay un ejemplo:

Dentro de src/app.js hay una función llamada render que recibe un objeto variables y contiene la lógica para crear la mayoría del código HTML de nuestro sitio web.

1function render(variables = {}) {
2  document.querySelector("#widget_content").innerHTML = `<div>Website code</div>`;
3}

Puedes ver las variables que están siendo generadas escribiendo en la consola:

1console.log(window.variables);
2/*
3{
4    includeCover: true, // if includeCover is true the algorithm should show the cover image
5    background: "https://images.unsplash.com/photo-1511974035430-5de47d3b95da", // this is the image's url that will be used as a background for the profile cover
6    avatarURL: "https://storage.googleapis.com/breathecode-asset-images/3c15f2d5e8b14c8b5bc801cf99a02f1c88a450303a550a875e395b9ae099fa54.jpg", // this is the url for the profile avatar
7    socialMediaPosition: "left", // social media bar position (left or right)
8    
9    twitter: null, // social media usernames
10    github: "alesanchezr",
11    linkedin: null,
12    instagram: null,
13
14    name: null,
15    lastName: null,
16    role: null,
17    country: null,
18    city: null
19}
20*/

📝 Instrucciones

Revisa este video con las instrucciones para que entiendas mejor el ejercicio: https://youtu.be/gaVm8eyCqlM

1. Lee y comprende la función render y el valor de la variable variables que recibe.

2. Cambia el contenido de la función render para que renderice todos los valores que llegan a través de variables en la tarjeta de perfil.

💡 Atención!

No necesitas añadir ningún event listener a los elementos que ya están construidos en el proyecto. Esto ya está siendo realizado por esta parte del código:

1document.querySelectorAll(".picker").forEach(function(elm) {
2    elm.addEventListener("change", function(e) {
3      // <- add a listener to every input
4      const attribute = e.target.getAttribute("for"); // when any input changes, collect the value
5      let values = {};
6      values[attribute] =
7        this.value == "" || this.value == "null"
8          ? null
9          : this.value == "true"
10          ? true
11          : this.value == "false"
12          ? false
13          : this.value;
14      render(Object.assign(window.variables, values)); // render again the card with new values
15    });
16  });

Entonces cuando el contenido de los elementos "cambia" se va a actualizar de una vez la variable para cada elemento. Todo lo que necesitas hacer es actualizar el contenido HTML dentro de la función render, como se mencionó en la instrucción 1.

Valores de variables iniciales

HTML programado manualmente

Este es un ejemplo de una posible salida HTML, vas a tener que remplazar el nombre, apellido, etc. Con los valores que puedan tener estas variables.

1<div class="widget">
2  <div class="cover"><img src="https://the_url.com/for_the_background.png" /></div>
3  <img src="https://the_url.com/for_the_image.png" class="photo" />
4  <h1>Ryan Boylett</h1>
5  <h2>Web Developer</h2>
6  <h3>Miami, USA</h3>
7  <ul class="position-right">
8    <li><a href="https://twitter.com/alesanchezr"><i class="fa fa-twitter"></i></a></li>
9    <li><a href="https://github.com/alesanchezr"><i class="fa fa-github"></i></a></li>
10    <li><a href="https://linkedin.com/alesanchezr"><i class="fa fa-linkedin"></i></a></li>
11    <li><a href="https://instagram.com/alesanchezr"><i class="fa fa-instagram"></i></a></li>
12  </ul>
13</div>

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.