dare892.github.io/professional_skills.js at master · dare892/dare892.github.io · GitHub

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
$(document).ready(function(){
  professional_skills = [
    {'title': 'Communication',
     'level': 100,
    },
    {'title': 'Product management',
     'level': 90,
    },
    {'title': 'Project management',
     'level': 90,
    },
    {'title': 'UX',
     'level': 80,
    }
  ]


  for(var x=0;x<professional_skills.length;x++){
    content = "<div class='skill-item'>" +
                "<div class='skill-item-title'>" + professional_skills[x]['title'] + "</div>" +
                "<div class='skill-item-level'>" + professional_skills[x]['level'] + "%</div>" +
                "<div class='skill-item-bar-wrapper'>" +
                  "<div class='skill-item-bar professional' data-level=" + professional_skills[x]['level'] + "></div>" +
                "</div>" +
              "</div>"
    $('#professional-skills-list').append(content)
  }

  $('.skill-item-bar').each(function(){
    level = $(this).attr('data-level')
    $(this).css('width', level + '%')
  })
})