Даниил Попов

https://lodash.com/docs/4.17.15#debounce
или
https://lodash.com/docs/4.17.15#throttle
В зависимости от того какое поведение вам требуется.

Контекст передается. Только вам нужен аргумент.

Вот код, который, надеюсь, поможет понять разницу

function person(name) {
  console.log("context", this.name);
  console.log("argument", name);
}

var context = {
  name = "Коля"
}
var name: "Анатолий";

person.call(context, name);

Немного дополню предыдущий ответ примером:

JSFiddle
Думаю, и svg фильтрами можно решить. В зависимости от необходимого вида на выходе можно попробовать разное. В моем примере будут проблемы с прозрачностями, но это тоже решаемо

Да на здоровье
https://ru.bem.info/methodology/faq/#media-queries

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

[
  "*".repeat(18),
  ...textArray
    .map(words => words.join(" "))
    .map(line => {
      const pad = (line.length > 16)?''.padStart:''.padEnd;
      const lines = [];
      let restLine = line;
      while(restLine.length > 16) {
        const spaceIndex = restLine.lastIndexOf(" ", 16);
        lines.push(pad.call(restLine.slice(0, spaceIndex), 16));
        restLine = restLine.slice(spaceIndex + 1);
      }
      lines.push(pad.call(restLine, 16));
      return lines;
    })
    .flat()
    .map(line => "*" + line + "*"),
  "*".repeat(18)
]

Но если вы хотите, чтобы вас поняли и, самое главное, вы поняли, что написали, то лучше делать так:

function formatTextArray(textArray, maxLineLength = 16) {
  const formatedTextArray = [];
  
  textArray
    .forEach(words => {
      const line = words.join(" ");
      
      if(line.length > maxLineLength) {
        splitLine(line)
          .forEach(item => formatedTextArray.push(align(item, false)) );
      } else {
        formatedTextArray.push(align(line));
      }
    }, []);
    
  return addBorders(formatedTextArray);
  
  function align(line = "", isLeft = true) {
    let newLine;
    
    if(isLeft) {
      newLine = line.padEnd(maxLineLength);
    } else {
      newLine = line.padStart(maxLineLength);
    }
    
    return newLine;
  }
  
  function splitLine(line) {
    if(line.length > maxLineLength) {
      const spaceIndex = line.lastIndexOf(" ", maxLineLength);
      const lineStartPart = line.slice(0, spaceIndex);
      const restLine = line.slice(spaceIndex + 1);
      return ([lineStartPart]).concat(splitLine(restLine));
    } else {
      return [line]
    }
  }
  
  function addBorders(formatedTextArray, symbol = "*") {
    const borderedTextArray = [
      symbol.repeat(maxLineLength),
      ...formatedTextArray,
      symbol.repeat(maxLineLength)
    ];

    return borderedTextArray.map(addHorizontalBorders);
    
    function addHorizontalBorders(line) {
      return symbol + line + symbol;
    }
  }
}

А вот интерактивный пример

Ну и задачка со звездочкой, найдите где этот код будет работать не корректно

z-index добавьте хедеру

Тут проблема в том, что начинающие спецы, в силу малого опыта, верстают медленно и не очень хорошо. Проверка и доведение такого макета до ума занимает времени гораздо больше, чем сверстать его самостоятельно. Такой благотворительностью, а тем более за копеечку мало кто готов заниматься. Из личного опыта говорю.
Зарегайтесь на фриланс бирже и ищите заказы по уровню там (конкуренция с вашим скиллом дикая и будет тяжело) или, как уже подсказали, ищите где постажироваться

Вам нужен не множитель, а тайминг функция. Множитель дает линейное изменение скорости - быстрее или медленее на всем промежутке. С помощью тайминг функций можно задавать нелинейное поведение (плавное ускорение, замедление и пр.)

Пример функций:
https://gist.github.com/gre/1650294

Если на пальцах: то у вас есть какой-то таймер t и функция которая определяет сдвиг картинок f(t). Сейчас эта функция выглядит как f(t) = a*t, где a - это какой-то постоянный коэффициент. Изменяя функцию f(t) вы и получите нужный результат, например f(t) = t*t создаст эффект ускорения, f(t) = 1/t - плавное замедление

Вместо .click вам нужно использовать .onclick, как минимум

document.getElementById("reset").onclick = function ...

.click() используется для программной эмуляции клика по элементу. Т.е. click вызовет срабатывание onclick

Для более продвинутого упрвления слушателями событий, нужно использовать addEventListener
Основная разница, что .onclick позволяет назначить одиного слушателя, а addEventListener несколько на один тип события

Вы в своем коде промис не резолвите. Вот он и ждет. У промисов нет автозавершения.

Но если вам нужен эффект после css анимаций используйте события transitionend или animationend