Danya Kozlovskiy

1. Вынести в переменные (а лучше в константы const) все элементы HTML. Например, как сделано с PanelMenuLinks
   
2. Использовать вместо, например querySelectorAll("#block_panel_menu")[0] getElementById("block_panel_menu")
   А там, где надо нескольким элементам из массива присвоить значения, использовать циклы forEach
   
   
3. Вразброс обращаетесь к элементам, разделите на блоки, делайте отступы логические (пустые строки) между блоками кода, чтоб было понятнее.
   С табуляцией у Вас что-то...
   

Отредактировал Ваш код:

const
  header = document.querySelector('header'),
  logotip = document.getElementById('logotip'),
  registion = document.getElementById('registion'),
  vhod = document.getElementById('vhod'),
  block_panel_menu = document.querySelectorAll('#block_panel_menu')

function block_panel_menu_Height(height) {
  block_panel_menu.forEach(element => element.style.height = height + 'px')
}

// vhod.innerHTML = '<img style="width: 20px; height: 20px;" src="SiteImage/logo_vhod.svg">'
let logo_vhod = document.createElement('img')
logo_vhod.style.width = '20px'
logo_vhod.style.height = '20px'
logo_vhod.src = './SiteImage/logo_vhod.svg'

window.onscroll = () => {

  if (pageYOffset > 100) {
    header.style.height = '50px'

    logotip.style.opacity = '0'
    logotip.style.marginTop = '-20px'

    registion.style.display = 'none'

    vhod.appendChild(logo_vhod)
    vhod.style.background = 'none'
    vhod.style.width = '30px'

    PanelMenuLinks.style.background = 'none'
    PanelMenuLinks.style.zIndex = '-1'
    PanelMenuLinks.style.marginTop = '-45px'
    PanelMenuLinks.style.fontSize = '13px'
    PanelMenuLinks.style.color = '#fff'
    PanelMenuLinks.style.borderTop = '0px'

    block_panel_menu_Height(49)
    block_panel_menu_children.style.top = '10px'
  }
  else {
    header.style.height = '70px'

    logotip.style.marginTop = '0px'
    logotip.style.opacity = '1'

    registion.style.display = 'block'

    vhod.innerText = 'Регистрация'
    vhod.style.background = '#626262'
    vhod.style.width = '100px'

    block_panel_menu_Height(70)
    block_panel_menu_children.style.top = '20px'

    PanelMenuLinks.style.marginTop = '0px'
    PanelMenuLinks.style.background = '#E7E7E7'
    PanelMenuLinks.style.borderTop = '10px solid #fff'
    PanelMenuLinks.style.fontSize = '18px'
    PanelMenuLinks.style.color = '#000'
  }
}

Мои рекомендации (кроме тех, что я описал выше):

• Правильно использовать функции получения доступа к элементам HTML
  
• ID обычно даётся единственному элементу в документе, в остальных случаях используется класс
  
• Использовать innerText там где можно обойтись и без innerHTML
  
• Создавать элементы средствами JS, а не встраиванием HTML кода через innerHTML
  
• Пишите функции (пусть даже маленькие), если есть повторения в коде: так код будет и красивее и читабельнее и удобнее в использовании
  
• Давать классам и id русские имена типа vhod -- не самая лучшая идея. Используйте переводчик, чтобы перевести интересующие Вас названия на английский.
  
• Выберите способ именования переменных: либо block_panel_menu, либо blockPanelMenu. У Вас же встречаются оба варианта. В JavaScript принято использовать вариант, называемый Camel Case, то есть, второй вариант: blockPanelMenu.
  

Ну а так по мелочи: можно использовать одинарные кавычки ' вместо двойных ";
изучите стрелочные функции типа () => {} . Часто можно использовать именно их -- они и короче писать и не захламляют код лишними словами;
Слушатели событий можно записать короткой записью, например: window.addEventListener('scroll', функция) можно написать window.onscroll = функция (в большинстве случаев просто добавляется 'on' в начало названия события); Желательно писать в начале скрипта строчку 'use strict' -- строгий режим -- гугл расскажет о нём лучше меня

Задавайте вопросы, что не понятно, на всё отвечу!

Чтобы не бросался Exception при кодах ответа > 399
https://docs.guzzlephp.org/en/stable/request-optio...

Не очень понял. Запрос делается, когда требуется)

Представим случай:
У вас в одном компоненте есть список продуктов, который вы загружаете запросом к беку, А в другом компоненте есть надпись "найдено 1234 продуктов". Они на одной странице, но находятся далеко друг от друга, поэтому это разные компоненты

Как вам сделать так, чтобы исходя из ответа сервера данные отображались в двух компонентах?

React без редакса: найти/сделать какой-то родительский компонент, который будет "над" вашими двумя. В нём делать запрос, результат запроса прокидывать в нужные компоненты через пропсы. Есть очевидный минус: бывает, что между родительским компонентом и нужным компонентом есть ещё компонентов 5-6. Придётся прокидывать пропсы через каждый. Это захламляет проект. А если вам вдруг ещё в какой-то третий компонент нужно будет эти же данные прокинуть -- придётся переделывать

React + redux (или любой другой стейт менеджер, не обязательно redux):
В любом компоненте вызываете action, который делает запрос и сохраняет результат в store. Если какому-то компоненту нужны эти данные -- он делает connect к стору, берёт оттуда нужные данные и всё.

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

Пропишите к тегу a/li внутри меню свойство line-height: (высота меню)px; либо же примените к ul свойство align-items: center

align-items:center; для UL

td:last-child

$( "table td:last-child" )

<?php
// Headers
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: *');
header('Content-Type: application/json');
// Connect to db
$connect = mysqli_connect('localhost', 'root', 'root', 'f-mania');
// If connect error
if (!$connect) {
  echo mysqli_connect_error();
  die();
}
// Split url into array
$params = explode('/', $_GET['url']);

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  if ($params[0] == 'account') {
   // ...
  }
} elseif ($_SERVER['REQUEST_METHOD'] == 'POST') {
  if ($params[0] == 'account') {
    if ($params[1] == 'login') {
   // ...
    } elseif ($params[1] == 'recover') {
   // ...
    } elseif ($params[1] == 'reset') {
   // ...
    } elseif ($params[1] == 'register') {
   // ...
    }
  }
} elseif ($_SERVER['REQUEST_METHOD'] == 'PUT') {
   // ...
} elseif ($_SERVER['REQUEST_METHOD'] == 'DELETE') {
   // ...
}

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-F
RewriteRule ^(.+)$ index.php?url=$1 [L,QSA]

www.slimframework.com готовое решение.
Ставиться за 5 минут.

GET /api/games/
POST /api/games/12345
PUT /api/games/12345/
DELETE /api/games/12345/

папки и файлы
var/www/html/config.php - конфиг базы и прочее
var/www/html/api/games/index.php - ваше api

<?php
$method = $_SERVER['REQUEST_METHOD'];
$request = explode("/", substr(@$_SERVER['PATH_INFO'], 1));

switch ($method) {
  case 'PUT':
    do_something_with_put($request);  
    break;
  case 'POST':
    do_something_with_post($request);  
    break;
  case 'GET':
    do_something_with_get($request);  
    break;
  default:
    handle_error($request);  
    break;
}

index.php

<?php
# Author - Fedor Vlasenko, vlasenkofedor@gmail.com
define('METHOD', $_SERVER['REQUEST_METHOD']);
define('URI', parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH));

function router($url, ...$args)
{
    (empty($args[1]) || false !== strpos(METHOD, $args[0]))
    && (URI === $url || preg_match('#^' . $url . '$#iu', URI, $match))
    && die(call_user_func_array(end($args), $match ?? []));
}

router('/api/games', 'GET', function () {
    echo 'список игрушек';
});

router('/api/game/(\d+)', 'GET', function (...$args) {
    echo 'информация о игрушке: ', $args[1];
});

router('/api/games', 'POST', function () {
    echo 'добавить новую игрушку';
});

router('/api/games/(\d+)', 'PUT', function (...$args) {
    echo 'обновить существующую игрушку: ', $args[1];
});

router('/api/games/(\d+)', 'DELETE', function (...$args) {
    echo ' удалить игрушку: ', $args[1];
});

header($_SERVER['SERVER_PROTOCOL'] . ' 404 Not Found');
echo '404';

далее в консоли запускаем встроенный php сервер
php -S localhost:8000 index.php
тестируем и наслаждаемся :-)

еще вариант использования setInterval

async function getJson() {
    var res = await fetch('url');
    myArray = await res.json();
    console.log(myArray);
}

setInterval(() => {
    getJson();
}, 5000);