Subject Calculator

by iRideLikeTheWind

by Jonathon Mascorella

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div>
  <div class="" dir="ltr">
    <table class="" cellspacing="0" cellpadding="0">
      <tbody id="calculatorTable">
        <tr class="tableRow">
          <td class="tableCell right-align" dir="ltr"><strong>Course</strong></td>
          <td class="" dir="ltr"><strong>Select course of study</strong></td>
          <td></td>
        </tr>
        <tr  class="tableRow">
          <td class="s1" dir="ltr">Religious Education</td>
          <td class="re-selector">
            <select id="select-re">
              <option value="0">Select an RE course</option>
            </select>
          </td>
         <td class="units-selected"></td>
        </tr>
        <tr  class="tableRow">
          <td class="s1" dir="ltr">English</td>
          <td class="english-selector">
            <select id="select-english">
              <option value="0">Select an English course</option>
            </select>
          </td>
          <td class="units-selected"></td>
        </tr>
        <tr  class="tableRow">
          <td class="s1" dir="ltr">Mathematics</td>
          <td class="maths-selector">
          <select id="select-mathematics" class="select-mathematics">
              <option value="0">Select a Mathematics course</option>
            </select>
            <br />
            <span class="warning"></span>
          </td>
          <td></td>
        </tr>
        <tr  class="tableRow">
          <td class="s1" dir="ltr">Electives</td>
          <td class="elective-selector">
            <select...

CSS

body {
  background: white;
  color: #323232;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

img {
  width: 56px;
  height: 48px;
}

h1 {
  font-weight: 200;
  font-style: 26px;
  margin: 10px;
}

select {
  width: 100%;
}
div {
  width: 100%;
  margin: 0px;
}

table {
  width: 100%;
  margin: 0;
}

tr.tableRow {
  height: 20px;
}

td {
  width: 40%;
  padding: 5px 10px;
}


td.s1 {
  width: 20%;
  text-align: right;
}

td.total {
  font-weight: bold;
}

.right-align {
  text-align: right;
}

.warning {
  color: red;
}

#compareRow {
  display: none;
}

JavaScript

const mathWarningMessage = "Not selecting mathematics requires an interview."
const noWarningMessage = "";
const minimumUnitsMessage = "You need at least 10 units.";
const electiveWarningMessage = "You can't select two of the same elective.";

const dataRe = [
{
    Course: 'Studies of Religion 1',
    Units: 1
  },
  {
    Course: 'Studies of Religion 2',
    Units: 2
  }
];

const dataEnglish = [
{
    Course: 'English Standard',
    Units: 2
  },
  {
    Course: 'English Advanced',
    Units: 2
  }
];

const dataMathematics = [
{
    Course: 'Mathematics Standard',
    Units: 2
  },
  {
    Course: 'Mathematics Advanced',
    Units: 2
  },
  {
    Course: 'No Mathematics',
    Units: 0
  }
];

const dataElectives = [
{
    Course: 'English Extension 1',
    Units: 1
  },
  {
    Course: 'Mathematics Extension 1',
    Units: 1
  },
  {
    Course: 'Ancient History',
    Units: 2
  },
  {
    Course: 'Biology',
    Units: 2,
  },
  {
    Course: 'Business Studies',
    Units: 2,
  },
  {
    Course: 'Chemistry',
    Units: 2,
  },
  {
    Course: 'Chinese Continuers',
    Units: 2,
  },
  {
    Course: 'Design & Technology',
    Units: 2,
  },
  {
    Course: 'Drama',
    Units: 2,
  },
  {
    Course: 'Economics',
    Units: 2,
  },
  {
    Course: 'Food Technology',
    Units: 2,
  },
  {
    Course: 'French Continuers',
    Units: 2,
  },
  {
    Course: 'Geography',
    Units: 2,
  },
  {
    Course: 'Hospitality 240 hr',
    Units: 2,
  },
  {
    Course: 'Italian Continuers',
    Units: 2,
  },
  {
    Course: 'Legal Studies',
    Units: 2,
  },
  {
    Course: 'Modern History',
    Units: 2,
  },
  {
    Course: 'Music 1',
    Units: 2,
  },
  {
    Course: 'Music 2',
    Units: 2,
  },
  {
    Course: 'PDHPE',
    Units: 2,
  },
  {
    Course: 'Physics',
    Units: 2,
  },
  {
    Course: 'Visual Arts',
    Units: 2,
  }
];

var electiveRows = 1;

var selectedSubjects = [];

var comparedPatterns = [];

$.each(dataRe, function(i, obj) {
 ...