Ю нид мо голд! 27/27

Курсы §34. Кекстаграм: Эпилог. JavaScript
1

Дайте золотой информации. Те крохи, что даны… черт знает как ими воспользоваться. Тупо заучил синтаксис. Вроде и понимаю, что делает функция, но воспользоваться этим - без понятия.
Дальше проставления цифирок не прошел

var element = document.querySelectorAll('.chips li');

for (var i = 0; i < element.length; i++) {
  element[i].innerHTML = element[i].dataset.number;
}

function setNumber(element) {
        element.classList.add('color-' + element.dataset.number);
}

function reColor(element) {
    var baseColor = getComputedStyle(element).borderTopColor;
    var color = baseColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    element.style.borderTopColor = colorShift(color, 40);
    element.style.borderRightColor = colorShift(color, 60);
    element.style.borderBottomColor = colorShift(color, 80);
    element.style.borderLeftColor = colorShift(color, 20);
}

function colorShift(color, shift) {
    var rgb = '#';
    for (var i = 1; i <= 3; i++) { 
        var part = parseInt(color[i]) - shift;
        part = Math.round(Math.min(Math.max(0, part), 255));
        part = part.toString(16);
        rgb += ('00' + part).substr(part.length);
    }
    return rgb;
}
2

А все гуд. Справился

var element = document.querySelectorAll('.chips li');

function setNumber(element) {
        element.classList.add('color-' + element.dataset.number);
}

function reColor(element) {
    var baseColor = getComputedStyle(element).borderTopColor;
    var color = baseColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    element.style.borderTopColor = colorShift(color, 40);
    element.style.borderRightColor = colorShift(color, 60);
    element.style.borderBottomColor = colorShift(color, 80);
    element.style.borderLeftColor = colorShift(color, 20);
}

function colorShift(color, shift) {
    var rgb = '#';
    for (var i = 1; i <= 3; i++) { 
        var part = parseInt(color[i]) - shift;
        part = Math.round(Math.min(Math.max(0, part), 255));
        part = part.toString(16);
        rgb += ('00' + part).substr(part.length);
    }
    return rgb;
}

for (var i = 0; i < element.length; i++) {
  element[i].innerHTML = element[i].dataset.number;}
  
for (var i = 0; i < element.length; i++) {
    setNumber(element[i]);
}

for (var i = 0; i < element.length; i++) {
    reColor(element[i]);
}
3

Повторять не надо, все вписывается вполне в одну функцию друг за другом

3 лайка
4

Спасибо. На радостях перестарался)

5

Алексей, Вы давно версткой занялись?

6

Да нет, не больше чем другие жители форума, такой же студент еще.

7

Вот самое простое решение
var fishki = document.querySelectorAll(’.chips li’);
for (var i=0; i<fishki.length; i++){
fishki[i].innerHTML = fishki[i].dataset.number;
setNumber(fishki[i]);
reColor(fishki[i]);

}