Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<div class="body-container">
  <h1>iwocaPay payment calculator</h1>
  <h3>What's the value of your invoice? (£)</h3><br />
  <div class="container">
    <div class="amount">
      <form name=amount>
    <input value=7500 type = "range" min="150" max="15000" step="50"  id="amount" oninput="rangevalue.value=value" onchange="feeCalculate(this.value, 'amount')"/>        
    <output id="rangevalue">7500</output>
      </form>
    </div>
  </div>
  

  <table>
    <tr>
      <td><b>Your customer pays 3 monthly payments of</b></td>
      <td>£<span id="payment">2587.35</span></td>
      <td><b>including</b></td>
      <td>£<span id="interest">262.08</span></td>
      <td><b>total interest</b></td>
    </tr>
  </table>
  <table>
    
    <tr>
      <td><b>You pay</b></td>
      <td>£<span id="sellerFee">225.00</span></td>
    </tr>
  </table>
  <br />
    <p>Move the slider to see an estimate of how your invoice could break down with iwocaPay.
  </p>
  <p>
It calculates your customer's monthly payment amount and how much interest they'll pay if they take the full 90 days at a representative rate of 3.33% per month, with the first 30 days free. It's just an estimate because your customer's interest rate is based on their business.
If you've got a question or want a bespoke payment plan, send us an email at <a href="mailto:pay@iwoca.co.uk">pay@iwoca.co.uk</a>.
  </p>
</div>
              
            
!

CSS

              
                body {
    background-color: #F6F9FB;
}

.body-container {
    padding: 50px 50px 50px;
    max-width: 900px;
    margin: auto;
    font-family: 'Mulish', sans-serif;
    background-color: #F6F9FB;
}
h1 {
    color: #fb534a;
    padding: 0;
    margin: 0;
    user-select: none;
    cursor: default;
    font-family: 'Mulish', sans-serif;
    padding-bottom: 5px;
}

p {
    color: lighten($bg, 50%);
    text-align: left;
    margin: 0.5em 1em;
    font-weight: 300;
    font-size: 1.3em;
}
a {
  color: #fb534a;
}
.container {
  display: flex;
  max-width: 750px;
  min-height: 100px;
  margin: auto;
  text-alignt: center;
}

.amount {
  width: 100%;
}

/* track */
input[type="range"] {
  -webkit-appearance: none !important;
  width: 100%;
  height: 1px;
  background-color: #ff5252;
  border: none;
  border-radius: 10px;
  margin: auto;
  transition: all 400ms;
  outline:none;
  padding: 0;
  margin: 0;
}
input[type="range"]::-moz-range-track { 
  width: 100%;
  height: 1px;
  background-color: #ff5252;
  border: none;
  border-radius: 10px;
  margin: auto;
  transition: all 400ms;
  outline:none;
  padding: 0;
  margin: 0;
}

/* thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  transform:scale(0.75);
  width: 20px;
  height: 20px;
  border: none;
  background-color: #ff5252;
  border-radius: 40px; 
  box-shadow: 0px 0px 0px green;
  transition: all 400ms;
  outline:none
}
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none !important;
  transform:scale(0.75);
  width: 20px;
  height: 20px;
  border: none;
  background-color: #ff5252;
  border-radius: 30px;
  box-shadow: 0px 0px 0px green;
  transition: all 400ms;
  outline:none
}

/* thumb hover */
input[type="range"]::-webkit-slider-thumb:hover {  
  transform:scale(0.85);
}
input[type="range"]::-moz-range-thumb:hover{
  transform:scale(0.85);
}

/* thumb active */
input[type="range"]::-webkit-slider-thumb:active {
  transform:scale(1);
}
input[type="range"]::-moz-range-thumb:active{
  transform:scale(1);
}

#rangevalue {
  text-align: center;
  font-family: "Mulish", sans-serif;
  font-size: 18px;
  display: block;
  margin: auto;
  padding: 10px 0px;
  width: 100%;
  color: #fb534a;
}
              
            
!

JS

              
                const VALS = `150,51.74,5.242283907
200,68.99,6.989382493
250,86.24,8.736481079
300,103.49,10.48357967
350,120.74,12.23067825
400,137.99,13.97777684
450,155.24,15.72487542
500,172.49,17.47197401
550,189.73,19.22006074
600,206.98,20.96715933
650,224.23,22.71425792
700,241.48,24.4613565
750,258.73,26.20845509
800,275.98,27.95555368
850,293.23,29.70265226
900,310.48,31.44975085
950,327.73,33.19684943
1000,344.98,34.94394802
1050,362.23,36.69104661
1100,379.47,38.43913334
1150,396.72,40.18623193
1200,413.97,41.93333051
1250,431.22,43.6804291
1300,448.47,45.42752769
1350,465.72,47.17462627
1400,482.97,48.92172486
1450,500.22,50.66882344
1500,517.47,52.41592203
1550,534.72,54.16302062
1600,551.97,55.9101192
1650,569.21,57.65820594
1700,586.46,59.40530452
1750,603.71,61.15240311
1800,620.96,62.8995017
1850,638.21,64.64660028
1900,655.46,66.39369887
1950,672.71,68.14079745
2000,689.96,69.88789604
2050,707.21,71.63499463
2100,724.46,73.38209321
2150,741.7,75.13017995
2200,758.95,76.87727853
2250,776.2,78.62437712
2300,793.45,80.37147571
2350,810.7,82.11857429
2400,827.95,83.86567288
2450,845.2,85.61277146
2500,862.45,87.35987005
2550,879.7,89.10696864
2600,896.95,90.85406722
2650,914.2,92.60116581
2700,931.44,94.34925254
2750,948.69,96.09635113
2800,965.94,97.84344972
2850,983.19,99.5905483
2900,1000.44,101.3376469
2950,1017.69,103.0847455
3000,1034.94,104.8318441
3050,1052.19,106.5789426
3100,1069.44,108.3260412
3150,1086.69,110.0731398
3200,1103.94,111.8202384
3250,1121.18,113.5683251
3300,1138.43,115.3154237
3350,1155.68,117.0625223
3400,1172.93,118.8096209
3450,1190.18,120.5567195
3500,1207.43,122.3038181
3550,1224.68,124.0509167
3600,1241.93,125.7980152
3650,1259.18,127.5451138
3700,1276.43,129.2922124
3750,1293.67,131.0402992
3800,1310.92,132.7873977
3850,1328.17,134.5344963
3900,1345.42,136.2815949
3950,1362.67,138.0286935
4000,1379.92,139.7757921
4050,1397.17,141.5228907
4100,1414.42,143.2699893
4150,1431.67,145.0170878
4200,1448.92,146.7641864
4250,1466.17,148.511285
4300,1483.41,150.2593717
4350,1500.66,152.0064703
4400,1517.91,153.7535689
4450,1535.16,155.5006675
4500,1552.41,157.2477661
4550,1569.66,158.9948647
4600,1586.91,160.7419633
4650,1604.16,162.4890619
4700,1621.41,164.2361604
4750,1638.66,165.983259
4800,1655.91,167.7303576
4850,1673.15,169.4784443
4900,1690.4,171.2255429
4950,1707.65,172.9726415
5000,1724.9,174.7197401
5050,1742.15,176.4668387
5100,1759.4,178.2139373
5150,1776.65,179.9610359
5200,1793.9,181.7081344
5250,1811.15,183.455233
5300,1828.4,185.2023316
5350,1845.64,186.9504184
5400,1862.89,188.6975169
5450,1880.14,190.4446155
5500,1897.39,192.1917141
5550,1914.64,193.9388127
5600,1931.89,195.6859113
5650,1949.14,197.4330099
5700,1966.39,199.1801085
5750,1983.64,200.927207
5800,2000.89,202.6743056
5850,2018.14,204.4214042
5900,2035.38,206.169491
5950,2052.63,207.9165895
6000,2069.88,209.6636881
6050,2087.13,211.4107867
6100,2104.38,213.1578853
6150,2121.63,214.9049839
6200,2138.88,216.6520825
6250,2156.13,218.3991811
6300,2173.38,220.1462796
6350,2190.63,221.8933782
6400,2207.88,223.6404768
6450,2225.12,225.3885635
6500,2242.37,227.1356621
6550,2259.62,228.8827607
6600,2276.87,230.6298593
6650,2294.12,232.3769579
6700,2311.37,234.1240565
6750,2328.62,235.8711551
6800,2345.87,237.6182537
6850,2363.12,239.3653522
6900,2380.37,241.1124508
6950,2397.61,242.8605376
7000,2414.86,244.6076361
7050,2432.11,246.3547347
7100,2449.36,248.1018333
7150,2466.61,249.8489319
7200,2483.86,251.5960305
7250,2501.11,253.3431291
7300,2518.36,255.0902277
7350,2535.61,256.8373262
7400,2552.86,258.5844248
7450,2570.11,260.3315234
7500,2587.35,262.0796102
7550,2604.6,263.8267087
7600,2621.85,265.5738073
7650,2639.1,267.3209059
7700,2656.35,269.0680045
7750,2673.6,270.8151031
7800,2690.85,272.5622017
7850,2708.1,274.3093003
7900,2725.35,276.0563988
7950,2742.6,277.8034974
8000,2759.85,279.550596
8050,2777.09,281.2986827
8100,2794.34,283.0457813
8150,2811.59,284.7928799
8200,2828.84,286.5399785
8250,2846.09,288.2870771
8300,2863.34,290.0341757
8350,2880.59,291.7812743
8400,2897.84,293.5283729
8450,2915.09,295.2754714
8500,2932.34,297.02257
8550,2949.58,298.7706568
8600,2966.83,300.5177553
8650,2984.08,302.2648539
8700,3001.33,304.0119525
8750,3018.58,305.7590511
8800,3035.83,307.5061497
8850,3053.08,309.2532483
8900,3070.33,311.0003469
8950,3087.58,312.7474454
9000,3104.83,314.494544
9050,3122.08,316.2416426
9100,3139.32,317.9897294
9150,3156.57,319.7368279
9200,3173.82,321.4839265
9250,3191.07,323.2310251
9300,3208.32,324.9781237
9350,3225.57,326.7252223
9400,3242.82,328.4723209
9450,3260.07,330.2194195
9500,3277.32,331.966518
9550,3294.57,333.7136166
9600,3311.82,335.4607152
9650,3329.06,337.208802
9700,3346.31,338.9559005
9750,3363.56,340.7029991
9800,3380.81,342.4500977
9850,3398.06,344.1971963
9900,3415.31,345.9442949
9950,3432.56,347.6913935
10000,3449.81,349.4384921
10050,3467.06,351.1855906
10100,3484.31,352.9326892
10150,3501.55,354.680776
10200,3518.8,356.4278745
10250,3536.05,358.1749731
10300,3553.3,359.9220717
10350,3570.55,361.6691703
10400,3587.8,363.4162689
10450,3605.05,365.1633675
10500,3622.3,366.9104661
10550,3639.55,368.6575647
10600,3656.8,370.4046632
10650,3674.05,372.1517618
10700,3691.29,373.8998486
10750,3708.54,375.6469471
10800,3725.79,377.3940457
10850,3743.04,379.1411443
10900,3760.29,380.8882429
10950,3777.54,382.6353415
11000,3794.79,384.3824401
11050,3812.04,386.1295387
11100,3829.29,387.8766372
11150,3846.54,389.6237358
11200,3863.79,391.3708344
11250,3881.03,393.1189212
11300,3898.28,394.8660197
11350,3915.53,396.6131183
11400,3932.78,398.3602169
11450,3950.03,400.1073155
11500,3967.28,401.8544141
11550,3984.53,403.6015127
11600,4001.78,405.3486113
11650,4019.03,407.0957098
11700,4036.28,408.8428084
11750,4053.52,410.5908952
11800,4070.77,412.3379938
11850,4088.02,414.0850923
11900,4105.27,415.8321909
11950,4122.52,417.5792895
12000,4139.77,419.3263881
12050,4157.02,421.0734867
12100,4174.27,422.8205853
12150,4191.52,424.5676839
12200,4208.77,426.3147824
12250,4226.02,428.061881
12300,4243.26,429.8099678
12350,4260.51,431.5570663
12400,4277.76,433.3041649
12450,4295.01,435.0512635
12500,4312.26,436.7983621
12550,4329.51,438.5454607
12600,4346.76,440.2925593
12650,4364.01,442.0396579
12700,4381.26,443.7867565
12750,4398.51,445.533855
12800,4415.76,447.2809536
12850,4433,449.0290404
12900,4450.25,450.7761389
12950,4467.5,452.5232375
13000,4484.75,454.2703361
13050,4502,456.0174347
13100,4519.25,457.7645333
13150,4536.5,459.5116319
13200,4553.75,461.2587305
13250,4571,463.005829
13300,4588.25,464.7529276
13350,4605.5,466.5000262
13400,4622.74,468.248113
13450,4639.99,469.9952115
13500,4657.24,471.7423101
13550,4674.49,473.4894087
13600,4691.74,475.2365073
13650,4708.99,476.9836059
13700,4726.24,478.7307045
13750,4743.49,480.4778031
13800,4760.74,482.2249016
13850,4777.99,483.9720002
13900,4795.23,485.720087
13950,4812.48,487.4671856
14000,4829.73,489.2142841
14050,4846.98,490.9613827
14100,4864.23,492.7084813
14150,4881.48,494.4555799
14200,4898.73,496.2026785
14250,4915.98,497.9497771
14300,4933.23,499.6968757
14350,4950.48,501.4439742
14400,4967.73,503.1910728
14450,4984.97,504.9391596
14500,5002.22,506.6862581
14550,5019.47,508.4333567
14600,5036.72,510.1804553
14650,5053.97,511.9275539
14700,5071.22,513.6746525
14750,5088.47,515.4217511
14800,5105.72,517.1688497
14850,5122.97,518.9159483
14900,5140.22,520.6630468
14950,5157.47,522.4101454
15000,5174.71,524.1582322`

function feeCalculate (slider, amount){
  var sellerFee =  document.getElementById('sellerFee');
  var amount = document.getElementById('amount').value;
  var fee = 0.03;
  var fee_amount = amount * fee;
  
  sellerFee.textContent = fee_amount.toFixed(2);
  
  const interest = document.getElementById('interest');
  interest.textContent = totalInterest(amount);
  
  const monthly = document.getElementById('payment');
  monthly.textContent = monthlyInterest(amount);
}

function totalInterest(amount) {
  const match = VALS.match(RegExp(`^${amount},[\\d.]+,([\\d.]+)`, 'm'));
  const num = Number(match && match[1]);
  return num.toFixed(2);
}

function monthlyInterest(amount) {
  const match = VALS.match(RegExp(`^${amount},([\\d.]+),[\\d.]+`, 'm'));
  const num = Number(match && match[1]);
  return num.toFixed(2);
}

              
            
!
999px

Console