Создание баннера согласия на использование файлов cookie с помощью Vanilla JS

Эта простая, пошаговая статья покажет вам, как создавать, манипулировать и удалять элементы DOM. С соответствующими ссылками на документацию MDN по ходу статьи, она обязательно поможет любому новичку в JavaScript.

=> Начните новую статью на CodePen здесь.

Содержание

Начало работы
Манипулирование DOM
Полный проект смотрите здесь:

Начало работы

=> Вставьте этот HTML в раздел HTML вашего пера

<header>
  <div>Site Title</div>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </header>
  <main>
  </main>
  <footer>
      <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </footer>

Вход в полноэкранный режим Выйти из полноэкранного режима

=> Вставьте этот CSS в раздел CSS вашего пера.

/**
Web Page Styles
**/
* {
  font-family: "Arial", sans-serif;
  font-size: 16px;
}
header {
  background: white;
  color: darkblue;
  border-bottom: .5px solid darkblue;
  width: 100%;
  padding: 2%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}
header div {
  grid-column: 1 /span 1;
  grid-row: 1;
  display: flex;
  margin: 1em;
  justify-self: left;
}
nav {
  grid-column: 2 /span 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}
nav ul {
  display: flex;
  justify-content: space-evenly;
  width: 40%;
}
nav li {
  list-style: none;
}
main {
  min-height: 600px;
  background: url('https://images.unsplash.com/photo-1651505343248-26d2400939c4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTM5NjcxMTM&ixlib=rb-1.2.1&q=80') 0 0 no-repeat;
  opacity: .5;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Ваше перо должно выглядеть как веб-страница:

Манипулирование DOM

=> Создайте элемент div в секции JS вашего пера с помощью метода createElement().

=> Добавьте имя класса и вставьте текст и кнопку в баннер согласия Cookie, используя методы classList.add() и innerHTML.

=> При желании вы можете использовать этот HTML для содержимого innerHTML. ‼️ Важно!!! Обязательно включите HTML кнопки как есть.

This site uses 🍪 cookies 🍪 to track everything you do, except not really, idk actually I am just an example <button class="btn" aria-pressed="false">Got It</button>

Вход в полноэкранный режим Выход из полноэкранного режима

=> Вставьте созданный вами элемент DOM в DOM с помощью функции prepend().

Теперь вы создали баннер и вставили его в DOM 🎉

=> Стилизуйте баннер Cookie.

Вы можете использовать этот CSS или разработать его самостоятельно.

.cookie-message {
  width:100%;
  padding: 2% 0;
  background: white;
  box-shadow: 12px 12px 25px #444444aa;
  border-bottom: .5px solid limegreen;
  text-align: center;
  letter-spacing: .12em;
}
.btn {
  width: 100px;
  margin-left: 1%;
  background-color: limegreen;
  padding: .5% 1%;
  border: 2px inset white;
  outline: 2px outset black;
  color: white;
  border-radius: 5%;
}

Вход в полноэкранный режим Выйдите из полноэкранного режима

Ваш баннер должен выглядеть примерно так:

=> Уберите баннер Cookie, когда пользователь нажмет на кнопку.

=> Используйте querySelector для выбора кнопки по ее классу и сохраните его в переменной.

=> Добавьте слушатель события click к созданной вами переменной кнопки.

=> Используйте метод remove(), чтобы удалить элемент баннера из DOM.

=> ВАРИАНТ: Добавьте функцию setTimeout() в обработчик события, чтобы подготовиться к следующим шагам. Продвиньте этот проект еще дальше с помощью моего полного поста здесь.

Создание баннера согласия на использование файлов cookie с помощью Vanilla JS

Начало работы

Манипулирование DOM

Полный проект смотрите здесь:

Рекомендуем почитать: