gazes12

gazes12,

Почему css код срабатывает только на первую кнопку

Он срабатывает и на вторую.
Но конечный рендер разный.

У Вас на :after элементе стоит z-index: -1 соответственно, он проваливается под саму кнопку.
В навигации не проваливается из-за display: flex. Объяснения почему так происходит я не помню.

Сейчас сходу для Вашего решения быстро в голову приходит только вариант обернуть текст кнопки в span, задать ему position: relative и z-index: 1.
А z-index: -1 для after элемента у кнопки поменять на 0.

throttle не вызывает переданную ему функцию, а лишь создает обертку для нее.

const throttledAddComment = throttle(addCommentFn, 5000);
sendButton.click((e) =>{
    e.preventDefault();
    throttledAddComment();
});

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

На клиенте просто делаем для кнопки:

button.disable = true;
setTimeout(() => {
  button.disable = false;
}, 60_000);

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

sendButton.click(e => {
  setInterval(e => { ... }, 0, e); // третьим аргументом передать e
}

p.s. таймаут точно 0 ?

Можно с помощью оператора instanceof

function func(data) {
  if (data instanceof Event) {
    var id = data.target.id;
  } else {
    var id = data;
  }
}

Но лучше использовать кастомные события и проверять наличие поля detail в объекте события

function func(event) {
  const id = event.detail ? event.detail.id : event.target.id;
}
domElement.dispatchEvent(new CustomEvent('event-name', { detail: { id: 'id-42' } }));

Попробовать так и сяк

function func(mixedData) {
  const id = mixedData?.target?.id ?? mixedData;
  console.log(id);
}

func(123) // 123
func({target: {id: 456}}) // 456

Что это было?!
?. — optional chaining
?? — Nullish coalescing operator

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

Слушайте события input, change, paste.
А таймер не нужен.

для того чтобы удалить конкретный комментарий, нужно передавать его id, ну и тогда запрос будет:

DELETE FROM `comments` 
WHERE `user_id` = :user_id 
and `id` = :comment_id

Кроме того, в куках держать айди пользователя нельзя (я спокойно могу напихать в свои куки любой айди и рулить всеми доступами рандомного пользователя). Для этого есть сессии. Так же, для удаления комментариев лучше использовать специальное поле, отвечающее за статус комментария, меняя его на (условно) "удален".

Так же, для таких случаев лучше подходит яваскрипт и аякс запросы, чем перезагрузка страницы формой.

<a id="comment-12345">Тот коммент, до которого надо проскроллить</a>

Location: /#comment-12345

Или полностью на фронте - при отправке ставить куку, а при входе на страницу ее проверять и скроллить, если она установлена.

1) зачем require 'config.php'; в обоих файлах?
2) судя по всему, код первого файла должен выполняться только при субмите формы, соответственно весь код должен быть обернут в проверку метода запроса, смотрите $_SERVER['REQUEST_METHOD'].

Псевдокласс :hover

Во-первых вам нужно вынести переменную previousScroll за пределы функции, потому что она видна только в одной из них.
Во-вторых scrollTo() требует двух аргументов. Если вы передаете только позицию по Y, нужно сделать так:

var previousScroll = 0
open.onclick = () =>{
    previousScroll = window.pageYOffset; /*Сохраняю позицию скорлла*/
    window.scrollTo(0, 0); /*Скролл поднимается в самый вверх*/
}

close.onclick = () =>{
    window.scrollTo({top: previousScroll}); /*Хочу вернутся в исходную позицию скорлла*/
}

В js имеется метод substr
далее вам нужно написать функцию, которая принимает текстовую строку.
Далее вы ее проверяете. Если она имеет длину более чем 14 символ, тогда воспользуйтесь методом .substr(0,13);
Если меньше, тогда выводите полностью строку.

Это решит вашу задачу
border-radius: 0 0 25% 60%;

https://codepen.io/AnnaSummer/pen/MWQExvG

Можно сделать например так:

.quality__button--all {
    margin-right: 13px;
    position: relative;
    background: #FF6428;
    border-radius: 40px;
    padding: 18px 45px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
}


.quality__button--all::before {
    content: "";
    background: #FF6428;
    color: #fff;
    background: red;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: width 0.3s linear;
}

.quality__button--all:hover::before {
    width: 100%;
}

.quality__button.quality__button--all::after {
    content: "Get the App";
    position: relative;
    color: inherit;
}

Ещё можно сделать без изменения ширины с помощью transform: translate:

.quality__button--all::before {
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s linear;
}

.quality__button--all:hover::before {
    transform: translateX(0);
}

второй скрипт переписывает свойство document.onclick, которое использует первый скрипт.

Изучать, как отправляется авторизация из браузера. Без атрибута name браузер не отправит input на бэкенд автоматически. Значит, где-то есть обработчик, формирующий запрос. Можно поискать его, а можно просто посмотреть сам запрос в консоли браузера. Возможно, что передача идёт не в multipart/form-data, а в application/json, возможно, что токен передаётся в заголовках.

(?<![a-zа-яё])[a-zа-яё]