Здравствуйте всем.
Работаю над пет-проектом - конвертер величин. Статические данные (масса, скорость, расстояние и.т.д.) и динамические (курсы валют по запросам к бесплатным API). Пока все в работе.
Дано n-ое кол-во типов величин. При нажатии на каждое, в ul-списки подгружаются списки величин, которые принадлежат к соответствующему типу величины.
Это разметка блока с конвертацией.
<div class="converter">
<div class="converter__block converter__initial">
<h3 class="h3">Исходная величина</h3>
<div class="converter-box">
<ul class="converter-box__list">
<li class="converter-box__list-item current-value">Выберите тип значения</li>
<ul class="dropdown-list hidden">
<!--Список подгружается из объекта categories-->
</ul>
</ul>
<div class="converter-box__input-block">
<input type="number" value="" placeholder="Введите..." class="converter-box__input">
</div>
</div>
</div>
<div class="converter__arrow">
<img src="assets/img/arrow.svg" alt="" class="svg-icon arrow-img">
</div>
<div class="converter__block converter__final">
<h3 class="h3">Во что преобразуем?</h3>
<div class="converter-box">
<ul class="converter-box__list">
<li class="converter-box__list-item current-value">Выберите тип значения</li>
<ul class="dropdown-list hidden">
<!--Список подгружается из объекта categories-->
</ul>
</ul>
<div class="converter-box__input-block">
<input type="number" value="" placeholder="Введите..." class="converter-box__input">
</div>
</div>
</div>
</div>
Есть общий объект categories. Вот один из объектов этого главного объекта (остальные точно такие же).
mass: {
title: 'Масса',
element: null,
data: {
ton: {
name: "Тонна",
value: 1000
},
centner: {
name: "Центнер",
value: 100
},
kg: {
name: "Килограмм",
value: 1
},
g: {
name: "Грамм",
value: 0.001
},
mg: {
name: "Миллиграмм",
value: 0.000001
},
carat: {
name: "Карат",
value: 20
}
},
Вопрос - как реализовать логику конвертера, именно момент ввода значения в input, подхватывания нужного элемента объекта и просчета?
У меня не хватает практического опыта, чтобы написать работающую логику конвертера. Предполагаю, что логика выглядит примерно так:
- в первом Выберите тип значения висит текущая величина, со своим value
- во втором Выберите тип значения висит величина, в которую нужно конвертировать первое значение, также со своим value
- когда значение вводится в input, то вычисление происходит по формуле input * (value-2 / value-1) = output. Если пользователь вводит значение во второй input, то все зеркально
Это примерная картинка. Есть основные вопросы:
- для этого обязательно в каждом типе величин должна быть одна эталонная величина с value = 1? (а остальные уже пляшут от нее)
- как правильно реализуется момент "подхватывания значения" нужным input'ом? (когда выбираешь нужную величину из списка, перед тем как вводить значение)
Выглядит примерно вот так.
Буду признателен за помощь.
