как через js jQuery сделать индикаторы, которые правильно показывали б температуру и менялись в зависимости от условия

Я хочу создать эти индикаторы голубые на css И вообще, как сделать так чтобы они работали в зависимости от того какая погода? Чтобы менялся размер индикатора. Это json ? Помогите пожалуйста

Ответ

Если особо не напрягаться приблизительный концепт:
$('.indicator').each(function() { var currentHeight = $(this).height(); var newHeight = $(this).data('current'); //здесь происходит просчет заданной цифры температуры var totalHeight = (currentHeight + newHeight) * 10; //Умножение добавляем для красоты полоски $(this).css('height', totalHeight); $(this).append('

').find(".curren-temperature").text(totalHeight / 10) //при выводе температуры убираем умножение, которое добавляло красоту. }); * { box-sizing: border-box; } html, body { height: 100%; } .wrapper { height: 100%; max-width: 800px; margin: auto; background: #000217; } .indicator-list { display: flex; justify-content: space-around; list-style: none; padding: 0; margin: auto; color: #fff; } .indicator { background: #00BFF5; width: 30px; height: 0; margin: 10px; position: relative; border-radius: 20px; } .curren-temperature { position: absolute; bottom: -20px; width: 50px; }