Делаем калькулятор для сайта

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

Сделаем секцию, в которой будет контейнер с классом row.

Калькулятор будет занимать пять колонок col-sm-5, а изображение col-sm-7.

Добавим див с классом calc.

Заголовок h2 будет расчет стоимости тиража визиток.

Структура калькулятора будет состоять из выбора тиража, вида бумаги и цветности визитки.

1. Тираж. Добавим тег label с классом card и названием выберите тираж. Создадим select с именем и id card. Внутри будут option с параметрами равными объемам тиража.
2. Бумага. Label назовем выберите бумагу с классом paper. Select также называется. Будет три option вида бумаги белый лен, мелованная и vip белая.
3. Цветность. Зададим класс color для label и select. В option будет пять видов бумаги Черно-белая с одной и с двух сторон, цветная и смешанная черно-белая и цветная.

У всех select будет класс form-control, чтобы задать стиль рамки с выбором параметров.

Если человек выбрал все три параметра, то внизу будет вывод стоимости за тираж в теге заголовка h3.

Цену оформим в теге p с классом pr добавим span с id=price.

В колонке справа добавим див с классом pic и разместим пять изображений, в теге img с id от одного до пяти, соответствующих выбору цветности визитки.

Код в index.html.

Стилизуем все классы у калькулятора.

Добавим рамку у калькулятора border: 3px solid #b641b0 и отступы по бокам padding: 20px 20px.

Цена будет #price большими буквами и font-weight: bold.

У изображений card-pic img отключим видимость display: none, но изначально будет видна первая #card1 картинка визитки черно-белая односторонняя display: inline-block.

Отступ сверху будет как у калькулятора padding-top: 20px.

Класс form-control будет на всю ширину width: 100% и с рамкой синего цвета.

Код в main.sass.

Скрипт для калькулятора в common.js.

Вначале проверим изменялись ли значения select у элемента с классом calc $(.calc).change (function ().

Если одно из полей меняется применяем функцию.

Присваиваем переменной тираж $card значение select#card и вытаскиваем это значение функцией val ().

Также находим значение для типа бумаги $paper = $(select#paper).val ().

Какую цветность визитки выбрал покупатель, определим $color = $(select#color).val ().

Функция изменения картинки относительно выбора цветности.

Определим, какую цветность выбрал пользователь, чтобы подставить соответствующую картинку, для этого используем логическую функцию if.

Для каждого option у цветности создадим дата атрибуты data=1,2,3,4,5 в index.html.

В скрипте добавим переменную $color1, которая будет брать селект с идентификатором select#color, с выбранным option:selected на данный момент.

И у этого option достаем определенный атрибут командой attr (data).

Теперь проверим, если if переменная $color1 равна 1, то скрываем все картинки функцией $(.pic img).hide (), а первое изображение покажем $(#card1).show (slow).

Делаем по аналогии для других пяти изображений и проверяем в браузере.

Напишем формулу расчета стоимости визитки.

1. Стандартный формат визитки 9 на 5 сантиметров. Таких визиток на целый лист формата А3 поместится 30 штук $viz = 30, поэтому итоговый тираж будем делить на 30 $fin = $card / $viz.
2. Теперь итоговый тираж умножим на цену за бумагу $price = $fin * $tb. Добавим атрибут к option у бумаги tb=9,18,21 в index.html это цена в зависимости от типа бумаги. Теперь в скрипте зададим переменную, которая вытащит атрибут attr (tb) из выбранного типа бумаги select#paper option:selected.
3. Третий параметр, который влияет на цену это цветность, зададим атрибуты дата цены у option селекта с именем color. clpr=5,10,10,20,15 цена каждой цветности в index.html. В common.js переменная $clpr равна выбранной option, в select с идентификатором color и вытаскиваем атрибут attr (clpr).

Общая формула будет умножение атрибутов цены всех выбранных option $price = $fin * $tb * $clpr.

Для вывода стоимости тиража $(span#price).text ($price).

Код в common.js.