Question

I'm trying to build an app to track weight loss progress. I am learning and decided to build an app myself after following a few tutorials.

What I need is to build a bootstrap progress bar I need to have 3 inputs original weight, current weight, and weight goal. What I need to calculate is the current percentage based on the 3 values and I can't figure out how to go about it. I've been looking for hours. This is what I have so far

<div class="card-body">
       <% @weights.last(1).each do |weight| %>
       <% weight_ptogress = (weight.wgt.to_i-200) * 100 %>

       <div class="progress">

       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<%= weight_ptogress %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= weight_ptogress.to_i %>">
        <%= weight_ptogress %>
        <% end %>
        </div>
       </div>
   </div>

Answer 1

I think the output will look like the following (numbers are only example):

|  ---- progress ----> |
start (50lbs)          goal (40lbs)

First you need the amount of weight difference from the start point:

progress = Abs(start - current)

Then you will need the base to calculate percentages:

base = Abs(start - goal)

Finally, you can calculate the percentage based on progress and base:

percent = progress / base * 100

This (percent) is the width of your progress bar.

rails bootstrap progress bar with multiple inputs

1 个答案: