ForSureN1

document.querySelector('.cards').addEventListener(
  'click',
  (e) => {
    if (!e.target.matches('.card')) {
      return;
    }
    document.querySelectorAll('.card.active').forEach(
      (c) => c.classList.remove('active')
    );
    if (e.target.previousElementSibling) {
      e.target.previousElementSibling.classList.add('active');
    } 
    if (e.target.nextElementSibling) {
      e.target.nextElementSibling.classList.add('active');
    } 
  },
);

Используйте https://developer.mozilla.org/en-US/docs/Web/API/E...

А это не 3D carousel, напр. https://codepen.io/SitePoint/pen/gRJWqm внизу?

btn.forEach((key, index) => {
})

upd
Названия переменных у вас плохие.

// Это коллекции - множественная форма
let buttons = document.querySelectorAll('.advertisement-tabs__item');  //Кнопки табой
let blocks = document.querySelectorAll('.advertisement-tabs__content') //Контент

// Что еще за key? Там кнопка
buttons.forEach((btn, index) => {
    btn.addEventListener('click', function() {
      console.dir(btn)
      blocks.forEach(block => {
        block.classList.toggle('active', btn === block)
      })
    })
  })

Разница, главным образом, в том, насколько сложный интерфейс можно сделать с приемлемыми трудозатратами. Vue/React/Angular упрощают написание сложных интерфейсов. Табы, скорее всего, к таковым не относятся, поэтому подключать какой-то фреймворк только ради них нет смысла. Но и писать ваниль, если фреймворк уже подключен - это тоже странно.

Вы в setTimeout() передаете не функцию, а результат выполнения items[i].classList.add('drop'), что вычисляется сразу.

Каким образом можно сделать ровную табуляцию в строке?

Это можно сделать способом, который обычно называют "в лоб". То есть по сути просто взять и сделать, потому что здесь нет каких-либо сложностей даже для начинающего программиста. Проблема отсутствует, как таковая.

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

Очень жаль.

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

Вот, например, у вас есть подзадача:

мне нужно как-то посчитать количество символов во всех строках

Отлично, ведь это отдельная подзадача, которую можно изолировать и просто решить, абстрагируясь от связей с другими подзадачами (ведь это ещё успеется):

text.split('\n').forEach(
  (s,i)=>console.log('Символов в строка №'+(i+1)+': '+s.length)
);

Вероятно, вам кажется, что это не совсем то, что вам нужно. Всё верно, потому что это просто пример того, как легко можно решить отдельную простую подзадачу. А учитывая все связи, это решение придётся немного модифицировать под ваши хотелки, но это уже вы сами как-нибудь.

Предлагаю вам следующий алгоритм ваших дальнейших действий:

• Если вы поняли код выше и легко можете написать подобный, то, как я и ответил выше, просто решайте вашу задачу в лоб. Сложную задачу разбивайте на подзадачи. Обучение вас этому навыку выходит за рамки ответа на ваш вопрос, но вы можете начать с Википедии.
  
• Если вы с трудом поняли код выше или вообще ничего не поняли, но хотели бы понять, то подтяните знание самого языка. Без таких базовых понятий, как "массив" или "цикл", программировать практически не получится вообще. Объяснение основ выходит за рамки ответа на ваш вопрос, но вы можете начать с чтения учебника.
  
• Если вы не хотите ни в чём разбираться, а просто хотите, чтобы вам предложили готовое решение и чтобы оно просто работало, то подтяните ваше умение формулировать, чего именно вы хотите. Текущий ваш вопрос сформулирован сумбурно, в стиле "чтобы у меня всё было, и мне за это ничего не было". При таком подходе придётся слишком долго ждать телепата 80 лвл. Лучше будет красиво, коротко и ясно объяснить детали, чтобы помочь смог любой специалист без уточняющих вопросов. Увы, объяснение принципов того, как задавать вопросы, снова выходит за рамки ответа на ваш изначальный вопрос, но вы можете начать с чтения правил этого ресурса. Хотя лаконично формулировать мысли они вас не научат. Но ведь надо же с чего-то начинать, верно?
  

localStorage.setItem('checkBox', JSON.stringify(checkInput));
save = localStorage.getItem('checkBox');
console.dir(save);

function cityToCountry(city) {
    const countries = ['Казахстан', 'Россия', 'Китай', 'США'];

    let cities = [[],[],[],[]]
    array[0][0] = 'Астана';
    array[0][1] = 'Караганда';
    array[0][2] = 'Актобе';
    array[0][3] = 'Алмата';
    array[1][0] = 'Москва';
    array[1][1] = 'Новосибирск';
    array[1][2] = 'Сочи';
    array[1][3] = 'Омск';
    array[2][0] = 'Пекин';
    array[2][1] = 'Шанхай';
    array[2][2] = 'Сиань';
    array[2][3] = 'Харбин';
    array[3][0] = 'Нью-йорк';
    array[3][1] = 'Чикаго';
    array[3][2] = 'Вашингтон';
    array[3][3] = 'Даллас';

    for (let i in cities) {
        if (!cities.hasOwnProperty(i)) {
            continue;
        }

        for (let j in cities[i]) {
            if (!cities[i].hasOwnProperty(j)) {
                continue;
            }

            if (cities[i][j] === city && countries[i]) {
                return countries[i];
            }
        }
    }

    return 'Город не найден';
}

let city = prompt('Введите название города:', '');

alert(cityToCountry(city));

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

Самый короткий путь для решения такой задачи:

const cityToCountry = {
    'Астана': 'Казахстан',
    'Караганда': 'Казахстан',
    'Актобе': 'Казахстан',
    'Алмата': 'Казахстан',
    'Москва': 'Россия',
    'Новосибирск': 'Россия',
    'Сочи': 'Россия',
    'Омск': 'Россия',
    'Пекин': 'Китай',
    'Шанхай': 'Китай',
    'Сиань': 'Китай',
    'Харбин': 'Китай',
    'Нью-йорк': 'США',
    'Чикаго': 'США',
    'Вашингтон': 'США',
    'Даллас': 'США',
};

const city = prompt('Введите название города:', '');
if (!cityToCountry.hasOwnProperty(city)) {
    alert('Такого города не найдено');
} else {
    alert(`Для города «${city}» найдена страна «${cityToCountry[city]}»`);
}

Этот код работает быстрее, и подход, который в нём используется, уменьшает количество точек отказа. Если вы всегда будете стремиться идти к цели прямыми путями, а не нарезать круги, вы лучше состоитесь, как программист. Но это дело ваше.

Во-первых, вы в else через break outer; прерываете выполнения цикла, и у вас отрабатывает только элемент array[0][0].
Во-вторых, что вы здесь let j in i собрались перебирать?
Надо вот так:

outer: for (let i in array) {
  console.log(array[i])
  for(let j in array[i]) {
    console.log(array[i][j])
    if(city === array[0][j]) {
      alert('Казахстан')
      break outer;
    } else if (city === array[1][j]) {
      alert('Россия')
      break outer;
    } else if (city === array[2][j]) {
      alert('Китай')
      break outer;
    } else if (city === array[3][j]) {
      alert('США')
      break outer;
    } else {
      alert('Такого города не найдено')
    }
  }
}

Да и alert('Такого города не найдено') не обязательно вызывать при каждом проходе. Можно сделать так:

var gotCity = false

outer: for (let i in array) {
  console.log(array[i])
  for(let j in array[i]) {
    console.log(array[i][j])
    if(city === array[0][j]) {
	  gotCity = city
      alert('Казахстан')
      break outer;
    } else if (city === array[1][j]) {
      alert('Россия')
      gotCity = city
      break outer;
    } else if (city === array[2][j]) {
      alert('Китай')
      gotCity = city
      break outer;
    } else if (city === array[3][j]) {
      alert('США')
	  gotCity = city
      break outer;
    }
  }
}

if (gotCity === false) {
	alert('Такого города не найдено');
}

Судя по данным GPS, на что лично я бы обратил внимание в первую очередь:

1) включите кэш браузера.
Это делается в htaccess + на стороне хостинга должно быть включено. Проще всего если ISP панель используется. Ставьте срок 365 дней. Если лень разбираться просто напишите хостеру: прошу поставить кеш браузера для всех статических элементов (картинки, шрифты, стили и т.п.) на 365 дней. Нормальный хостер сделает бесплатно или подскажет где сделать. Если хостер ненормальный, то попробуйте сами всунуть правила в htaccess (они если погуглить - найдутся, просто их много разных вариаций, надо пробовать какие подойдут к конкретному хостингу)

вообще это самый простой пункт обычно.

2) Настройте подходящий размер изображений
Тут тоже все просто - у вас фотка большая, а стоит она в мелком квадрате. Зачем? Поставьте туда мелкие фото. То есть просто сохраните их в редакторе с меньшей шириной и высотой.

3) Удалите неиспользуемый код JavaScript - ничего вы тут толком не сделаете.
скрин i.imgur.com/qEbmxsh.png - все скрипты что можно укажите async - вот как в первом сделано. И проверьте чтобы страница норм отображалась.

4) рекомендую выкинуть шаринг, скрин i.imgur.com/6z5kK1d.png - им обычно уже не пользуются, а он влияет на page speed

Хотя бы так, думаю, баллов 10-15 может дать такая штука.

ForSureN1, Технические вещи, которые выдает гпси относятся к нескольким специалистам сразу: Админу, в части настроек сервера, в том числе настройках кэширования статики, Фронтенду, по оптимизации кода и изображений, и Бэкенду, по оптимизации кода, чаще всего относящемуся к скорости запросов в бд, где обычно и происходит затык.

В вашем случае часть работ лежит на админе, в частности

Сократите время до получения первого байта от сервера
Задайте правила эффективного использования кеша для статических объектов

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

innerHeight есть только у window, для элемента используйте clientHeight или offsetHeight

Если ты пишешь на ванильке и не собираешь билды для разных страниц, либо у тебя на одной сборке может как присутствовать, так и отсутствовать нужный элемент, то подход нормальный.

Но вообще я бы рекомендовал либо отдельные сборки, либо фреймворки, в которых есть, как ленивая подгрузка, так и из коробки отрисовка и удаление элементов.

nextSibling оперирует не элементами (тэгами), а узлами. Если между элементами есть какой-либо текст (пробел, перевод строки, и т.п.), то этот текст образует отдельный узел #text.
Вам нужно свойство nextElementSibling, которое работает только с элементами, пропуская остальные узлы.

в первом приближении так:

.registration__step-item:after {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    width: 10px;
    height: 100%;
    right: -7px;
    top: 0;
    transform: skew(10deg);
  }

после этого начинаются пляски с бубном, чтобы корректно реализовать закругления и тень.
из спортивного интереса можно попытаться, но проще поставить картинку фоном на псевдоэлемент.