Создание динамической доски лидеров с изображениями профиля - PullRequest
Новая
       17

Создание динамической доски лидеров с изображениями профиля

0 голосов
/ 02 марта 2019

Я застрял, чтобы найти способ создать таблицу лидеров , подобную приведенной ниже, которая использует переменные для хранения баллов пользователей в Javascript для ответа наизменения в этих точках с изменением пользователей Ранги ...

Вот что я пытаюсь достичь:

Here is the picture

Я простохочу вручную заполнить Данные баллов пользователя , используя только переменные Javascript ... Допустим, все данные получены из массива javascript, который содержит эти данные.

Что-то вроде: 

   user_1 = Nilesh S;
   user_2 = Shristi_S; 

   user_1 points = 1710;
   user_2 points = 1710;

   etc...

Очевидно, что если я поменяю Nilesh S (user_1) на 1000, тогда Nilesh S получит 10-е место ...

На данный момент я достиг лишь создания профиля кругакартинки:)

Вот коды:

Javascript: 

var img = document.createElement("IMG");
  img.setAttribute("src", "img_pulpit.jpg");
  img.setAttribute("width", "300");
  img.setAttribute("height", "300");
  img.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(img);

HTML: 

<div id="IMG">
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">
  [1]: https://i.stack.imgur.com/zXm4N.png

CSS: 

img {
      background: #2f293d;

   border: 1px solid #2f293d;
   padding: 6px;
   border-radius: 50%;
   box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);

}

Любое решение будет с благодарностью.

1 Ответ

0 голосов
/ 03 марта 2019

Вот быстрый и грязный способ создания фиктивных данных в массиве объектов, их сортировки и добавления на страницу. 

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profiles.push(profile4);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) { 
return b.points-a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

profiles.forEach(function(entry) {
	let profile = document.createElement('div');
    profile.className = "profile";
    profile.textContent = entry.name + " -- " + entry.points;
	profilesDiv.appendChild(profile);
});
.profile {
  border: 2px solid #222222;
  padding: 5px;
  margin: 5px;
  width: 50%;
}
<div class="profiles">

</div>
...