Задания для Frontend разработчика Пикабу 2018

Оригинал: https://pikabu.ru/page/interview/frontend/

Вам необходимо знать JS, HTML5, CSS и обязательно добрую старую библиотеку jQuery ;) Хотя бы немножко знать о LESS, SASS, ECMAScript 6, Node.js, Gulp, Webpack, Underscore, JSDoc, VCS. Желать пользователям добра и лучшего UX.

1. Дан фрагмент HTML. Используя только нативный JavaScript исправьте текст, следующий после тега <span> так, чтобы элемент <span> остался незатронутым

<div class="example">Дважды <span>два</span> - пять</div>

Решение:

var elem = document.getElementsByClassName('example')[0]
elem.lastChild.nodeValue = ' - четыре'

2. Предположим в наследство Вам достался следующий код. Максимально упростите его с использованием библиотеки jQuery

document.getElementById('x1')
            .getElementsByTagName('div')[4]
            .closest('#x1 > div').parentNode
            .childNodes[2].firstChild
            .querySelect('*[id="f"]')
            .textContent = 'Hello!';

Решение:

//childNodes[2] и children(':eq(2)') будут работать одинаково если в html разметке не было лишних символов между тегами

$('#x1 > div').eq(4)
			  .parent('div#x1').children(':eq(2)')
			  .children(':first-child')
			  .find('#f').text('Hello!');

3. Используя регулярные выражения (RegExp) проверьте на валидность введенный пользователем URL (пусть это будет переменная url) по следующим критериям:


Пример URL валидный по заданным критериям: https://c52.pikabu.lh:8080

Решение:

function validate(url) {
	let r = /^(ftp|https?):\/\/((c[1-9][0-9]?|m|m-test)\.)?pikabu\.[a-zA-Z\-]{2,64}(:8080)?$/;
	return r.test(url);
}

// test!

// good cases:
console.log('https://c52.pikabu.lh:8080 ' + validate('https://c52.pikabu.lh:8080'));
console.log('http://c52.pikabu.lh:8080 ' + validate('http://c52.pikabu.lh:8080'));
console.log('ftp://c52.pikabu.lh:8080 ' + validate('ftp://c52.pikabu.lh:8080'));
console.log('http://m.pikabu.lh:8080 ' + validate('http://m.pikabu.lh:8080'));
console.log('http://m-test.pikabu.lh:8080 ' + validate('http://m-test.pikabu.lh:8080'));
console.log('http://c82.pikabu.lh:8080 ' + validate('http://c82.pikabu.lh:8080'));
console.log('http://c82.pikabu.lh:8080 ' + validate('http://c82.pikabu.lh:8080'));
console.log('http://c82.pikabu.lh ' + validate('http://c82.pikabu.lh'));
console.log('http://c82.pikabu.ru ' + validate('http://c82.pikabu.ru'));
console.log('http://pikabu.ru ' + validate('http://pikabu.ru'));

// bad cases:
console.log('sftp://c52.pikabu.lh:8080 ' + validate('sftp://c52.pikabu.lh:8080'));
console.log('ftp://c52.pikabu.lh:8081 ' + validate('ftp://c52.pikabu.lh:8081'));
console.log('ftp://k.pikabu.lh:8080 ' + validate('ftp://k.pikabu.lh:8080'));
console.log('ftp://k-test.pikabu.lh:8080 ' + validate('ftp://k-test.pikabu.lh:8080'));
console.log('ftp://c102.pikabu.lh:8080 ' + validate('ftp://c102.pikabu.lh:8080'));
console.log('http://c10.pikobu.lh:8080 ' + validate('http://c10.pikobu.lh:8080'));
console.log('http://c10..org:8080 ' + validate('http://c10..org:8080'));
console.log('http://pikabu.org:8080/page ' + validate('http://pikabu.org:8080/page'));
console.log('http://pikabu.org:8080?param=true ' + validate('http://pikabu.org:8080?param=true'));
console.log('http://pikabu.ru#section_one ' + validate('http://pikabu.ru#section_one'));

4. Предложите стили (LESS или SASS) для списка ниже, чтобы привести его к виду, как показано на скриншоте:

<div class="example">
    <ul>
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li data-value="1">sub-item</li>
                <li data-value="2">sub-item</li>
                <li data-value="3">sub-item</li>
            </ul>
        </li>
        <li>Item 3
            <ul>
                <li data-value="4">sub-item</li>
            </ul>
        </li>
    </ul>
</div>

Решение:

.example ul {
  list-style: disk;

  li:first-child {
    font-weight: bold;
  }

  li:only-child {
    font-weight: normal;
	}

  ul {
    list-style: none;
    margin-left: -0.8em;

    li {
      position:relative;
      padding-left: 0.7em;
      margin-bottom: 0.1em;

      &:before {
      content: '';
      height: .3em;
      width: .3em;
      background: #000;
      position: absolute;
      transform: rotate(45deg);
      top: .45em;
      left: .15em;
      }

      &:after {
      content: ', 'attr(data-value);
      }

    }

  }

}

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

Решение:

str.split('')
    .map(function(x) {
        return x.charCodeAt()
    })
    .filter(function(i) {
        return i % 3 == 0;
    })
    .length

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

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

Решение:

function func(arr) {
    let even = arr.filter(function(a) {
        if (a % 2 == 0) { return a; }
    });
    let odd = arr.filter(function(a) {
        if (a % 2 != 0) { return a; }
    });

    return even.sort(function(a, b) { return b - a; })
        .concat(odd.sort(function(a, b) { return a - b; }));
}

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

class BaseClass {
    // ... ваш код
}
class MyClass extends BaseClass {
    result(a, b) {
        this.a = a;
        this.b = b;
        return 100 - this.a + this.b;
    }
}
let m = new MyClass();
m.result(10, 20) === 90;
m.result(20, 10) === 110;

Решение:

set a(val) {
  this.a1 = -val;
}
set b(val) {
  this.b1 = -val;
}
get a() {
  return this.a1;
}
get b() {
  return this.b1;
}

8. Предложите, на ваш взгляд, наилучший вариант селектора к элементу ниже, для отображения текста чёрным цветом, учитывая, что ваш селектор расположен в самом начале следующих стилей

<section class="section" id="section">Зелёный текст</section>
// <-- Ваш селектор

// ....

section.section {color: red}
.section {color: green}
section#section {color: yellow}
section#section.section {color: pink}
section.section {color: red}

Решение:

body section#section.section {color:black;}

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

const f = (x) => {
	let data,
		x2 = new Number(`+${x}`),
		x3 = x / {toNumber() {return 5}};
	data = {
		isX: x3 === x3,
		d: Boolean(34),
		n: x === x2,
	};
	if (!!data.isX ? data.d : data.n) {
		return Math.ceil(x) >> x2;
	} else {
		return (Math.trunc(x) << 0) ** 0b10;
	}
};

Решение:

const f = (x) => {
	return (Math.trunc(x) << 0) ** 2;
};