JSFiddle - React, Tailwind, and code Playground

by James Bubb

HTML

<form>
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">
    <input type="text" name="ak[]">

    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
    <input type="text" name="akcs[]">
</form>
<button id="sum">Submit</button>

<div id="order_date"></div>
<div id="message"></div>

CSS

input{
  display:block;
}

JavaScript

var ak_values   = [140, 285, 160, 120, 180, 210, 250, 120, 300, 200, 110, 110, 130, 200];
  var order_date = document.getElementById('order_date');
  var message = document.getElementById('message');
  function sum(a,b){ return a+b }
  document.getElementById('sum').addEventListener('click', function(){
    var ak = [];
    Array.prototype.slice.call(document.querySelectorAll('[name="ak[]"], [name="akcs[]"]')).forEach(function(i){
      ak.push( i.value === "" ? 0 : parseInt(i.value));
    });
    var total = ak.reduce(sum);
    if (total){
      order_date.innerHTML =  "<i>Sent at:</i>" + new Date();
      ak = ak.map(function(item, index){
        return item * ak_values[index];
      });
      var value = ak.reduce(function(sum, item){
        return sum + item;
      });
      message.innerHTML = '<br><br><br><strong>Total: </strong>' + total + '<hr width="20%"><strong>Total to pay: </strong><font face color="green">' + value  + '</font><strong> $</strong>';
    } else{
      message.innerHTML = '<br><br><strong>You did not make any order</strong>';
    }
  });