About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

← Back to Projects

Conditional Profile Card Generator

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

4 hrs

Technologies

Note: Make sure that you have node.js installed in your computer by typing in your terminal:

1$ node -v

🌱 How to start this project

  1. This project comes with the necessary files to start working, but you have two options to start:

a) Click on this link to open it with Gitpod (recommended): https://gitpod.io#https://github.com/breatheco-de/exercise-conditional-profile-card.git

b) If you don't have Gitpod, you can clone this repository on your local computer:

1$ git clone https://github.com/breatheco-de/exercise-conditional-profile-card.git
  1. Get into the project folder:

cd exercise-conditional-profile-card

  1. Install NPM packages: npm install

Note: if you're using c9 make sure you are running in the latest version of node:

  1. Build for the first time: npm run start

  2. Start updating the render function inside the app.js file.

💡 Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>), and upload the code to your new repository using add, commit and push.

Some context

As a web developer, you will be creatings lots and lots of dynamic HTML using Javascript based algorithms.

In this exercise you have to create the HTML code needed to render a profile card based on a series of variables that could change in value during runtime. Here is an example of the profile card:

Conditional Profile Card

Inside the src/app.js file there is a render function that receives variables and contains the logic to create most of the website HTML code.

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

You can see the variables that are being generated by typing on the developer console:

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://randomuser.me/api/portraits/women/42.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*/

📝Instructions

These instructions come with a video for better understanding: https://youtu.be/gaVm8eyCqlM

  1. Read and understand the render function and the value of the variables variable that it receives.
  2. Change the content of the render function to make it render the variables on the card.

Initial Variable Values

NameTypeDefault ValueDescription
includeCoverbooleantrueit determines if the cover shoud be visible with an image or not
backgroundstringnullthe url of the image that will used as background for the profile cover
avatarURLstringnullthe url for the profile avatar
socialMediaPositionstring"right"it can be left or right and it determines where to place the social media bar
twitterstringnullthe twitter username to be displayed on the profile
githubstringnullthe github username to be displayed on the profile
linkedinstringnullthe linkedin username to be displayed on the profile
instagramstringnullthe instagram username to be displayed on the profile
namestringnullThe name of the user to be displayed on the profile
lastnamestringnullThe name of the user to be displayed on the profile
rolestringnullThe name of the user to be displayed on the profile
countrystringnullThe name of the user to be displayed on the profile
citystringnullthe city of the user to be displayed on the profile

Hard-Coded HTML

This is an example of a possible HTML output, you will have to replace the name, lastname, etc. With the values that these variables may have.

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>

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

4 hrs