CSS Генератор

Версия v 0.1.7

Данный инструмент пишу для себя. Может кому-то понадобится.

Страничка состоит из формы слева и карточки справа. Форма позволяет пользователям выбирать разные стили для текста на карточке, такие как тень, цвет, прозрачность, жирность и размер шрифта.

Когда пользователь нажимает кнопку “Получить стили”, скрипт.js запускается. Этот файл содержит JavaScript-код, который слушает событие нажатия кнопки. Когда кнопка нажимается, он получает текущие значения полей формы и создает строку CSS-стиля на основе этих значений. Эта строка CSS-стиля затем вставляется в текстовое поле с идентификатором “result”.

Кнопка “Копировать” является кнопкой копирования, которая использует API обрезки для копирования CSS-кода из текстового поля в буфер обмена пользователя.

Метод отвечающий за получение данных из ползунков

    function getValues(){
        _color =$('#color').val();
        _colorShadow =$('#colorSh').val();
        _opacity=$('#opacity').val();
        _weight=$('#weight').val();
        _fSize=$('#fSize').val();
        _tTransform=$('#tTransform').val();
        shX=$('#offsetX').val();
        _bRadius=$('#bRadius').val();
        shY=$('#offsetY').val();
    }

Также добавлена генерация таблицы по заданным параметрам. Пока что параметров не так много.

            <div class="form-group">
              <label for="rows">Количество строк:</label>
              <input type="number" id="rows" name="rows" min="1" value="10">
            </div>
            <div class="form-group">
              <label for="columns">Количество столбцов:</label>
              <input type="number" id="columns" name="columns" min="1" value="5">
            </div>
            <div class="form-group">
              <label for="cell-color">Цвет ячеек:</label>
              <input type="color" id="cell-color" name="cell-color" value="#ffffff">
            </div>
            <div class="form-group">
              <label for="border-color">Цвет рамки:</label>
              <input type="color" id="border-color" name="border-color" value="#000000">
            </div>
            <div class="form-group">
              <label for="cell-width">Ширина ячеек:</label>
              <input type="number" id="cell-width" name="cell-width" min="1" value="50">
            </div>
            <div class="form-group">
              <label for="cell-height">Высота ячеек:</label>
              <input type="number" id="cell-height" name="cell-width" min="1" value="50">
            </div>