JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <h1>How many credits would I need?</h1>
  </div>
  <div class="row">
    <div class="form-group col-12 col-sm-12 .col-md-12 .col-lg-12 .col-xl-12">
      <label for="transformations">Transformations</label>
      <input type="number" class="form-control" id="transformations" aria-describedby="transformationsHelp" placeholder="Enter # of monthly transformations">
      <small id="transformationsHelp" class="form-text text-muted">The number of times an original is uploaded or a derived resource is created for the first time. Images and videos accessed subsequently to initial creation, do not increment the monthly transformations counter.</small>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-12 col-sm-12 .col-md-12 .col-lg-12 .col-xl-12">
      <label for="storage">Storage</label>
      <input type="number" class="form-control" id="storage" aria-describedby="storageHelp" placeholder="Enter # of GBs">
      <small id="storageHelp" class="form-text text-muted">Net viewing bandwidth.</small>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-12 col-sm-12 .col-md-12 .col-lg-12 .col-xl-12">
      <label for="bandwidth">Bandwidth</label>
      <input type="number" class="form-control" id="bandwidth" aria-describedby="bandwidthHelp" placeholder="Enter # in GBs">
      <small id="bandwidthHelp" class="form-text text-muted">Bytes stored in Cloudinary.</small>
    </div>
  </div>
  <div class="row">
    <button id="calculate" class="btn btn-primary">Calculate</button>
  </div>
  <div class="row">
    <h3 id="credits"></h3>
  </div>
</div>

JavaScript

var free = 25;
var plus = 225;
var advance = 600;
var advancedExtra = 1350;
var pro = 2800;

$('button#calculate').click(function(){
	var transformations = parseInt($('input#transformations').val());
  var storage = parseInt($('input#storage').val());
  var bandwidth = parseInt($('input#bandwidth').val());
  var credits = transformations/1000+storage+bandwidth;
  var planName = 'Free';
  if (credits > free && credits <= plus ) 
  	planName = 'Plus';
  else
  	if (credits <= advance && credits > plus)
  		planName = 'Advanced';
      else
  			if (credits >= advance && credits < advancedExtra)
        planName = 'Advanced Extra'
        if (credits > advancedExtra && credits <pro)
        planName = 'Pro'
    if (credits > pro)
  			planName = 'Enterprise';
	$('h3#credits').text(`Credits: ${Math.ceil(credits)} ${planName}`);
});