4Geeks logo
4Geeks logo
Sobre Nosotros

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

Continúa aprendiendo gratis sobre:

Generador de un perfil condicional

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

4 hrs

Tecnologías

Tarjeta de Perfil Condicional

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

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

1console.log(window.variables); 2/* 3{ 4 includeCover: true, // if includeCover is true the algorithm should 5 background: "https://images.unsplash.com/photo-1511974035430-5de47d3b95da", // this is the url of the image that will used as 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*/

🌱 Cómo comenzar este proyecto

Este proyecto viene con los archivos necesarios para comenzar a trabajar de inmediato.

Recomendamos abrir este mismo repositorio usando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir:

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

👉 Por favor sigue estos pasos en cómo comenzar un proyecto de codificación.

💡 Importante: Recuerda guardar y cargar tu código en GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y cargando el código en su nuevo repositorio usando los comandos add, commit y push desde el terminal git.

📝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

NombreTipoValor por DefectoDescripción
backgroundstringnullLa url de la imagen que se utilizará como fondo para la portada del perfil
includeCoverbooleantrueDetermina si debe mostrarse la portada o no.
avatarURLstringnullLa url para el avatar del perfil
socialMediaPositionstring"right"puede ser left o right y determina dónde colocar la barra de redes sociales
twitterstringnullEl nombre de usuario de Twitter que se mostrará en el perfil.
githubstringnullEl nombre de usuario de Github que se mostrará en el perfil.
linkedinstringnullEl nombre de usuario de Linkedin que se mostrará en el perfil.
instagramstringnullEl nombre de usuario de Instagram para ser mostrado en el perfil.
namestringnullEl nombre del usuario que se mostrará en el perfil.
lastnamestringnullEl nombre del usuario que se mostrará en el perfil.
rolestringnullEl nombre del título del trabajo que se mostrará en el perfil.
countrystringnullEl país de residencia del usuario que se mostrará en el perfil.
citystringnullLa 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.

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 Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

4 hrs