Тигран Абрамян

Как сделать документацию к коду?

Нужно остановить выполнении функции с помощью return; чтобы снова не добавлять классы.

Для таких целей правильнее использовать приватный роут.

import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';

export const PrivateRoute = (props) => {
  const token = localStorage.getItem("myToken");
  const location = useLocation();

  if (token) {
    return <Route {...props} />
  }

  return (
    <Redirect to={{ pathname: '/', state: { from: location } }} />
  );
};

// Use Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
  <Home />
</PrivateRoute>

что я не слишком хорошо понимаю классы

Вам тут явно нужно унаследоватся, почитайте про extends.

class FirstClass {
  constructor() {
    this.importantVar = '1234asd'
  }
  
  someFunction() {
    alert(this.importantVar);
  }
}

class SecondClass extends FirstClass {
  constructor(importantVar) {
    super();
    this.justAnotherVar = 'ooooo';
  }

  iWannaImportantVar() {
    alert(this.importantVar);
  }
}

function gasgasgas() {
  const firstClass = new FirstClass();
  const secondClass = new SecondClass();

  firstClass.someFunction();
  secondClass.iWannaImportantVar();
}

gasgasgas();

const array = [
    ["1", "2"],
    "3",
    ["4",  ["5", "6"], ["7", "8"] ],
    ["9", "10", ["11", "42"]]
]

const res = array.flat(Infinity).join(" ");
console.log(res);

https://learn.javascript.ru/map-set#set
[...new Set(a)]

$('body').html($('body').html().replace('test', '123'));

const readMore = document.getElementsByClassName("hide_sub")[0];

readMore.addEventListener("click", () => {
  if (readMore.textContent === "Читать полностью..") {
    readMore.textContent = "Скрыть";
  } else {
    readMore.textContent = "Читать полностью..";
  }
});

Держите в паттерне ставьте эту проверку

^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$

На всякий пожарный.
https://www.regextester.com/99415
https://www.regexpal.com/94215

input:focus::placeholder {
  color: transparent;
}

const age = person => {
  let amount;

  for (let i = 0; i < person.length; i++) {
    for (let j = i; j < person.length; j++) {
      if (person[i] > person[j]) {
        amount = person[i];
        person[i] = person[j];
        person[j] = amount;
      }
    }
  }

  return person;
}

const res = [3, 4, 2, 78, 0, 1];

console.log(age(res));

<div class="content-area">
  <h5 id="text">CONTENT AREA</h5>
  <button id="hideBtn">Скрыть текст</button>
</div>

.hide-and-show {
  display: none;
}

const btn = document.getElementById('hideBtn');

btn.addEventListener('click', function() {
  document.getElementById('text').classList.toggle('hide-and-show');
  if (btn.innerHTML === 'Показать текст') {
    btn.innerHTML = 'Скрыть текст';
  } else {
    btn.innerHTML = 'Показать текст';
  }
})

let position = 2;
class Step {
  constructor(pos) {
    this.step = pos;
  }

  run() {
    console.log(this.step += 1);
  }
}

const obj = new Step(position);
setInterval(obj.run.bind(obj), 1000);

Циклом пробежитесь и тогда добавите кнопку к каждой ссылке.

const links = document.querySelectorAll('.navigation__link');

links.forEach(link => {
  const btn = document.createElement('button');
  btn.textContent = "BUTTON";

  link.appendChild(btn);
});

А что у вас там ошибка была в консоле показывает.

медиа запросы

@media (max-width: 992px) {
  #vid_vpaut_div {
    display: none;
  }
}

Не так.
if (item.cat = cat1) {

А так.
if (item.cat == cat1) {

const middleOfThree = (a, b, c) => (a + b + c) - (Math.min(a, b, c)) - (Math.max(a, b, c));
console.log(middleOfThree(5, 15, 20)) // 15

.check-1 {
  display: none;
}