Calc.js

Developer
Elena
Size
4,200 Kb
Views
8,096
  1. Calc.js Previews
  2. Calc.js HTML Codes
  3. Calc.js CSS Codes
  4. Calc.js JS Codes

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 Previews
IQ Test

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();	})();
});
Calc.js - Script Codes
Calc.js - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 4,200 Kb
Views 8,096
Do you need developer help for Calc.js?

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!

Elena (semenchenko) Script Codes
Name
Card
3d css cube
A Pen by Elena
Css piramide
Fish 2d game only CSS
Modal
Business card mockup
Walking skeleton only css
Responsive HTML Email template
PROCESS INFOGRAPHIC
Create amazing art & images 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!