Miron4ek_228

const presidents = [
    { first: 'George', last: 'Washington', born: 1732, died: 1799 },
    { first: 'John', last: 'Adams', born: 1735, died: 1826 },
    { first: 'Ronald', last: 'Reagan', born: 1911, died: 2004 },
];

let presidentsMap = presidents.map(item => ({first: item.first, last: item.last}));

console.log(presidentsMap)

У Вас неправильно составлено регулярное выражение. Можно вот так:

const arr = ['Jimmy', 'Rayn', 'Jack', 'Vladimir', 'joen'];
let res = arr.filter(el => /J/i.test(el[0]));
console.log(res);

Советую посмотреть

const candidate = ['Jimmy', 'Rayn', 'Jack', 'Vladimir', 'joen', ];
const friend = candidate.filter(item => item[0].match(/J/i))
console.log(friend)

<div class="list">
            <ul class="list__items current-list">
                <li class="item">Egg - food</li>
                <li class="item">Dog - animal</li>
                <li class="item">Cat - animal</li>
                <li class="item">Bread - food</li>
            </ul>
            <ul class="list__items new-list">
              <!-- animal - список -->
            </ul>
        </div>

document.querySelector('.new-list').innerHTML = [...document.querySelectorAll('.current-list li')].map(el => {
   if(el.innerText.indexOf('animal') > -1) return `<li class="item">${el.innerText}</li>`;
 }).join('');

Здесь используются медиа-запросы, просто реализация скрыта за миксином.
Вы всегда можете посмотреть в результирующем CSS, во что этот миксин разворачивается.

Сам миксин почти наверняка выглядит как-то так и разворачивается примерно вот в такое:

@media (min-width: 320px) {
  gap: calc(20px + 40 * (100vw - 320px) / 850);
}

@media (min-width: 1170px) {
  gap: 60px;
}

const newColor = "red";
paragraph.innerHTML = paragraph.innerHTML.replace(/(.*\/.*?_)(.*)(\.[a-zA-Z]+)/gmi, `$1${newColor}$3`);

e.target.dataset.name.replace(/^name-category_?/i, '')

Есть плагин 2D Auto Layout https://www.figma.com/community/plugin/10544447779...

В фигме автолейаут работает в одном измерении. Нужно внутри фрейма создать еще один фрейм "row" - в котором лежат теги и добавляются по-горизонтали. В это время основной фрейм имеет направление по-вертикали

const array = value.split("*");
Вы получите массив с двумя строчными значениями, потом делайте с ними что угодно.
например

array.map((e) => <span>{e}</span> || <span>{array[0]}</span>

const blockSelector = '.block';
const buttonSelector = `${blockSelector} .block__close`;

Делегирование, назначаем обработчик один раз:

document.addEventListener('click', e => {
  const block = e.target.closest(buttonSelector)?.closest(blockSelector);
  block?.parentNode.removeChild(block);
});

Назначаем обработчик каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.closest(blockSelector).remove());

Если отступы между палками не считать , то можно так

let conts = [line1,line2,line3,line4];
let w = 100/conts.length;
for(let i = 0; i < conts.length;i++)  
  conts[i].style.width = progressResult- w*i < 0?0:Math.min(w,progressResult- w*i)/w * 100 + "%";

Есть вот такой вариант, немного переработал Html для удобства: Код тут

Вариант с разбивкой через css не подойдет ? накидал немного
https://codepen.io/shutik-the-encoder/pen/xxPYwgM
или именно заполнение каждого элемента отдельно нужно ?

Для вашей задумки может подойти такой вариант. Сделайте обёртку флексом, а блок внутри, в котором отображаются спаны - обычным блоком

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 700px;
  height: 150px;
}
.chat {
  display: block;
  overflow-y: scroll;
}

Баг ли это или так и было задумано, но с justify-content: flex-end и скроллом во всех браузерах есть проблемы и в одном контейнере они вместе не работают.
Самое простое решение (на мой взгляд) - это перенести скролл в контейнер выше.

вот пример: https://codepen.io/slide13/pen/VwrrOeE