4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
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
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
cd exercise-conditional-profile-card
npm install
Note: if you're using c9 make sure you are running in the latest version of node:
Build for the first time: npm run start
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
.
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:
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*/
These instructions come with a video for better understanding: https://youtu.be/gaVm8eyCqlM
variables
variable that it receives.Name | Type | Default Value | Description |
---|---|---|---|
includeCover | boolean | true | it determines if the cover shoud be visible with an image or not |
background | string | null | the url of the image that will used as background for the profile cover |
avatarURL | string | null | the url for the profile avatar |
socialMediaPosition | string | "right" | it can be left or right and it determines where to place the social media bar |
string | null | the twitter username to be displayed on the profile | |
github | string | null | the github username to be displayed on the profile |
string | null | the linkedin username to be displayed on the profile | |
string | null | the instagram username to be displayed on the profile | |
name | string | null | The name of the user to be displayed on the profile |
lastname | string | null | The name of the user to be displayed on the profile |
role | string | null | The name of the user to be displayed on the profile |
country | string | null | The name of the user to be displayed on the profile |
city | string | null | the city of the user to be displayed on the profile |
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>
4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
Not available
Live demo
Not available
Average duration
4 hrs
Technologies