Как сделать такой калькулятор?

Question

[MegaPuxapb]

При выборе селекта/инпута(если не пустой) загорается +одна секция батареи.
Ченж селекта/инпута может быть в произвольном порядке.
Думаю нужно посчитать выбранные селекты/инпуты(не пустые). и исходя из этого красить секции (красить умею, считать нет.).
Если ход мыслей правильный, подскажите как это сделать?) Если нет, направьте плз куда копать.

Comments

[Николай Чуприк]

Каждая секция радиатора, я надеюсь, это у вас отдельная картинка? Дайте html сюда, т.к. сделать то, что вы хотите, несложно, но зависит от того, как именно реализованы радиаторы.

[MegaPuxapb]

Николай Чуприк,
Он не свёрстан ещё.
секции да, отдельной картинкой. картинки если что, менять умею).
Не знаю как посчитать "накликаное".

[alex-1917]

MegaPuxapb, ну дыг сверстайте и тут дайте код.
судя по тематике, калькулятор делается для галочки, им будут пользоваться хорошо если 5 % посетителей, тут больше пользы для СЕО. поэтому его надо делать максимально просто и без возможности расширения- этого все равно не будет))) Поэтому забудьте про новомодные штучки типа svg, как тут ниже советуют фанаты svg - это сильно тормозит планшеты аля-яблоко. Делайте все на кусках картинки и банальном джиквеи. И поэтому нужна ваша верстка, так как привязка скрипта будет напрямую к верстке...
Или для вас еще и сверстать надо?)))
Не дай бог еще щас VUE.js посоветуют)))

[Николай Чуприк]

alex-1917, vue конечно первым делом в голову приходит, но приходится себе сдерживать. :) Делать некраcиво и тормознуто на jquery.

[Yustas Alexu]

Николай Чуприк, кому-то вью, а кому-то реакт приходит )

Answer 1

[Максим Тимофеев]

Картинку делаем в svg. По смене данных в форме запускаем js функцию, которая производит расчеты (тут только Вам ведомо при каких значениях что меняется) и добавляет панели или красит их, что там Вам надо.

Comments

[Николай Чуприк]

Да ну на... Я конечно понимаю, что svg, это высокий "штиль", а не какие-то там две png картинки. Но зачем... Тем более MegaPuxapb, похоже, начинающий. Успеет с svg разобраться когда-нибудь.

[Максим Тимофеев]

Николай Чуприк, А что там сложного? Берем inkscape и делаем svg из двух картинок. И это не высокий стиль. Это оптимальное решение.

Answer 2

[Николай Чуприк]

<select name='house_type'>
    <option value='0'>каркасный</option>
   .... 
</select>
<input name='square'>

<div id='battery'>  //  Батарея из трёх секций
   <img id='hot' src='hot_section.png'>
   <img id='hot' src='hot_section.png'>
   <img id='hot' src='hot_section.png'>
   <img id='cold' src='cold_section.png'>
   <img id='cold' src='cold_section.png'>
   <img id='cold' src='cold_section.png'>
</div>

$( '[name=house_type], [name=square]' ).on( 'change', function() {
    var p = calcPower( $( '[name=house_type]' ).value, $( '[name=square]' ).value )  //  Вычисление количества включённых секций
    showPowerLevel( p );
});

function showPowerLevel( p )	{
    $( '#hot:lt( '+p+' )' ).show();
    $( '#hot:gt( '+p+'-1 )' ).hide();
    $( '#cold:lt( '+p+' )' ).hide();
    $( '#cold:gt( '+p+'-1 )' ).show();
}

showPowerLevel( 0 );

Comments

[alex-1917]

двумя картинками можно было обойтись... но в принципе и так сойдет! калькуль все равно одноразовый

[Николай Чуприк]

alex-1917, считаю, что в этом случае лучше сразу накопипастить столько картинок, сколько надо, чем ворочать DOM, вставляя-убавляя картинки. Но если батарея может быть переменной длины и вида, то да, будем вставлять.

[MegaPuxapb]

на calcPower ругается (Uncaught ReferenceError: calcPower is not defined).

[Николай Чуприк]

MegaPuxapb, ну так етить!!! Нет такой функции, напишите сами, я же не знаю, как там вычисляется количество задействованных секций радиатора в зависимости от типа дома и его площади. Поставьте пока "заглушку", которая выбирает случайное число от 1 до 3:

function calcPower()  {
    return Math.floor( Math.random() * 2.99 ) + 1;
}

[MegaPuxapb]

Николай Чуприк,
1 выбранный селект/инпут = "загорается" +1 секция. не зависимо от того, что там выбрали.
7 селект/инпутов = 7 секций батареи.
Как посчитать в скольки селект/инпутов были ченжи?)

[Николай Чуприк]

Что значит "выбранный" select/input? Фокус ввода, так он к каждый момент времени один и на на одном каком-то поле.