Оцените тестовое задание (junior)?

Question

[Иван]

Сделал тестовое задание для стажировки, перед отправкой хочу понять нормально ли выполнил или нет. Прошу оценки как вёрстки, так и скрипта. Там же лежит макет того, как это должно выглядеть. Под пиксельпёрфект не подгонял.
Вот мой проект на гитхаб: клац

Comments

[Robur]

Так отправьте, вам и оценят

[Иван]

Рустам Байназаров, конкретизируй)

[edward_freedom]

BenderIsGreat34, for (let i = 0; i <= listValues.length-1; i++) {
зачем ставить <= и писать -1? Или оно тут было необходимо? Можно же сделать так
for (let i = 0; i < listValues.length; i++) {

[pavelmosin]

На второй вкладке синяя плашка не доходит до конца при прокрутке

[Иван]

edward_freedom, да, вы правы. я усложнил

Answer 1

[Антон Швец]

const keys = ["name", "my-city-id", "family-status",
    "Number", "e-mail"
];
for (let id of keys) {
    // выставил
    let input = document.getElementById(id);
    input.value = localStorage.getItem(id);
    console.log("сохранено");
    // закинул
    let fun = function(id, input) {
        input.addEventListener("change", function() {
            localStorage.setItem(id, input.value);
        });
    };
    fun(id, input);
}

[
  'e-mail',
  'family-status',
  'my-city-id',
  'name',
  'Number',
].forEach((id) => {
  /** @type {HTMLInputElement} */
  const inputElement = document.getElementById(id);

  inputElement.value = localStorage.getItem(id);
  inputElement.addEventListener(
    'change',
    () => localStorage.setItem(id, inputElement.value),
  );
});

Разница понятна?
Я бы еще это оформил в виде функции с названием, объясняющим суть происходящего.

Comments

[Иван]

Юрий, ну это же метод forEach, иначе бы пришлось писать

for each(function(id) {
....
}

Answer 2

[xonar]

Я бы советовал webp использовать, добавит оптимизации вам и советовал бы не подключать из вне скрипт, лучше себе их скачать.

<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js "></script>

Comments

[Иван]

На счёт cdn - так здесь нужно. Можете объяснить почему так плох галп в данном случае? вы тут не первый просто, кто советует избавиться от него. Разве он плохо собрал и минимизировал скрипт? веб сервер запускает, картинки сжимает, спрайты делает (не в данном случае), sass собирает, скрипт тоже нормально собирает, правда приходится делать лишнее движение в виде прописывания пути для каждого скрипта - не проблема, совсем, привык. Я понимаю, что галп переходит в разряд "динозавров", но просто не понимаю, для чего нужен вебпак на данный момент, когда все потребности закрыты галпом.

[xonar]

BenderIsGreat34, Вы наверное ошиблись, но я про галп ничего вам не говорил :-/

[xonar]

Я имел ввиду конвертировать галпом изображения в формат webp. Ваши изображения в качестве не потеряют, но зато будут весит намного меньше. Например если изображения на сайте на 2мб, они будут все вместе весить 200-300 кб.
https://www.npmjs.com/package/gulp-webp

[Иван]

xonar, прошу прощения, я подумал webp - webpack