JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div id="header">
      <p class=openingRemarks> Welcome to the Serendipity Booksellers Website<span id="greetingBox"></span></p>
      <div style="margin: auto; width: 80%;">
       <p>
		  <!-- INSERT ADDITIONAL WEBPAGE ELEMENTS -->
           <!--Text Boxes -->
    <form name = "totalPoints">
        <label for="books">Enter the number of books purchased this month</label>
        <input type="text" id="books" name="books" value="" size="10" onchange="bookCount = parseInt(books.value, 10);"/>
        <br>
        <br>
        <label for="dollarsSpent"> Enter the dollar amount spend on non-book merchandise this month</label>
        <input type = "text" id = "dollars" name="dollars" value = "" size = "10" onchange = "dollarCount = parseInt(dollars.value, 10);"/>
        <br>
        <br>
        <input type = "radio" name = "customer" id ="Yes" onclick = "preferredCustomer = document.getElementById('Yes').checked;"/> YES, I am a Preferred Customer <br/>
        <input type = "radio" name = "customer" id = "No" onclick = "preferredCustomer = document.getElementById('Yes').checked.checked;"/> NO, I am not a Preferred Customer <br/>
        <br>
        <input type = "button" value = "Calculate Award Points" onclick = "  if(bookCount === 1)
  	accumulatedPoints = 4;
  else if(bookCount === 2)
  	accumulatedPoints = 8;
  else if(bookCount >= 3)
  	accumulatedPoints = 16;
  if(bookCount > 3) {
  	accumulatedPoints += (bookCount - 3) * 7;
  }
  if(dollarCount >= 10) {
  	accumulatedPoints += Math.floor(dollarCount / 10) * 4;
  }
  if(preferredCustomer === true) {
  	accumulatedPoints *= 2;
  }
  output.value = accumulatedPoints;"/><!--
        <input type = "button" value = "Calculate Award Points" onclick = "
        if (booksBought == 0){
            points = 0;
        }
        if (booksBought == 1){
            points = 3;
        }
        if (booksBought == 2){
            points = 7;
        } 
        if (booksBought == 3){
            points = 12;
       ...

CSS

body {
        width: 80%;
        margin: auto;
      }
      input {
        color: grey;
        font-size: 80%;
        padding: 2px 15px 2px 15px;
        text-align: right;
      }
      button {
        margin: 20px;
        font-size: 70%;
      }
      label {
        margin-left: 30px;
      }
      p.openingRemarks {
          font-size: 250%;
          text-align: center;
      }
      #header {
        margin: auto;
        min-width: 1200px;
        max-width: 1200px;
        overflow: auto;
        color: white;
        padding: 15px;
        margin-top: 35px;
        font-size: 150%;
        text-align: center;
        background: #5E99D3;
        border-radius: 15px;
      }

JavaScript

/* Solicit input*/
        var booksBought;
        var points;
        var customer;
        var dollarsSpent;
/*So that just said 54 points. Hopefully that at least calculated right. That would be the logic, but it has to be broken down into simpler stuff, then...*/ 
var bookCount = 0;
var dollarCount = 0.0;
var preferredCustomer = false;
var accumulatedPoints = 0;

function calculateAward() {
	for(var i = 0; i < bookCount; i++) {
  	if(i < 4) accumulatedPoints = i * 4; /*This actually wouldn't work for 3 = 16...*/
    else accumulatedPoints += 7;
  }
  if(dollarCount >= 10) {
  	accumulatedPoints += Math.floor(dollarCount / 10) * 4;
  }
  if(preferredCustomer === true) {
  	accumulatedPoints *= 2;
  }
  return accumulatedPoints;
}

//alert(calculateAward());

function calculateAward() {
  if(bookCount === 1)
  	accumulatedPoints = 4;
  else if(bookCount === 2)
  	accumulatedPoints = 8;
  else if(bookCount >= 3)
  	accumulatedPoints = 16;
  if(bookCount > 3) {
  	accumulatedPoints += (bookCount - 3) * 7;
  }
  if(dollarCount >= 10) {
  	accumulatedPoints += Math.floor(dollarCount / 10) * 4;
  }
  if(preferredCustomer === true) {
  	accumulatedPoints *= 2;
  }
  return accumulatedPoints;
}