Penalty Calculator

Developer
Томаш Хамлай
Size
5,771 Kb
Views
10,120
  1. Penalty Calculator Previews
  2. Penalty Calculator HTML Codes
  3. Penalty Calculator CSS Codes
  4. Penalty Calculator JS Codes

How do I make an penalty calculator?

What is a penalty calculator? How do you make a penalty calculator? This script and codes were developed by Томаш Хамлай on 11 November 2022, Friday.

Penalty Calculator Previews
IQ Test

Penalty Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Penalty Calculator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-controller="DemoCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp" style="max-width: 100%">	<md-content class="transculent" layout-padding="">	<div layout>	<form class="form-container" name="myOtherForm" flex layout="column">	<div layout layout-padding class="heading">	<h3 class="md-display-1 ctext">УЗНАЙТЕ РАЗМЕР НЕУСТОЙКИ ЗА СРЫВ СРОКА ПРЯМО СЕЙЧАС</h3>	</div>	<md-input-container class="md-block" md-no-float>	<ng-md-icon class="assignment" icon="assignment"></ng-md-icon>	<label class="md-headline rgb51 h26b req" for="area">Цена объекта по договору (А) руб.</label>	<input type="number" ng-model="price" min="0" max="99999999999999" id="p1" name="p1" placeholder="10000" required>	<div ng-messages="myOtherForm.p1.$error" role="alert" multiple>	<div ng-message="required" class="my-message">Впишите цену по договору (А)!</div>	<div ng-message="min" class="my-message">	Вводимое значение слишком мало.	</div>	<div ng-message="max" class="my-message">	Вводимое значение слишком велико.	</div>	</div>	</md-input-container>	<md-input-container class="md-block">	<label class="md-headline rgb51 h26b req">Срок передачи по договору (Б)</label>	<md-datepicker ng-model="myDate1" name="dateField" md-min-date="minDate1" md-max-date="maxDate1"></md-datepicker>	<div ng-messages="myOtherForm.dateField.$error">	<div ng-message="valid">Не похоже на дату!</div>	<div ng-message="required">Это необходимо для расчета!</div>	<div ng-message="mindate">Дата слишком далеко в прошлом!</div>	<div ng-message="maxdate">Дата слишком далеко в будующем!</div>	</div>	</md-input-container>	<md-input-container class="md-block">	<label class="md-headline rgb51 h26b req">Срок передачи по договору (C)</label>	<md-datepicker ng-model="myDate2" name="dateField" md-min-date="minDate2" md-max-date="maxDate2"></md-datepicker>	<div ng-messages="myOtherForm.dateField.$error">	<div ng-message="valid">Не похоже на дату!</div>	<div ng-message="required">Жто необходимо для расчета!</div>	<div ng-message="mindate">Дата слишком далеко в прошлом!</div>	<div ng-message="maxdate">Дата слишком далеко в будующем!</div>	</div>	</md-input-container>	<md-button ng-click="calculate()" class="md-raised md-warn only-btn">ХОЧУ УЗНАТЬ СКОЛЬКО МОЖНО ОТСУДИТЬ!</md-button>	</form>	</div>	<div layout="column" layout-padding class="heading">	<div layout>	<h3 class="md-display-1 ctext">РАЗМЕР КОМПЕНСАЦИИ, НА КОТОРУЮ МОЖНО РАССЧИТЫВАТЬ ПРИ СПОРЕ С ЗАСТРОЙЩИКОМ</h3>	</div>	<div layout>	<div flex class="padded">	<h4 class="md-headline"><strong>Неустойка за каждый день просрочки</strong></h4>	<p class="par500interlin">Неустойка в размере одной трехсотой ставки рефинансирования ЦБ РФ, действующей на день исполнения обязательств, от цены договора за каждый день просрочки (если дольщиком является гражданин, сумма возрастает вдвое)</p>	</div>	<div flex class="ctext">	<h4 class="md-headline">Количество дней просрочки:</h4>	<p class="delta">{{delta}}</p>	</div></div>	<div layout>	<div flex class="padded">	<h4 class="md-headline"><strong>Штраф в размере 50%</strong></h4>	<p class="par500interlin">Штраф, согласно Закону РФ "О защите прав потребителей" в размере 50% от суммы неустойки.</p>	</div>	<div flex class="ctext">	<h4 class="md-headline">Размер неустойки:</h4>	<p class="penalty">{{penalty}}</p>	</div></div>	<div layout>	<div flex class="padded">	<h4 class="md-headline"><strong>Компенсация судебных расходов</strong></h4>	<p class="par500interlin">Компенсация судебных расходов и за услуги юриста</p>	</div>	<div flex class="ctext">	<h4 class="md-headline">Размер штрафа:</h4>	<p class="fine">{{fine}}</p>	</div></div>	<div layout>	<div flex class="padded">	<h4 class="md-headline"><strong>Компенсация морального вреда</strong></h4>	<p class="par500interlin">В размере 10% от иска</p>	</div>	<div flex class="ctext">	<h4 class="md-headline">Размер штрафа:</h4>	<p class="moral">{{moral}}</p>	</div></div>	</div>	<div class="ctext h26b"><p>Итого можно взыскать: </p><p class="result">{{result}}</p></div></md-content>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/locale/ru.js'></script> <script src="js/index.js"></script>
</body>
</html>

Penalty Calculator - Script Codes CSS Codes

html,
body * {	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;	color: rgb(51, 51, 51);
}
.rgb51 {	color: rgb(51,51,51) !important;
}
.h26b {	font-size: 26px !important;	font-weight: 700;
}
.h26b.req::after {	content: "*";	display: inline-block;	position: relative;	font-size: 26px !important;	color: red !important;
}
.padded {	padding-left: 54px;	background-repeat: no-repeat;	background-image: url('http://u8.platformalp.ru/8d356009dfb8b3515231b36e9f7cd004/90bc7979dc6d29d065dbde9e7d9cef98.png');
}
md-input-container > ng-md-icon {	position: absolute;	top: 5px;	left: 15px;
}
.assignment {	fill: rgba(0, 0, 0, 0.541176);
}
.penalty,
.moral,
.fine,
.result,
.delta {	color: red;	font-size: 28px;
}
.penalty::after,
.moral::after,
.fine::after,
.result::after {	content: " рублей";	font-size: 24px;	font-weight: 300;	color: rgb(51,51,51);
}
.md-calendar-day-header th {	vertical-align: middle;
}
.delta::after {	content: " дней";	font-size: 24px;	font-weight: 300;	color: rgb(51,51,51);
}
html,
body,
.datepickerdemoBasicUsage,
.transculent {	background: transparent;
}
/* body { background: red} */
md-input-container > ng-md-icon + label,
md-input-container > ng-md-icon + * + input {	margin-left: 64px;	width: calc(100% - 64px) !important;
}
.only-btn:hover {	background-color: rgb(223, 61, 39) ; border-color: rgb(162, 41, 24) ; color: rgb(255, 255, 255);
}
.ctext {	text-align: center;
}
.par500interlin {	line-height: 1.4;	font-size: 110%;	font-weight: 300;
}
.form-container.ng-pristine.ng-valid .only-btn,
.form-container.ng-pristine .only-btn,
.form-container.ng-dirty .only-btn,
.form-container.ng-invalid .only-btn,
.form-container.ng-pristine .only-btn { pointer-events: none ; color: rgb(160, 160, 160); background-color: #ccc;	border-color: rgb(160, 160, 160);
}
.form-container.ng-valid .only-btn { pointer-events: all;
}
.only-btn,
.form-container.ng-valid .only-btn{	height: 62px;	border-top-left-radius: 5px;	border-top-right-radius: 5px;	border-bottom-right-radius: 5px;	border-bottom-left-radius: 5px;	border-style: solid;	border-top-width: 1px;	border-bottom-width: 3px;	border-left-width: 1px;	border-right-width: 0px;	border-color: rgb(202, 51, 30);	padding-top: 14px;	padding-bottom: 14px;	padding-left: 34px;	padding-right: 34px;	font-size: 21px;	font-weight: bold;	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25) ;	background-color: rgb(223, 61, 39) ;	color: rgb(255, 255, 255) !important;
}
.heading {	margin-bottom: 30px;
}

Penalty Calculator - Script Codes JS Codes

// script.js
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'ngMdIcons', 'material.svgAssetsCache']);
angular.module('MyApp').controller('DemoCtrl', function($scope) {	$scope.result = 0;	$scope.myDate1 = new Date();	$scope.myDate2 = new Date();	$scope.delta = 0;	$scope.penalty = 0;	$scope.fine = 0;	$scope.moral = 0;	$scope.minDate1 = new Date(	$scope.myDate1.getFullYear() - 20,	$scope.myDate1.getMonth(),	$scope.myDate1.getDate());	$scope.maxDate1 = new Date(	$scope.myDate1.getFullYear() + 20,	$scope.myDate1.getMonth(),	$scope.myDate1.getDate());	$scope.minDate2 = new Date(	$scope.myDate2.getFullYear() - 20,	$scope.myDate2.getMonth(),	$scope.myDate2.getDate());	$scope.maxDate2 = new Date(	$scope.myDate2.getFullYear() + 20,	$scope.myDate2.getMonth(),	$scope.myDate2.getDate());	$scope.calculate = function() {	function mydiff(date1, date2, interval) {	console.log(date1);	console.log(date2);	console.log(interval);	var second = 1000,	minute = second * 60,	hour = minute * 60,	day = hour * 24,	week = day * 7;	date1 = new Date(date1);	date2 = new Date(date2);	var timediff = date2 - date1;	if (isNaN(timediff)) return NaN;	switch (interval) {	case "years":	return date2.getFullYear() - date1.getFullYear();	case "months":	return (	(date2.getFullYear() * 12 + date2.getMonth()) -	(date1.getFullYear() * 12 + date1.getMonth())	);	case "weeks":	return Math.floor(timediff / week);	case "days":	return Math.floor(timediff / day);	case "hours":	return Math.floor(timediff / hour);	case "minutes":	return Math.floor(timediff / minute);	case "seconds":	return Math.floor(timediff / second);	default:	return undefined;	}	}	price = parseFloat($scope.price);	$scope.delta = mydiff($scope.myDate1, $scope.myDate2, 'days');	console.log($scope.delta);	$scope.penalty = (price * parseFloat($scope.delta) * 0.1 / 150).toFixed(2);	$scope.fine = (parseFloat($scope.penalty) / 2).toFixed(2);	$scope.moral = ((parseFloat($scope.penalty) + parseFloat($scope.fine)) * 0.1).toFixed(2);	$scope.result = (40000 + parseFloat($scope.penalty) + parseFloat($scope.fine) + parseFloat($scope.moral)).toFixed(2);	;	}
})
.config(function($mdDateLocaleProvider) {	$mdDateLocaleProvider.months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',	'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'	];	$mdDateLocaleProvider.shortMonths = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн',	'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'	];	$mdDateLocaleProvider.days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Субота'];	$mdDateLocaleProvider.shortDays = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];	$mdDateLocaleProvider.firstDayOfWeek = 1;	// Optional.	//$mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13,14,15,16,17,18,19,	// 20,21,22,23,24,25,26,27,28,29,30,31];	// In addition to date display, date components also need localized messages	// for aria-labels for screen-reader users.	$mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {	return 'Неделя ' + weekNumber;	};
//	$mdDateLocaleProvider.formatDate = function(date) {
//	var day = date.getDate();
//	var monthIndex = date.getMonth();
//	var year = date.getFullYear();
//	return day + '.' + (monthIndex + 1) + '.' + year;
//	};	$mdDateLocaleProvider.formatDate = function(date) { return date ? moment(date).format('DD.MM.YYYY') : '';
};
$mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'DD.MM.YYYY', true); return m.isValid() ? m.toDate() : new Date(NaN);
};	$mdDateLocaleProvider.msgCalendar = 'Календарь';	$mdDateLocaleProvider.msgOpenCalendar = 'Открыть календарь';
});
Penalty Calculator - Script Codes
Penalty Calculator - Script Codes
Home Page Home
Developer Томаш Хамлай
Username TomashKhamlai
Uploaded November 11, 2022
Rating 3
Size 5,771 Kb
Views 10,120
Do you need developer help for Penalty Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Томаш Хамлай (TomashKhamlai) Script Codes
Name
SVG Clipping Stretching
Jplayer
Firefox SVG Example
Audiolib.js
SVG Mascing Stretching AR rounded
Calc.js
Calculator
SVG-button Responsive
C
Nesting countersEdit
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!