31 lines
775 B
JavaScript
31 lines
775 B
JavaScript
|
(() => {
|
||
|
|
class Skill {
|
||
|
|
label;
|
||
|
|
color;
|
||
|
|
constructor(label, color) {
|
||
|
|
this.label = label
|
||
|
|
this.color = color
|
||
|
|
}
|
||
|
|
|
||
|
|
_build() {
|
||
|
|
return `${this.label}`
|
||
|
|
}
|
||
|
|
show() {
|
||
|
|
const container = document.createElement('div')
|
||
|
|
container.classList = `bg-${this.color} text-white rounded-xl px-2 py-1 text-xs`
|
||
|
|
container.innerHTML = this._build()
|
||
|
|
return container
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = [
|
||
|
|
{ label: "Typescript", color: "blue-500" },
|
||
|
|
{ label: "Python", color: "green-800" },
|
||
|
|
{ label: "Rust", color: "yellow-800" },
|
||
|
|
{ label: "Javascript", color: "yellow-500" },
|
||
|
|
]
|
||
|
|
|
||
|
|
const container = document.getElementById('skills')
|
||
|
|
data.forEach(skill => container.appendChild(new Skill(skill.label, skill.color).show()))
|
||
|
|
})()
|