-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
91 lines (85 loc) · 3.68 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import "../style/index.css";
/**
* EDIT ONLY INSIDE THIS RENDER FUNCTION
* This function is called every time the user changes types or changes any input
*
{
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: null,
linkedin: null,
instagram: null,
name: null,
lastname: null,
role: null,
country: null,
city: null
}
*/
function render(variables = {}) {
console.log("These are the current variables: ", variables); //print on the console
// here we ask the logical questions to make decisions on how to build the html
// if includeCover==false then we reset the cover code without the <img> tag to make the cover transparent.
let cover = `<div class="cover"><img src="${variables.background}" /></div>`;
if (variables.includeCover == false) cover = "<div class='cover'></div>";
// reset the website body with the new html output
document.querySelector("#widget_content").innerHTML = `<div class="widget">
${cover}
<img src="${variables.avatarURL}" class="photo" />
<h1>${variables.name} ${variables.lastname}</h1>
<h2>${variables.role}</h2>
<h3>${variables.city} , ${variables.country}</h3>
<ul class="${variables.socialMediaPosition}">
<li><a href="https://twitter.com/4geeksacademy"><i class="fab fa-twitter"></i>${variables.twitter}</a></li>
<li><a href="https://github.com/4geeksacademy"><i class="fab fa-github"></i>${variables.github}</a></li>
<li><a href="https://linkedin.com/4geeksacademy"><i class="fab fa-linkedin"></i>${variables.linkedin}</a></li>
<li><a href="https://instagram.com/4geeksacademy"><i class="fab fa-instagram"></i>${variables.instagram}</a></li>
</ul>
</div>
`;
}
/**
* Don't change any of the lines below, here is where we do the logic for the dropdowns
*/
window.onload = function() {
window.variables = {
// if includeCover is true the algorithm should
includeCover: true,
// this is the url of the image that will used as background for the profile cover
background: "https://images.unsplash.com/photo-1511974035430-5de47d3b95da",
// this is the url for the profile avatar
avatarURL: "https://randomuser.me/api/portraits/women/42.jpg",
// social media bar position (left or right)
socialMediaPosition: "position-left",
// social media usernames
twitter: null,
github: "alesanchezr",
linkedin: null,
instagram: null,
name: null,
lastname: null,
role: null,
country: null,
city: null
};
render(window.variables); //render the card for the first time
document.querySelectorAll(".picker").forEach(function(elm) {
elm.addEventListener("change", function(e) {
// <- add a listener to every input
const attribute = e.target.getAttribute("for"); // when any input changes, collect the value
let values = {};
values[attribute] =
this.value == "" || this.value == "null"
? null
: this.value == "true"
? true
: this.value == "false"
? false
: this.value;
render(Object.assign(window.variables, values)); // render again the card with new valus
});
});
};