I am trying to create a circle progress bar, but I can not access the javascript variables, why?

Question

I am working with tailwind.css in my Django HTML template. I am trying to recreate this circle https://tailwindcomponents.com/component/circular-progress-bar , but I am not rolling my screen, I am setting a static percentage based on a value from my view.

This average rate calculation does not matter, this is working in another part, it is just an example to show what I want to do in my radial bar.

class RatePage(TemplateView):

template_name = "tailwind/rate-page.html"

def get_context_data(self, **kwargs):

    context = super(RatePage, self).get_context_data(**kwargs)

    context['average_rate'] = 4.5

    return context

This is my HTML template.

<div class="flex flex-col">
  Score

  <svg class="w-20 h-20">
    <circle
      class="text-gray-300"
      stroke-width="5"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
    <circle
      class="text-blue-600"
      stroke-width="5"
      :stroke-dasharray="circumference"
      :stroke-dashoffset="circumference - percent / 100 * circumference"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
  </svg>
  <span class="absolute text-xl text-blue-700" x-text=30></span>
</div>

<script>
  let percent = rate;
  let circumference = 2 * Math.PI * 30;
</script>

I am trying to connect JavaScript with the rate value from view to make this calculus. But, everything I am getting is this:

But, I am trying to do it:

Any suggestion?

Answer 1

Ensure you are using the javascript content block

{% block javascripts %}{% endblock javascripts %}