19.02.2020 - Home (copy)

	<!DOCTYPE html>
	<html lang="en">
	<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>კალკულატორი</title>
	<link rel="stylesheet" href="css/style.css?w=2">
	<link rel="stylesheet" href="//cdn.web-fonts.ge/fonts/bpg-mrgvlovani-caps/css/bpg-mrgvlovani-caps.min.css?v=2">

	<style>

	body {
	display: flex;
	justify-content: center;
	color: white;


	}

	h3, p, sup ,input{
	font-family: "BPG Mrgvlovani Caps", sans-serif !important;

	}


	.calculator-box {
	background: #004148;
	padding: 20px;
	display: inline-block;
	position: relative;
	}
	.section-inner-1,
	.section-inner-4 {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	}

	.section-inner-1 .radio {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row;
	align-items: center;
	}

	.section-inner-2 input,
	.section-inner-3 input {
	padding: 10px;
	border: none !important;
	}

	.section-inner-4 button {
	background: white;
	color: rgba(0,0,0,0.7);
	padding: 10px 15px;
	border: none !important;
	font-weight: bolder;
	}

	sup {
	font-size: 13px;
	}
	</style>

	</head>
	<body>
	<div class="calculator-box">
	<h3>აუზის ტიპი:</h3>
	<div class="section-inner-1">
	<div class="radio">
	<input type="radio" name="optradio" name="vehicle1" value="first" checked>
	<img src="img/skimeruli.png" alt="">
	<p>გადადინებით</p>
	</div>
	<div class="radio">
	<input type="radio" name="optradio" name="vehicle2" value="2">
	<img src="img/gamdinare.png" alt="">
	<p>სქიმერული</p>
	</div>
	</div>
	<h3>ზომები (მ <sup>2</sup> ):</h3>
	<div class="section-inner-2">
	<input type="text" class="form-control" placeholder="სიგრძე" aria-describedby="basic-addon1" name="block1">
	<b>X</b>
	<input type="text" class="form-control" placeholder="სიგანე" aria-describedby="basic-addon1" name="block2">
	</div>
	<br>
	<div class="section-inner-3">
	<input type="text" class="form-control" placeholder="სიღრმე Min" aria-describedby="basic-addon1" name="block3">
	<b>X</b>
	<input type="text" class="form-control" placeholder="სიღრმე Max" aria-describedby="basic-addon1" name="block4">
	</div>
	<br>
	<div class="section-inner-4">
	<button type="button" class="btn" onclick="toloba();">შედეგი</button>
	<p id="sub-pool"></p>
	</div>
	</div>
	<script>
	var input = document.querySelectorAll('input');

	function toloba() {

	// console.log(input);
	vehicle1 = 630;
	vehicle2 = 525;

	var block1 = input[2].value;
	var block2 = input[3].value;
	var block3 = input[4].value;
	var block4 = input[5].value;

	// ab
	var ab = block1 * block2;

	// cda
	var sub = (Number(block3) + Number(block4)) * block1;

	// abcda

	var toloba = vehicle1 * (Number(sub) + Number(ab));
	var toloba2 = vehicle2 * (Number(sub) + Number(ab));

	var selectedOption = document.querySelector('input[name="optradio"]:checked').value;

	if (selectedOption == 'first') {

	alert(toloba + ' ' + 'ლარი');

	} else {

	alert(toloba2 + ' ' + 'ლარი');
	}

	}
	</script>
	</body>
	</html>