Calc.js
How do I make an calc.js?
What is a calc.js? How do you make a calc.js? This script and codes were developed by Elena on 17 December 2022, Saturday.
Calc.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>calc.js</title> <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .form { padding: 3rem 0;
}
.c-select { width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="row"> <div class="col-md-8"> <form class="form"> <div class="form-group"> <select class="c-select" id="type__select_1"> <option selected value="0">Выбрать: </option> <option value="10">Вариант + 10</option> <option value="20">Вариант + 20</option> <option value="30">Вариант + 30</option> </select> </div>
<!-- Input Radio --> <div class="form-group"> <label class="c-input c-radio"> <input id="radio-1" checked name="radio" type="radio" value="5"> <span class="c-indicator"></span> 5 </label> <label class="c-input c-radio"> <input id="radio-2" name="radio" type="radio" value="15"> <span class="c-indicator"></span> 15 </label> <label class="c-input c-radio"> <input id="radio-3" name="radio" type="radio" value="25"> <span class="c-indicator"></span> 25 </label> </div>
<!-- Input Checkbox --> <div class="form-group"> <div class="checkbox"> Чекбокс +20: <label for="type__check_1" class="c-input c-checkbox"> <input type="checkbox" id="type__check_1" name="check-1" value="20" > <span class="c-indicator"></span> </label> </div> </div> <div class="form-group"> <label for="count_1">Кол-во:</label> <input type="text" id="count_1" value="1" name="input-1" class="form-control"/> </div> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from" > </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="100"></div> </div> </div> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from" > </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="300"></div> </div> </div> <div class="form-group"> <input type="hidden" name="total" id="totals-input" /> <div class="list-group-item list-group-item-success">Total: <span id="totals" >0</span></div> </div> <div class="rom-group"> <button type="submit" class="btn btn-success">отправить</button> </div> </form> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js'></script> <script src="js/index.js"></script>
</body>
</html>
Calc.js - Script Codes CSS Codes
.form { padding: 3rem 0;
}
.c-select { width: 100%;
}
Calc.js - Script Codes JS Codes
'use strict';
$(document).ready(function() { console.log('Hello, world!'); // ---------------------------------- Range slider jq ui $('.filter__slider-element').each(function() { var $this = $(this), container = $this.closest('.filter__slider'), min = parseInt($this.data('min')), max = parseInt($this.data('max')), from = container.find('.filter__slider-input-from'), to = container.find('.filter__slider-input-to'); from.change(function() { $this.slider('values', 0, from.val()); }); to.change(function() { $this.slider('values', 1, to.val()); }); $this.slider({ range: true, min: min, max: max, values: [min, max], slide: function(event, ui) { // При каждом перемещении var values = $(this).slider('option', 'values'); from.val(ui.values[0]); to.val(ui.values[1]); getDif(ui.values); }, change: function(event, ui) { // В конце перетаскивания console.log('change'); getDif(ui.values); calcOne(); }, create: function() { // При создании виджета var values = $(this).slider('option', 'values'); from.val(values[0]); to.val(values[1]); // getDif(); }, stop: function(event, ui) { // При завершении перетаскивания getDif(ui.values); } }); }); function getDif(values) { var total = 0; $('.filter__slider-element').each(function() { // Получение значений range слайдера var values = $(this).slider("option", "values"); var dif = values[1] - values[0]; total += dif; }); //$("#totals").text(total); return total; } function calcOne() { var total = 0; var range = getDif(); // Получаем значение range slider var count_1 = $("#count_1"), //ссылка на input type__select_1 = $("#type__select_1"), //ссылка на select type__radio = $('input:radio'), //ссылка на радиобокс type__check_1 = $("#type__check_1"); //ссылка на чекбокс var input_val_1 = parseInt(count_1.val()), select_val_1 = parseInt($("#type__select_1 option:selected").val()), check_val_1 = (type__check_1.is( ':checked' ) === true) ? parseInt(type__check_1.val()) : 0, radio_val_1 = parseInt($('input[type="radio"]:checked').val()); total += select_val_1; total += radio_val_1; total += check_val_1; total += parseInt(range); total = total*input_val_1; $("#totals").text(total); $('#totals-input').val(total); console.log(select_val_1); } $('select, input').change(function(){ calcOne(); }); // Отправка формы\результата //Send on email (function(){ var app = { init: function(){ this.setUpListeners(); }, setUpListeners: function(){ $(document).on('submit', 'form', this.submitForm); $(document).on('keyup', 'input', this.removeError); }, submitForm: function(e){ e.preventDefault(); var form = $(this), btnSubmit = form.find('[type="submit"]'); if(app.validateForm(form) === false) return false; btnSubmit.attr('disabled', 'disabled'); var str = form.serialize(); // str += $('#totals').text(); console.log(str); $.ajax({ url: 'contacts.php', type: 'post', data: str }).done(function(msg){ if(msg === "OK"){ var res = "<div class=\"alert alert-success\" role=\"alert\"> <strong>Well done!</strong> You successfully read this important alert message. </div>"; $('.res-content').html(res); console.log('ok'); }else { $('.res-content').html(msg); } }).always(function(){ btnSubmit.removeAttr('disabled', ''); }); }, validateForm: function(form){ var inputs = form.find('input'), valid = true; $.each(inputs, function(i, val){ var input = $(val), val = input.val(), formGroup = input.closest('.form-group'); if(val.length === 0){ formGroup.addClass('has-danger'); valid = false; } else { formGroup.addClass('has-success').removeClass('has-danger'); } }); return valid; }, removeError: function(){ var $this = $(this), formGroup = $this.closest('.form-group'); formGroup.removeClass('has-danger'); } } app.init(); })();
});
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 3 |
Size | 4,200 Kb |
Views | 8,096 |
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!
Name | Size |
3d css cube | 4,578 Kb |
Walking skeleton only css | 9,064 Kb |
Modal | 9,533 Kb |
Card | 3,220 Kb |
A Pen by Elena | 3,573 Kb |
Fish 2d game only CSS | 9,489 Kb |
Animation countdown | 3,081 Kb |
Slider CSS Only | 8,018 Kb |
Business card mockup | 4,866 Kb |
VideoBg | 2,592 Kb |
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!
Name | Username | Size |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Shopping List | Markmurray | 6,015 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!