Игорь

Вполне достойно.
С методологией написания стилей хорошо бы поработать: class="tfs-box aa", .product product2 --- плохая практика

Разные классы не нужны, достаточно одного общего:

.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}

При клике смотрим индекс нажатой кнопки, обходим элементы с контентом, выставляем класс в зависимости от равенства текущего индекса индексу кнопки:

const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));


// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const buttons = document.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, button);
    toggleContent(document.querySelectorAll(contentSelector), index);
  }
});

// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
  toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.

Это такая штука, которая выдает (или принимает, или и то и другое) данные кусочками (chunk). Чтобы объяснить, зачем они нужны, нужно немного отвлечься и вспомнить, как работает nodejs.

Преимущество nodejs состоит в том, что пока БД или ФС реагирует на команду, мы можем запустить другой коллбэк. За счет этого мы можем обработать много запросов какбэ параллельно, но с точки зрения программиста параллельности нет, потоков нету, race condition не возникает и башка у него об этом не болит. И у нас все быстро работает, пока ни одна функция не занимает процессор слишком надолго, пока она не работает слишком долго. А если она займет, то, в силу однопоточности, у нас все остальные запросы зависнут.

Но иногда нам все-таки сделать большую работу — прочитать или записать большой файл, например. С помощью потоков мы дробим эту работу на кусочки, которые не занимают проц надолго. Это не всегда возможно, но в большом количестве случаев вполне себе работает.

P.S. В данном ответе речь идет о stream (не путать с thread).

var pcp, width = $( window ).width(),
    size = width < 768 ? 'sm' : width > 991 ? 'lg' : 'md';

    $.each([ 'bottom', 'top', 'left', 'right' ], function( i, value ) {
        if ( $( '.has-tooltip' ).hasClass( size + '-' + value ) ) pcp = value;
    });

Не все так просто.

Я только начинаю разрабатывать мобильные приложения и для себя выработал несколько приемов, которые подсмотрел в статьях на хабре, ТЕДе и других источниках.

1. Лени не существует. Есть лишь недостаточная заинтересованность. Поэтому, что-то не припомню, чтобы кто-то ленился шпилить в Доту или "таньчики" много часов подряд.

Вот я утром сел за ноут, открыл вкладку на developer.android.com, читаю, параллельно открыт Эклипс с копипастой, потихоньку разбираюсь. И знаете, какое-то ощущение, по-английски anxiety, не знаю, как наиболее точно это будет по-русски. Поэтому легче открыть соцсети, 9gag или вообще читать в ЖЖ всякую никак не относящуюся конкретно ко мне мусорную информацию.

Мною было прочитано множество статей о прокрастинации, мотивации, но в самое яблочко попала вот эта статья - blogs.hbr.org/2014/02/how-to-make-yourself-work-wh... С ходу не мог найти перевод на хабре. Вкратце, если анализировать, как проводят рабочее время успешные люди, то получается, что они реализуют задачи несмотря на "неудобное время", "ой сейчас неохота", а страх облажаться заменяется на страх - "что будет, если я не приступлю к текущей задаче сию же секунду".

А также вот это выступление на Теде. www.ted.com/talks/dan_pink_on_motivation Должны быть русские субтитры. Насчет того, что приемы мотивации 19 века до сих пор широко применяются, несмотря на то, что они утратили свою эффективность. Предлагается новые способы.

2. Нужна стопроцентная железобетонная уверенность в себе и собственных действиях.

3. Смена физической активности. Действительно, поясница, спина, шея начинают ныть после двухчасового кодинга или браузинга. Поэтому важно делать хотя бы трехминутные перерывы, разумеется, программистам нужно несколько часов "полного погружения" в проект, желательно, чтобы их никто не отвлекал, потому что придется потом заново во все вникать и строить в голове архитектуру приложения. Я лично, когда я хочу прочитать книгу по джаве или просто художку, не сижу или лежу, а хожу по комнате, даже сбросил жирок за зиму :-) Интересно было бы измерить активность с помощью шагомера. Разумеется, это надо чтобы никто не раздражался, если вы сидите в офисе или в кабинете с коллегой.

4. Хорошо почитать про "состояние потока", мне лично помогло. Много статей на хабре. Ученый, исследователь этого явления рассказывает - www.ted.com/talks/mihaly_csikszentmihalyi_on_flow

5. Есть много всяких мелких фишек, но они сами органически вырабатываются, когда вы пытаетесь поднять свою продуктивность, главное их записывать где-нибудь и накапливать.

Был рад поделиться личным подходом.