JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<p id="alert">Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

  <input type="hidden" name="cmd" value="_donations">
  <input type="hidden" name="business" value="[email protected]">

  <label>
    <input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
  <label>
    <input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
  <label>
    <input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
  <label>
    <input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
  <input type="number" class="textBox" name="amount" placeholder="€ Other">

  <input type="hidden" name="item_name" value="Donation">
  <input type="hidden" name="item_number" value="Donation">
  <input type="hidden" name="currency_code" value="EUR">
  <input type="hidden" name="lc" value="PT">
  <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
  <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


  <br style="clear: both;" />
  <input class="donation-button" type="submit" value="Send Donation">

</form>

CSS

body {
  box-sizing: border-box;
  padding: 50px;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
}

label {
  margin: 1%;
  float: left;
  background: #ccc;
  text-align: center;
  width: 18%;
}

label:hover {
  background: grey;
  color: #fff;
}

label span {
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  display: block;
}

label input {
  display: none;
  left: 0;
  top: -10px;
}

input:checked + span {
  background-color: black;
  color: #fff;
}


/* Hide HTML5 Up and Down arrows in input type="number" */

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.textBox {
  margin: 1%;
  float: left;
  background: #ccc;
  border: 0;
  padding: 10px 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  width: 18%;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}

.textBox:focus {
  box-shadow: none;
  box-shadow: inset 0 0 4px 0 #000;
  -moz-box-shadow: inset 0 0 4px 0 #000;
  -wevkit-box-shadow: inset 0 0 4px 0 #000;
}

.donation-button {
  width: 98%;
  margin: 1%;
  border: 0;
  background: grey;
  color: white;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  padding: 10px 0 10px 0;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}

.donation-button:hover {
  background: black;
}

JavaScript

var defaultTxt = $('#alert').text();
$('input.checkbutton').change(function() {
  $('input.checkbutton').not(this).prop('checked', false);
  if ($(this).is(":checked")) {
    $(".textBox").val("");
  }
  var check = $(this).prop('checked');
  var value = $(this).val();
  switch (value) {
    case ("5,00"):
      if (check)
        $('#alert').text("with €5.00 we can accomplish this...");
      else
        $('#alert').text(defaultTxt);
      break;
    case ("10,00"):
      if (check)
        $('#alert').text("With €10.00 we could do that...");
      else
        $('#alert').text(defaultTxt);
      break;
    case ("15,00"):
      if (check)
        $('#alert').text("With €15.00 we could do that...");
      else
        $('#alert').text(defaultTxt);
      break;
    case ("20,00"):
      if (check)
        $('#alert').text("With €20,00 we could do more than that...");
      else
        $('#alert').text(defaultTxt);
      break;
    default:
      $('#alert').text("");
      break;
  }
});

$('input.checkbutton').parent().hover(
  function() {
    var value = $(this).children('input.checkbutton').val();
    switch (value) {
      case ("5,00"):
        $('#alert').text("with €5.00 we can accomplish this...");
        break;
      case ("10,00"):
        $('#alert').text("With €10.00 we could do that...");
        break;
      case ("15,00"):
        $('#alert').text("With €15.00 we could do that...");
        break;
      case ("20,00"):
        $('#alert').text("With €20,00 we could do more than that...");
        break;
      default:
        $('#alert').text("");
        break;
    }
  },
  function() {
    var othervalue = $('input.checkbutton:checked').val();
    switch (othervalue) {
      case ("5,00"):
        $('#alert').text("with €5.00 we can accomplish this...");
        break;
      case ("10,00"):
        $('#alert').text("With €10.00 we could do that...");
        break;
      case ("15,00"):
        $('#alert').text("With €15.00 we could do...