Калькулятор услуг html код

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Калькулятор расчета услуг

maxulyanov/Payment-Calculator

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Калькулятор расчета услуг

• 4 основных шага, последовательно появляющихся друг за другом
• Раскрывающиеся описание для каждой услуги
• Блок с выбранной услугой отмечается особым цветом
• Скрипт для выбора только одного чека в первых двух блоках, так же заменены картинки ie9+
• Проверки на пустой чек, указаны ли кол-во услуг(страниц).Выводятся разные предупреждения для каждого шага
• Затемнение пройденного шага с уведомлением
• Прогресс-бар пройденных шагов в процентах и визуальном представлении
• Подсчет шагов n из 4, после выбора последнего меняется на кнопку «Расчет»
• Итоговая расчетная таблица выбранных услуг, с типом услуги, ценой, количеством (выбрано страниц), если это возможно, а так же итоговая стоимость
• Форма заявки, c 3 обязательными полями, поля email и телефон проверяются через регулярные выражения и 1 необязательное
• Сообщение об успешной отправке с указанием на какой email выслано сообщение
• Ajax обработка формы, без перезагрузки страницы
• PHP обработчик формы отправляет два письма:
  • на указанный email в формате HTML(клиенту);
  • на email исполнителя с информацией о клиенте
  • Все современные браузера
  • В IE8 и ниже не работают некоторые визуальные эффекты, вся логика функционирует

  About

  Калькулятор расчета услуг

  Источник

  Простой калькулятор стоимости на jQuery

  

  Здесь напишем небольшой калькулятор, который будет выполнять подсчет стоимости работ, услуг, еще чего-то (подробности ниже).

  Есть таблица, в которой список работ и цены к ним, примерно вот такая:

  Услуга	Кол-во	ед. изм.	Цена (р)
  Написать статью	1000	зн.	50
  Вбить гвоздь	5	шт.	100
  Подумать	10	мин.	150
  Выдернуть гвоздь	1	шт	20

   
   
  Услуга
   
  Кол-во
   
  ед. изм.
   
  Цена (р)
   
   
  Написать статью
   
  1000
   
  зн.
   
  50
   
   
  Вбить гвоздь
   
  5
   
  шт.
   
  100
   
   
  Подумать
   
  10
   
  мин.
   
  150
   
   
  Выдернуть гвоздь
   
  1
   
  шт
   
  20
   
   

  Здесь есть несколько работ, с разными единицами измерения (что вообще не важно), разным минимальным количеством, ценой.

  Что нужно сделать (небольшое ТЗ)

  1. Сделать количество в виде поля, с возможностью ввода произвольного значения
  2. В поле «Количество» должны быть кнопки +/- для изменения значения с заданным интервалом, шагом (для одних работ добавлять +1, для других +5, +20 и т.д.)
  3. Шаг может отличаться от минимального количества. Например: стоимость «Написание статьи» минимально указана за 1000 знаков, а в дальнейшем нужно добавлять +200 знаков за шаг.
  4. Произвольно вводимые значения должны соответствовать указанному шагу. Т.е. при шаге «5» и попытке указать вручную «2», значение должно автоматом меняться на «5».
  5. После таблицы должна быть сумма «Итого»

  Что будем делать

  1. Добавить поле input для ввода количества
  2. Добавить в таблицу «Шаг» (этого параметра у нас нет). Можно в виде скрытого поля, видимого значения, или атрибута. Здесь уж как удобнее. Я буду делать атрибутом для поля ввода количества
  3. К input добавить +/-
  4. Добавить классы элементам с данными (в данном случае — ячейки таблицы, но это могут быть и блоки)
  5. Написать небольшой скрипт, чтобы это работало

  Реализация. Шаг 1

  Для начала добавлю в талицу классы и недостающее поле. Получится так:

   
   
  Услуга
   
  Кол-во
   
  ед. изм.
   
  Цена (р)
   
   
  Написать статью
   
   
   + - 
   
   
  знаков
   
  0
   
   
  Вбить гвоздь
   
   
   + - 
   
   
  шт.
   
  0
   
   
  Подумать
   
   
   + - 
   
   
  мин.
   
  0
   
   
  Выдернуть гвоздь
   
   
   + - 
   
   
  шт
   
  0
   
   
   
  Итого:
  0 руб.

  Что здесь для чего и почему:

  • Вместо количества появилось поле «quant» с атрибутами data-step (шаг), data-price (цена шага), data-min (минимальное количество)
  • Строкам добавлен класс «t-row» для нахождения родителя в js. Добавил для легкой переделки из таблицы в блоки (можно было обращаться и к тегу «tr»)
  • Для всей таблицы добавлен класс «calc». Таких таблиц на странице может быть сколько угодно, используем этот класс, соблюдаем структуру и все будет работать одним скриптом
  • Цена установлена = 0 и добавлен класс «price» — для нахождения блока скриптом

  Реализация. Пишем скрипт

  Т.к. скрипт будет работать с использованием библиотеки jQuery, ее необходимо подключить, что скорее всего уже и так сделано (идет в комплекте с большинством шаблонов, тем, включена как стандартная у многих CMS).

  Будет три функции: две будут менять значение input, в зависимости от способа изменения — по кнопкам, или путем ввода с клавиатуры. Третья будет подсчитывать цену и выводить итого.

  /*Обрабатываем нажатия на кнопки + и - */ $('.minpl').click(function() < /*Находим input*/ $input = $(this).parent().find('.quant'); var qty = Number($input.val()); /*На случай, если количество не удалось определить (например, пользователь мог оставить поле пустым)*/ if (isNaN(qty)) qty = 0; if ($(this).hasClass('plus')) < if (qty == 0) < qty = $input.data('min'); >else < qty += $input.data('step'); >> else < qty -= $input.data('step'); >var min = $input.data('min'); if (qty >= min) < $input.val(qty).trigger('input'); >else < $input.val(0).trigger('input'); >/*Передаем функции подсчета, обновления*/ updateCalc($input); >); /*Обрабатываем ввод с клавиатуры */ $('.quant').change(function() < var qty = $(this).val(); if (isNaN(qty)) qty = 0; var min = $(this).data('min'); var step = $(this).data('step'); if (qty >0) < /*Если вдруг число не кратно шагу, увеличиваем (только увеличение) до кратного*/ qty = Math.ceil(qty/step)*step; if (qty < min) < qty = min; >$(this).val(qty).trigger('input'); > else < $(this).val(0).trigger('input'); >updateCalc($(this)); >); /*Считаем, обновляем значения*/ function updateCalc($input)< var qty = Number($input.val()); if (isNaN(qty)) qty = 0; $input.parents('.t-row').find('.price').text(qty * $input.data('price')/$input.data('step')); var itog = 0; $input.parents('.calc').find('.price').each(function()< itog += parseInt($(this).text()); >); $input.parents('.calc').next().find('.val').text(itog); >

  Шаг последний. Немного оформим в CSS

  .inp-group .inp-group .quant .inp-group .minpl .inp-group .minpl:hover .inp-group .plus .inp-group .minus

  Результат

  Для удобства публикую через codepen

  Источник

  Как написать калькулятор на HTML и CSS без JavaScript

  

  Материалом о разработке калькулятора на CSS и HTML, без файла JS, тега script и обработчиков событий в HTML делимся к старту курса по Fullstack-разработке на Python. За подробностями приглашаем под кат.

  Постановка задачи

  В проектах CSS часто в обычные статические HTML и CSS компилируются HAML и SCSS. Последние при этом применяются во многих сумасшедших проектах, но свой я решил не усложнять: взгляните на весь код.

  Как это сделать?

  Начнём со взаимодействия с пользователем. Как без JS понять, что кнопка нажата? Ответ: при помощи значений радиокнопок:

  input, p < display: none >#q-1:checked ~ .quote-1 < display: block; >#q-2:checked ~ .quote-2

  Метки (label) соединены с input так, что нажатие на них станет нажатием на input. Метки упрощают стиль, поэтому они лучше нажатия на радиокнопку напрямую.

  Символ ~ — это селектор, выбирающий элементы на том же уровне сложности: A ~ B соответствует элементам B после A. Код выше по умолчанию скрывает элементы p, отображая их, только когда подключенная радиокнопка выбрана.

  Переменные и счётчики CSS

  Значения счётчиков в функции calc неприменимы, поэтому, чтобы сгенерировать число, объявим переменную. Напишем имя свойства с двумя дефисами (—) в начале и любым значением CSS: —colour: brown или —digit: 3. Для подстановки переменной вызовите функцию CSS var.

  Счётчики CSS хранят и отображают числа. Они применяются, например, для автоматической нумерации разделов.

  #set-to-1:checked ~ div < --digit: 1; >#set-to-2:checked ~ div < --digit: 2; >#set-to-3:checked ~ div < --digit: 3; >.number-display < counter-increment: digit var(--digit); >.number-display::after

  Когда пользователь отмечает кнопку, внутри div задаётся значение переменной —digit, наследуемое всеми дочерними элементами. Это значение нельзя вывести напрямую, поэтому увеличим счётчик digit и отобразим его через сгенерированный content.

  Чтобы получить числа больше 9, нужно просто продублировать уже существующие цифры. За счёт тщательно продуманной структуры HTML и использования промежуточных переменных дублирование CSS сводится к минимуму:

  /* Include previous CSS */ .first-digit < --first-digit: var(--digit); >.second-digit

  Переменная —digit по-прежнему задаётся через input, каждый отдельный div принимает это значение и присваивает его —first-digit, —second-digit и так далее: повторять код #set-to-1:checked для каждой цифры не нужно.

  Функция CSS calc

  Функция calc в CSS выполняет вычисления и применяется, например, когда задаётся значение width (ширины): calc(100% — 95px). Определим с помощью calc число элемента input, а также результат всех вычислений:

  [name="theFirstDigit"]:checked ~ * .set-number < --number: var(--first-digit); >[name="theSecondDigit"]:checked ~ * .set-number < --number: calc(var(--first-digit)*10 + var(--second-digit)); >[name="theThirdDigit"]:checked ~ * .set-number < --number: calc(var(--first-digit)*100 + var(--second-digit)*10 + var(--third-digit)); >/* and so on */

  Селектор * выбирает все элементы, поэтому в коде выше вы найдёте .set-number — потомка любого элемента после input с флажком и определённым именем. Второй селектор переопределяет первый просто потому, что расположен после первого.

  Добавив несколько input для выбора операции, аналогичным методом мы получим окончательный ответ. В этом случае значения просто захватываются в счётчике и отображаются. Свойство content тоже может принимать строку, отображая операцию калькулятора.

  @property и @counter-style

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

  Счётчики при этом использовать нельзя, ведь их нельзя завести в calc. Воспользуемся экспериментальной функцией @property: она определяет переменную с помощью такого функционала, как проверка типа или контроль за наследованием значений. Определим @property:

  @property --integer < syntax: ''; initial-value: 0; inherits: true; >

  Так любое присваиваемое —integer значение округляется до целого числа. Чтобы отобразить число с точностью до семи знаков после запятой, сначала выполним следующие вычисления. Здесь —number определяется внешним кодом:

  Используя —integer для целых чисел и —decimal для знаков после запятой, можно увеличивать счётчики с похожими именами, но отображать их напрямую нельзя: например, для числа 1,005 значение —integer равно 1, а значение —decimal — 5.

  Знаки после запятой дополняются пользовательским свойством @counter-style, оно применяется для отображения знака «минус»: мы не можем сообщить системе, что число -0,5 — это «отрицательный нуль». Вот как правильно отобразить -0,5:

  @counter-style pad-7 < system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; pad: 7 "0" >@counter-style sign < system: numeric; symbols: "" ""; >.number-display::after

  Второй аргумент функции counter — это стиль. В стиле pad-7 определяется обычная система счисления, за исключением того, что любое значение с менее чем семью цифрами дополняется нулями.

  В стиле sign тоже используется числовая система, но мы определили символы пустыми, поэтому отображается в нём только знак «минус», если нужно.

  Возможности

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

  Чтобы всегда показывать метку следующей цифры, можно применять селектор ~, :checked и свойство display, а content — разбить на отдельные элементы, таким образом показывая десятичную часть только при необходимости.

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

  Самое сложное — скобки, ведь неизвестно, как динамически добавить их в calc, поэтому для каждого сценария пришлось бы иметь отдельные селекторы и CSS.

  Заключение

  Я написал этот калькулятор просто ради забавы, но многому научился, это было очень весело, поэтому если у вас есть идея пустякового проекта, реализуйте её. Почему нет?

  А пока вы практикуетесь, мы поможем прокачать ваши навыки или с самого начала освоить профессию, востребованную в любое время:

  

  Краткий каталог курсов и профессий

  Data Science и Machine Learning

  Python, веб-разработка

  Мобильная разработка

  От основ — в глубину

  Источник

  Читайте также:  Css flex align items center height 100