 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RSO/FSO Dispensing Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      color: #333;
    }

    h2 {
      font-size: 14px;
      text-align: center;
      color: #555;
      margin-top: -10px;
    }

    label {
      display: block;
      margin: 10px 0 5px;
    }

    input, select, button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
    }

    .button {
      background-color: #4CAF50;
      color: white;
      font-size: 18px;
      border: none;
      cursor: pointer;
    }

    .button:hover {
      background-color: #45a049;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }

    .reset-button {
      background-color: #f44336;
    }

    .reset-button:hover {
      background-color: #e53935;
    }

    .section {
      margin-bottom: 20px;
    }

    /* Hide second section initially */
    .second-section {
      display: none;
    }

    /* Lock first section after calculation */
    .locked {
      pointer-events: none;
      opacity: 0.6;
    }

    /* Start Over button */
    #start-over {
      background-color: #2196F3;
      margin-bottom: 20px;
    }

    #start-over:hover {
      background-color: #1976D2;
    }

    .highlight-red {
      color: red;
    }

    /* Style for the bold line */
    .bold-line {
      border-top: 2px solid #000;
      margin: 20px 0;
    }

  </style>
</head>
<body>

  <div class="container">
    <!-- Start Over Button -->
    <button class="button" id="start-over" onclick="resetApp()">Start Over</button>

    <h1>RSO/FSO Dispensing Calculator</h1>
    <!-- Note below the title -->
    <h2>A standard 1ml syringe is used for calculation purposes.</h2>

    <!-- First Section for THC Concentration, Syringe Milligram Weight, and Cannabinoid Name -->
    <div class="section" id="first-section">
      <label for="cannabinoid-name">Cannabinoid Name (e.g., THC, CBD)</label>
      <input type="text" id="cannabinoid-name" placeholder="Enter the cannabinoid name" required>

      <label for="thc-concentration">Cannabinoid Concentration or Potency (%)</label>
      <input type="number" id="thc-concentration" placeholder="Enter cannabinoid concentration or potency (e.g., 80 for 80%)" required>

      <label for="syringe-mg-weight">RSO/FSO quantity in Syringe (mg)</label>
      <input type="number" id="syringe-mg-weight" placeholder="Enter quantity in milligrams. This is typically found on the front of the packaging" required>

      <button class="button" onclick="calculateSyringe()">Calculate</button>
    </div>

    <!-- Second Section for Desired Dose Calculation -->
    <div class="second-section" id="second-section">
      <label for="desired-dose">Desired Cannbinoid Amount (mg)</label>
      <input type="number" id="desired-dose" placeholder="Enter amount you'd like to dispense in milligrams" required>

      <button class="button" onclick="calculateDose()">Calculate Amount to Dispense</button>
      <button class="button reset-button" onclick="clearSection2()">Clear</button>
    </div>

    <!-- Result Section -->
    <div class="result" id="result"></div>

  </div>

  <script>
    // Constants for full and half grain volumes
    const FULL_GRAIN_VOLUME = 0.05; // Full grain volume (ml)
    const HALF_GRAIN_VOLUME = 0.025; // Half grain volume (ml)
    let thcInSyringeMg = 0;
    let cannabinoidName = '';
    let fullGrainWeight = 0;
    let halfGrainWeight = 0;

    // Function to calculate the THC dispensed per full and half grain dose based on concentration and syringe weight
    function calculateSyringe() {
      const thcConcentration = parseFloat(document.getElementById('thc-concentration').value);
      const syringeMgWeight = parseFloat(document.getElementById('syringe-mg-weight').value);
      cannabinoidName = document.getElementById('cannabinoid-name').value;

      // Validation
      if (isNaN(thcConcentration) || isNaN(syringeMgWeight) || thcConcentration <= 0 || syringeMgWeight <= 0 || cannabinoidName === '') {
        alert('Please enter valid values for cannabinoid name, concentration or potency, and syringe milligram weight.');
        return;
      }

      // Calculate the total THC in the syringe (in mg)
      thcInSyringeMg = (thcConcentration / 100) * syringeMgWeight;

      // Calculate the full and half grain dose weights (mg) based on the concentration
      fullGrainWeight = (FULL_GRAIN_VOLUME / 1) * thcInSyringeMg;  // Full grain dose weight (mg)
      halfGrainWeight = (HALF_GRAIN_VOLUME / 1) * thcInSyringeMg;  // Half grain dose weight (mg)

      // Calculate the number of full and half grain doses the syringe can dispense
      const fullGrainDoses = Math.floor(thcInSyringeMg / fullGrainWeight);  // Total full grain doses
      const halfGrainDoses = Math.floor(thcInSyringeMg / halfGrainWeight);  // Total half grain doses

      // Show result and reveal second section
      let resultText = `
        <p><strong>${cannabinoidName}</strong> in Syringe: ${thcInSyringeMg.toFixed(2)} mg</p>
        <p>Full grain (0.050 ml) contains ${fullGrainWeight.toFixed(2)} mg of ${cannabinoidName}</p>
        <p>Half grain (0.025 ml) contains ${halfGrainWeight.toFixed(2)} mg of ${cannabinoidName}</p>

      `;

      // Lock first section
      document.getElementById('first-section').classList.add('locked');

      // Show the second section for desired dose calculation
      document.getElementById('second-section').style.display = 'block';

      // Append results to the result section and add bold line
      document.getElementById('result').innerHTML = resultText + '<hr class="bold-line">';
    }

    // Function to calculate the dose for the desired mg value
    function calculateDose() {
      const desiredDose = parseFloat(document.getElementById('desired-dose').value);

      // Calculate the total number of full grains required
      const totalFullGrains = desiredDose / fullGrainWeight;
      
      // Round the result to 2 decimal places
      const fullGrainsNeeded = totalFullGrains.toFixed(2);

      // Calculate the total volume required
      const totalVolume = (desiredDose / fullGrainWeight) * FULL_GRAIN_VOLUME;

      // Round the result to 3 decimal places
      const fullVolumeNeeded = totalVolume.toFixed(3);
      
      // Display result for Section 2
      let resultText = `
        <p>For <strong>${desiredDose} mg of ${cannabinoidName}</strong>, you need to dispense <strong>${fullGrainsNeeded}</strong> grain(s) (${fullVolumeNeeded} ml)</p>
      `;

      // Append result to Section 2
      document.getElementById('result').innerHTML += resultText;
    }

    // Function to clear Section 2 results
    function clearSection2() {
      document.getElementById('desired-dose').value = '';
      document.getElementById('result').innerHTML = document.getElementById('result').innerHTML.split('<hr>')[0];  // Keep Section 1 results

      document.getElementById('result').innerHTML = '';
      calculateSyringe()

    }

    // Reset everything to the initial state
    function resetApp() {
      document.getElementById('cannabinoid-name').value = '';
      document.getElementById('thc-concentration').value = '';
      document.getElementById('syringe-mg-weight').value = '';
      document.getElementById('desired-dose').value = '';
      document.getElementById('result').innerHTML = '';
      document.getElementById('second-section').style.display = 'none';
      document.getElementById('first-section').classList.remove('locked');
    }
  </script>

</body>
</html>

created 8 months ago

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

Any HTML document must start with document declaration <!DOCTYPE html>
HTML documents begin with <html> and ends with </html>
Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
Paragrahs are defined in <p>..</p> tag.

Links are defined in <a> tag.

Example:

<a href="https://onecompiler.com/html">HTML online compiler</a>

Images are defined in <img> tag, where src attribute consists of image name.
Buttons are defined in <button>..</button> tag
Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

HTML element is everything present from start tag to end tag.
The text present between start and end tag is called HTML element content.
Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
Do not forget the end tag.
Elements with no content are called empty elements.
Elements can have attributes which provides additional information about the element.
In the below example, href is an attribute and a is the tag name.
Example:
```
<a href="https://onecompiler.com/html">HTML online compiler</a>
```

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

HTML Tables are defined in <table> tag.
Table row should be defined in <tr> tag
Table header should be defined in <th> tag
Table data should be defined in <td> tag
Table caption should be defined in <caption> tag

HTML-Javascript

Javascript is used in HTML pages to make them more interactive.
<script> is the tag used to write scripts in HTML
You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>