Skip to content

README.es.md

Latest commit

 

History

History
121 lines (91 loc) · 5.31 KB

README.es.md

File metadata and controls

121 lines (91 loc) · 5.31 KB

Conditional Profile Card

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

En este ejercicio, debes crear el código HTML necesario para representar una tarjeta de perfil. El código final cambiará en tiempo de ejecución. En función de una serie de variables que podrían cambiar.

Conditional Profile Card

  1. Dentro de src/app.js hay una función llamada render que recibe un objeto variables.
  2. Este objeto variables contiene todos los valores asignados en el formulario de la aplicación (redes sociales, nombre y apellido; etc.).
  3. La función render tiene la lógica necesaria para recibir los valores del objeto variablese incluirlos dentro del HTML de la página utilizandoinnerHTML`.
function render(variables = {}) {
  document.querySelector("#widget_content").innerHTML = `<div>Website code</div>`;
}

Puedes ver el contenido del objeto variables en cualquier momento imprimiendo la variable variables en la consola.

console.log(window.variables);
/*
{
    includeCover: true, // if includeCover is true the algorithm should
    background: "https://images.unsplash.com/photo-1511974035430-5de47d3b95da", // this is the url of the image that will used as background for the profile cover
    avatarURL: "https://randomuser.me/api/portraits/women/42.jpg", // this is the url for the profile avatar
    socialMediaPosition: "left", // social media bar position (left or right)
    
    twitter: null, // social media usernames
    github: "alesanchezr",
    linkedin: null,
    instagram: null,

    name: null,
    lastname: null,
    role: null,
    country: null,
    city: null
}
*/

🌱 Cómo iniciar este proyecto

  1. Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

a) Abrir este enlace con Gitpod en tu navegador: https://gitpod.io#https://github.com/breatheco-de/exercise-conditional-profile-card.git

b) Clonar este repositorio localmente en tu computador:

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

  1. Entra en la carpeta del proyecto: cd exercise-conditional-profile-card

  2. Instala los paquetes NPM (asegúrate de usar la última versión de node): npm install

  3. Corre el proyecto utilizando: npm run start

  4. Actualiza la función render dentro del archivo app.js.

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

📝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.

Valores de variables iniciales

Nombre Tipo Valor por Defecto Descripción
background string null La url de la imagen que se utilizará como fondo para la portada del perfil
includeCover boolean true Determina si debe mostrarse la portada o no.
avatarURL string null La url para el avatar del perfil
socialMediaPosition string "right" puede ser left o right y determina dónde colocar la barra de redes sociales
twitter string null El nombre de usuario de Twitter que se mostrará en el perfil.
github string null El nombre de usuario de Github que se mostrará en el perfil.
linkedin string null El nombre de usuario de Linkedin que se mostrará en el perfil.
instagram string null El nombre de usuario de Instagram para ser mostrado en el perfil.
name string null El nombre del usuario que se mostrará en el perfil.
lastname string null El nombre del usuario que se mostrará en el perfil.
role string null El nombre del título del trabajo que se mostrará en el perfil.
country string null El país de residencia del usuario que se mostrará en el perfil.
city string null La ciudad de residencia del usuario que se mostrará en el perfil.

Ejemplo de HTML codificado

Este es un ejemplo de un posible resultado HTML, debes reemplazar: name, //h1 lastname, //h1 role, //h2 city, //h3 country, //h3 social networks,//ul photo, //img background, //div->img

Con valores reales.

<div class="widget">
  <div class="cover"><img src="https://the_url.com/for_the_background.png" /></div>
  <img src="https://the_url.com/for_the_image.png" class="photo" />
  <h1>Ryan Boylett</h1>
  <h2>Web Developer</h2>
  <h3>Miami, USA</h3>
  <ul class="position-right">
    <li><a href="https://twitter.com/alesanchezr"><i class="fa fa-twitter"></i></a></li>
    <li><a href="https://github.com/alesanchezr"><i class="fa fa-github"></i></a></li>
    <li><a href="https://linkedin.com/alesanchezr"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="https://instagram.com/alesanchezr"><i class="fa fa-instagram"></i></a></li>
  </ul>
</div>