Часть 1: Как создать динамическую таблицу цен на веб-сайте с помощью HTML, CSS и JavaScript

В этой серии статей мы покажем вам, как создать динамическую таблицу цен на веб-сайте с помощью HTML, CSS и JavaScript. Мы собираемся показать вам несколько различных способов представления ваших ценовых таблиц на основе ваших продуктовых планов, макета веб-сайта, устройств целевой аудитории и т. д.

Первая таблица цен, которую мы создаем, предназначена для того, чтобы пользователи могли переключать опцию года/месяца для просмотра ценового плана отдельно.

Среда

:root{
  --main-color: #4a4e69;
}

Ценовой контейнер

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

.pricing-container{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 120vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Переключить переключатель

Мы используем флажок, чтобы быть переключателем с

  • Метка: управление стилем выбранных и невыбранных параметров.
  • Активный класс: управление стилем выбранных опций и переключение плана через JavaScript.
  1. .billing_options .label: применить гибкую систему, чтобы метки располагались горизонтально. Вот как это будет присутствовать, если flex не применяется.

2. Ввод .billing_options: скройте флажок, установив для отображения и внешнего вида значение «Нет». Вот как это будет присутствовать, если у нас нет этих частей.

3. .label .active: управляйте начальным статусом активного плана, я установил год по умолчанию. Цвет фона установлен как основной, а цвет шрифта установлен как белый.

<div class="billing_options">
        <input…