diff --git a/src/app.js b/src/app.js
index cc43cc2..75f15f6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -26,31 +26,61 @@ const initPlayers = (players) => {
     let detailedPlayers = [];
     // Create players using for loop
     // Type your code here
+    for (var i = 0; i < players.length; i++) {
+        detailedPlayers[i] = {
+            name: players[i],
+            strength: getRandomStrength(),
+            image: "images/super-" + (i + 1) + ".png",
+            type: herovillian(i),
+        };
+    }
 
     return detailedPlayers;
 }
 
+function herovillian(n) {
+    if (n % 2 == 0) {
+        return "hero";
+    } else {
+        return "villain";
+    }
+}
+
 // getting random strength
 const getRandomStrength = () => {
     // Return a random integer (0,100]
     // Note: You can use Math.random() and Math.ceil()
+    var x = Math.ceil(Math.random() * 100);
+    return x;
 }
 
 const buildPlayers = (players, type) => {
     let fragment = '';
 
     // Loop through players and accumulate HTML template
+
     // depending of type of player(hero|villain)
     // Type your code here
 
+    for (var i = 0; i < players.length; i++) {
+        player = `<div class="player">
+                <img src="${players[i].image}" alt="">
+                <div class="name">${players[i].name}</div>
+                <div class="strength">${players[i].strength}</div>
+                </div>`;
+        if (players[i].type == type) {
+            fragment += player;
+        }
+        // return fragment;
+    }
     return fragment;
 }
+
 // Display players in HTML
 const viewPlayers = (players) => {
 
     document.getElementById('heroes').innerHTML = buildPlayers(players, 'hero');
     document.getElementById('villains').innerHTML = buildPlayers(players, 'villain');
-
 }
 
 window.onload = () => {