futuster/frontend-test

Пишем самодокументирующийся код, по возможности, при невозможности документируем

Рекомендуем присылать ответы на задания по мере готовности (Теория отдельно, практика отдельно) в удобном для вас формате.

Мы ждем качество и внимание к деталям. Не торопитесь, отдавайте результат только когда уверены что лучше уже не будет.

Не забывайте про вкус и чувство стиля

Теория

Простые задачи на понимание работы JS, выполнение каждого задания займет 1-10 минут.

1. Предложите вариант базового класса для успешной работы следующего кода.

Подсказка: значения a и b переданные в метод test должны быть умножены на -1 Хорошо если сможете привести аргументы почему этот код плохой.

// Реализуйте класс
class BaseClass {
    // ... ваш код
}

/* Код ниже не трогаем */
class MyClass extends BaseClass {
    test(a, b) {
        this.a = a;
        this.b = b;

        return 100 - this.a + this.b;
    }
}

const m = new MyClass();

console.log(m.test(50, 40) === 110); // true
console.log(m.test(10, 90) === 20);  // true

2. Дан массив целых чисел input. Необходимо написать функцию, которая преобразует массив input так, чтобы он удовлетворял следующим условиям:

• вначале числа кратные двум, от наибольшего к наименьшему;
• затем оставшиеся числа от наименьшего к наибольшему.

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

const input = [-2, 2, 4, 6, 8, 10, 3, 5, 7, 9, -1, -11];

console.log(func(input)); // [10, 8, 6, 4, 2, -2, -11, -1, 3, 5, 7, 9]

3. Имеется строка str с произвольным текстом. Необходимо без использования циклов (for, while, do) и объявления дополнительных переменных, посчитать количество символов в строке, у которых ASCII код кратный 3.

Напишите по возможности наиболее компактный код.

const str = 'RS. Frontend. Test. 1234567890.';

const func = (str) => {
    // ... ваш код
};

console.log(func(str)); // 7

4. Что можно улучшить? Максимально упростите код (сократите или удалите ненужные операции), сохранив его логику. Важна логика, а не визуальное отображение звезд.

function drawRating(vote) {
    if (vote >= 0 && vote <= 20) {
        return '★☆☆☆☆';
    }
    else if (vote > 20 && vote <= 40) {
        return '★★☆☆☆';
    }
    else if (vote > 40 && vote <= 60) {
        return '★★★☆☆';
    }
    else if (vote > 60 && vote <= 80) {
        return '★★★★☆';
    }
    else if (vote > 80 && vote <= 100) {
        return '★★★★★';
    }
}

Практическая часть #1

Доработайте верстку так, что бы при изменении высоты экрана высота модального окна так же изменялась, при этом контент внутри не ломался, а изображение уменьшалось по высоте, НЕ МЕНЯЯ ПРОПОРЦИЙ. Само начальное изображение может быть любых пропорций (в пример вставлено рандомно выбранное изображение с unsplash, при проверке изображение может быть заменено на другое). Нельзя использовать overflow: scroll для решения задачи. Окно или контент окна не должны вылазить за пределы синих полос. Можно менять HTML, CSS, JS на свое усмотрение, не меняя при этом дизайн окна.

Исходное состояние:

https://codepen.io/kachurun/pen/YLppwM

(!) Задача может быть решена только изменением стилей (+немного JS фиксов). Реализация решения с минимальным использованием JS будет огромным плюсом.

Проблема:

Ожадаемый результат должен выглядеть так:

• Высота экрана больше высоты модалки:

• Высота экрана меньше высоты модалки:

Практическая часть #2

Уточните необходимость выполнения данного задания.

Макет (содержит краткие описания к задаче):

https://www.figma.com/file/MTA0GcMUsJeXqhjgJh1yEXP7/Section-gallery

Обязательные условия:

• Используем Vue (https://ru.vuejs.org/.
• Использование UnsplashJS (https://github.com/unsplash/unsplash-js) не запрещается
• Избегаем использования любых прочих библиотек, если используем - аргументируем свой выбор

Задание оценивается по нескольким критериям:

• Верстка и стили.
• Код

Результат ожидается в виде ссылки на публичный репозиторий с инструкцией по запуску.