Как допилить калькулятор товара на JS с динамическим отображением?

Question

[ivasenkoartem]

Делаю калькулятор для подсчета стоимости багета с динамическим отображением результата.
Цель: Убрать неровности ( Например: при изменение ширины багета, не изменяется ширина паспарту(отступов)), при загрузке страницы должны автоматически браться значения из VALUE у инпута..

HTML

<div class="block">
		<div class="container calculator">
			<h2>Конструктор багета онлайн</h2>
			<div class="col-md-6 result">
				<div class="row">
					<div class="rama" id="rama">
						<div id="img" style="background-color: #999;">
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 calc">
					<div class="col-md-12">
						<div class="row">
							<h3>Параметры багета</h3>
					<div class="col-md-6">
						<div class="row">
							<label>Ширина (мм)</label><br>
						<input type="number" id="w" value="500" placeholder="Введите ширину.."><br>
						</div>
					</div>
					<div class="col-md-6">
						<div class="row">
							<label>Высота (мм) </label><br>
							<input type="number" id="h" value="500" placeholder="Введите высоту.."><br>
						</div>
					</div>
						</div>
					</div>
					<h3>Паспарту</h3>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-6">
						<div class="row">
							<label>Паспарту (мм) </label><br>
							<input type="number" id="p" value="25" placeholder="Введите ширину.."><br>
						</div>
					</div>
					<div class="col-md-6">
						<div class="row">
							<label>Паспарту (цвет) </label><br>
							<input type="color" id="c" value="#FFA07A"><br>
						</div>
					</div>
						</div>
					</div>

					<div class="col-md-12">
						<div class="row">
							<h3>Изображение на багете</h3>
					<label>Изображение </label><br>
					<input type="file" id="files" name="files[]" multiple />
						</div>
					</div>
					<div class="col-md-12">
						<div class="row">
							<h3>Цена:</h3>
							<span class="price">00</span><span> рублей</span>
						</div>
					</div>
					<div class="col-md-12">
						<div class="row">
							<button>Оформить заказ</button>
						</div>
					</div>
			</div>
		</div>
	</div>

JS

$(document).ready(function() {
	function baget() {
		$price_baget = 600; // Цена за багет
		$price_paspartu = 200; // Цена за паспарту
		$w = Number($('#w').val()); // Ширина багета в ММ
		$h = Number($('#h').val()); // Высота багета в ММ
		$p = Number($('#p').val()); // Ширина паспарту в ММ
		$c = $('#c').val(); // Цвет паспарту
		$border_w = 25; // Ширини рамки
		// Проверка на отрицательные числа
		if ($w < 0) {
			$('#w').val(0)
			$w = 0;
		}
		if ($h < 0) {
			$('#h').val(0)
			$h = 0;
		}
		if ($p < 0) {
			$('#p').val(0)
			$p = 0;
		}
		// Конец проверки на отричательные числа
		$k = $h / $w; // Коф.
		$width = Number($('.rama').width()); // Ширина на сайте 
		$height = Number($('.rama').height()); // Высота на сайте
		$border = $border_w * ($width / $w); // Ширина рамки в маштабе 
		$p = $p * ($width / $w); // Ширина паспарту
		$perimetr = 2 * ($w + $h) / 1000; // Периметр в метрах
		$ploshchad = ($w * $h) / 1000000;
		$price = $perimetr * $price_baget;
		if ($p > 0) {
			$price += $price_paspartu * $ploshchad;
		}
		$('.price').html($price);
		$('#img').css("width", $width - ($p * 2) + 'px');
		$('#img').css("height", $height - ($p * 2) + 'px');
		$('#img').css("margin", $p + 'px');
		$('.rama').height($width * $k);
		$('.rama').css("border", $border + "px solid #40c4c8");
		$('.rama').css("border-image", "url(https://www.perfekte-bilderrahmen.de/rahmenvorschau.php?laenge=18.0&breite=13.0&farbe=23) 50 round round");
		$('.rama').css("background-color", $c);
	}
	$('.calc').change(baget());
});

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object
	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {
		// Only process image files.
		if (!f.type.match('image.*')) {
			continue;
		}
		var reader = new FileReader();
		// Closure to capture the file information.
		reader.onload = (function(theFile) {
			return function(e) {
				// Render thumbnail.
				$('#img').css("background-image", "url(" + e.target.result + ")");
			};
		})(f);
		// Read in the image file as a data URL.
		reader.readAsDataURL(f);
	}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Comments

[Алексей Скляров]

лучше бы вы все на jsfiddle загружали

[Манучехр Жалолов]

ivasenkoartem Артем либо как не знаю сорян, бро тут у тебя код jQuery + Bootstrap загружай куда нибудь что бы другие тебе смогли помочь как это вырезался Алексей Скляров

[ivasenkoartem]

Алексей Скляров,
Вот вроде..
https://jsfiddle.net/aq9Laaew/43758/
Или может архив скинуть?