JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<section class=calc>
		<div class=container>
			<p class=p-heading>Калькулятор</p>
			<h2>Рассчитайте стоимость и получите скидку 30%</h2>
			<div class=row>
				<div class="col-md-4 col-offset-1">
					<form class=form action=# method=POST enctype=multipart/form-data>
						<h4>Загрузите свое фото</h4>
						<div class=file_upload>
							<button type=button>Загрузить фотографию</button>
							<div>Файл не выбран</div>
							<input type=file name=upload>
						</div>
						<select id=size>
							<option >Выберите размер картины</option>
							<option >40x50</option>
							<option >50x70</option>
							<option >70x70</option>
							<option >70x100</option>
						</select>
						<select id=material>
							<option >Выберите материал картины</option>
							<option   title="Изящный, позволяет легко создавать текстуру, подходит для декоративных картин маслом.">Холст из волокна</option>
							<option   title="Достаточно грубый и создает ощущение реальности, подходит для классических пейзажей, натюрмортов и портретов.">Льняной холст</option>
							<option  title="Изящный, подходит для всех типов реалистичных портретов.">Холст из натурального хлопка</option>
						</select>
						<select id=options>
							<option >Дополнительные услуги</option>
							<option >Покрытие арт-гелем</option>
							<option >Экспресс-изготовление</option>
							<option >Доставка готовых работ </option>
						</select>
						<input type="text" class="promocode" placeholder="Введите ваш промокод">
						<div class=calc-price>Для расчета нужно выбрать размер картины и материал картины</div>
						<button class="button button-order">Быстрый заказ</button>
					</form>
				</div>
				<div class="col-md-4 col-md-offset-2 hidden-sm hidden-xs">
					<img src=img/calc-1.png alt>
					<p class=calc-text>Пропорциональный размер изображения рассчитывается автоматически. Если Вы хотите кадрировать изображение или просто узнать стоимость желаемого размера картины, снимите галочку с поля...

CSS

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700i&subset=cyrillic');
@font-face {
  font-family: 'Circe Light';
  src: url('../fonts/Circe-Light.eot');
  src: url('../fonts/Circe-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Circe-Light.woff') format('woff'), url('../fonts/Circe-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Circe Regular';
  src: url('../fonts/Circe-Regular.eot');
  src: url('../fonts/Circe-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Circe-Regular.woff') format('woff'), url('../fonts/Circe-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Circe Bold';
  src: url('../fonts/Circe-Bold.eot');
  src: url('../fonts/Circe-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Circe-Bold.woff') format('woff'), url('../fonts/Circe-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Circe Extra Bold';
  src: url('../fonts/Circe-ExtraBold.eot');
  src: url('../fonts/Circe-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Circe-ExtraBold.woff') format('woff'), url('../fonts/Circe-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
  outline: none;
}
html {
  font-size: 10px;
}
body {
  font-family: 'Circe Regular', sans-serif;
}
p {
  margin: 0;
}
h1 {
  font-size: 5.4rem;
}
h2 {
  font-size: 4.5rem;
}
h3 {
  font-size: 3.5rem;
}
h4 {
  font-size: 1.8rem;
  color: black;
}
h1,
h2,
h3,
h4 {
  font-family: 'Circe Extra Bold', sans-serif;
}
.p15 {
  font-size: 1.5;
}
.p-heading {
  font-size: 2.2rem;
}
.button {
  border-radius: 50px;
  display: block;
  margin: 0 auto;
  font-family: 'Circe Bold', sans-serif;
}
.button-transparent {
  background-color: transparent;
  font-size: 1.5rem;
  padding: 1.5rem 2rem;
  color: #c51abb;
  border: 2px...

JavaScript

let size = document.querySelector('#size'),
        material = document.querySelector('#material'),
        services = document.querySelector('#options'),
        promocode = document.querySelector('.promocode'),
        totalValue = document.querySelector('.calc-price'),
        total = 1000,
        indexSize = 0,
        indexMaterial = 0,
        promo = false;

    size.options[0].value = 0;
    size.options[1].value = 0.5;
    size.options[2].value = 1;
    size.options[3].value = 1.5;
    size.options[4].value = 2;

    material.options[0].value = 0;
    material.options[1].value = 0.5;
    material.options[2].value = 1;
    material.options[3].value = 1.5;

    services.options[0].value = 0;
    services.options[1].value = 1.5;
    services.options[2].value = 2;
    services.options[3].value = 2.5;
    
    // console.log(size);
    // console.log(material);
    // console.log(promocode);

    size.addEventListener('change', function () {

        indexSize = +size.options[size.selectedIndex].value;

        total = 1000;

        if (size.options[size.selectedIndex].value == 0 || material.options[material.selectedIndex].value == 0) {
            totalValue.innerHTML = 0;
        } else {
            total = (indexSize + indexMaterial) * total;
            if (promo){
            totalValue.innerHTML = total + 1000 * +services.options[services.selectedIndex].value - total * 0.3;
            } else {
            totalValue.innerHTML = total + 1000 * +services.options[services.selectedIndex].value;
            }
        }
    });

    material.addEventListener('change', function () {
        indexMaterial = +material.options[material.selectedIndex].value;
  

        total = 1000;

        if (size.options[size.selectedIndex].value == 0 || material.options[material.selectedIndex].value == 0) {
            totalValue.innerHTML = 0;
        } else {
            total = (indexSize + indexMaterial) * total;
            if (promo){
           ...