Split number in javascript to display after and before decimal number in different font size

Question

I have a plan page to show to my customer which 3 plans for my Website product - Basic, Premium and VIP with all plans having monthly and yearly price.

I get the following value from backend for $products for USA and India where this product is available only in these 2 countries. So based on the country selected, I display the prices for my customer

Products returned for USA:

$products = [
          {
            monthly_price => "\$5.95”,
            yearly_price => "\$40.95",
            type => "basic"
          },
          {
            monthly_price => "\$10.95”,
            yearly_price => "\$80.95",
            type => "premium"
          },
          {
            monthly_price => "\$15.95”,
            yearly_price => "\$120.95",
            type => "vip"
          },
]

Products returned for IND:

$products = [
          {
            monthly_price => "\₹200.55",
            yearly_price => "\₹2500.55”,
            type => "basic"
          },
          {
            monthly_price => "\₹400.55",
            yearly_price => "\₹5000.55”,
            type => "premium"
          },
          {
            monthly_price => "\₹800.55",
            yearly_price => "\₹1000.55”,
            type => "vip"
          },
        ];

Following is the CSS file:

.main-price {
   font-size: 45px;
}

.decimal-price {
   font-size: 15px;
}

.term {
   font-size: 15px;
}

Main and decimal price has different CSS where I have used the class below. So I split after the dot (.) which will be 2 values. So I do it as.1 and.2

Following is the HTML file:

[% FOR price in products -%]
    [% monthly_price = price.monthly_price.split('.') %]
    [% yearly_price = price.yearly_price.split('.') %]
    <h1>[% price.type.uc %]</h1>
    <p>
        <span class="main-price">[% monthly_price.1 %]</span>
        <span class="decimal-price">[% monthly_price.2 %]</span>
        <span class="term">per month</span>
    </p>
    <p>
        <span class="main-price">[% yearly_price.1 %]</span>
        <span class="decimal-price">[% yearly_price.2 %]</span>
        <span class="term">per year</span>
    </p>
[%- END %]

I tried the following 3 different solutions also, but it dint work:

• Solution 1:

[% monthly_price.1 %]

• Solution 2:

[% monthly_price[0] %]

• Solution 3:

[% monthly_price.first %]

Expected:

• I want to display main price in 45px font size and decimal price/term in 15px font size.

Issue:

• Main price and decimal price is not getting displayed

Can anyone please help where I am going wrong?

Thanks in advance

Answer 1

I'm checking in javascript. It's working fine. But your code is not pure javascript. So, I don't aware of this kind of code.

Check there split() support or not.

 <script> var products = [ { monthly_price: "\$5.95", yearly_price: "\$40.95", type: "basic" }, { monthly_price: "\$10.95", yearly_price: "\$80.95", type: "premium" }, { monthly_price: "\$15.95", yearly_price: "\$120.95", type: "vip" }, ] products.forEach(price => { var res=price.monthly_price.split('.'); console.log(res[0]); console.log(res[1]); }); </script>