JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="dropdown-container">
  <div class="row">
    <div class="column-dropdowns" style="flex: 80%;">
      <label for="acidSelector"><strong>1)</strong> Select Primary Food Dye:</label>
      <select id="acidSelector">
        <option value="" selected>Choose from Dropdown</option>
        <option value="Citric">Citric Acid</option>
        <option value="Malic">Malic Acid</option>
        <option value="Malonic">Malonic Acid</option>
        <option value="Tartaric">Tartaric Acid</option>
      </select>  
    </div>
    <div class="column-dropdowns" style="flex: 20%;">
      <button id="resetButton" class="control-button">Reset All Controls</button>
    </div>
  </div>
</div>

<!-- Tab 1 content -->
<div id="Tab1" class="tabcontent">
  <div id="glassware-container-1">
    <img id="beaker-1" src="https://github.com/johannalherman/131-AIC/blob/main/Beaker-1.png?raw=true">
    <canvas id="canvas"></canvas>
    <img id="balance-1" src="https://github.com/johannalherman/131-BBB/blob/main/Balance.png?raw=true">
    <p id="total-mass-1"><span>0.000</span> g</p>
  </div>
  <div class="button-container" style="margin-top: 140px;">
    <p style="text-align: center; margin-bottom: 0px;"><strong>2)</strong> Weigh out solid food acid</p>
    <button id="addSmallParticlesBtn" type="button" disabled>Add Small Amount</button>
    <button id="addLargeParticlesBtn" type="button" disabled>Add Large Amount</button>
  </div>
  <div class="button-container">
    <button id="tareButton" class="control-button">Tare</button>
    <button id="clearButton" class="control-button" onclick="clearBalancce();">Clear Balance</button>
  </div>
  <div class="tab" style="margin: 80px 10px 40px 10px;">
    <button id="move2tab2" class="tablinks" onclick="openTabs(event, 'Tab2'); pH_calculate(); findClosestPH();" type="button" disabled><strong>3)</strong> Dissolve food acid & add universal indicator!</button>
  </div>
</div>

<!-- Tab 2 content -->
<div id="Tab2" class="tabcontent">
  <p...

CSS

body {
  width: 1000px;
  margin: auto;
  font: 18px Arial, sans-serif;
  padding: 20px;
  text-align: center;
}
button {        
  font-size: 16px;
}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tab {
  overflow: hidden;
  text-align: center; 
}
/* Style the buttons that are used to open the tab content */
.tab button { 
  font-size: 22px;
  padding: 10px 20px;
  background-image: linear-gradient(#b4c6ff, #e7edff 50%, #b4c6ff);
  border: 2px solid;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;        
  outline: none;
  transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #f5f5f5;
  border: 2px solid white;
  border-radius: 5px;
}
/* Create an active/current tablink class */
.tab button.active {
  border: 2px solid;
  border-radius: 5px;
  background-color: white;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 10px;
  border: 2px solid #FF2E37;
  border-radius: 5px;
}

#dropdown-container {
  margin: 40px auto 20px auto;
  text-align: left;
  width: 900px;
  gap: 10px;
  padding: 10px 30px;
  background-color: #ffd7e1;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#acidSelector {
  font-size: 20px;
}

.button-container {
  text-align: center;
  z-index: 1000;
}
.button-container button {
  margin: 20px 0px 0px 0px;
  padding: 10px 20px;
  border: 2px solid;
  border-radius: 5px;
  cursor: pointer;
}  
.button-container button:hover {
  border: 2px solid white;
}
.button-container button:focus {
  padding: 9px 19px;
  border: 3px solid #FF2E37;
}

.control-button {
  padding: 10px 20px;
  background-image: linear-gradient(#ff9ab3, #fedee6 50%, #ff9ab3);
  border: 2px solid #FF2E37;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.control-button:hover {
  border: 2px solid white;
}
.control-button:focus {
  padding: 9px 19px;
  border: 3px solid #FF2E37;
}

.row...

JavaScript

function getRandomAmount(min, max) {
  return Math.random() * (max - min) + min;
}

const AcidData = {
  Citric: { MW: 192.124, rxnRatio: 3, pKa1: 3.12, pKa2: 4.76, pKa3: 6.39},
  Malic: { MW: 134.0874, rxnRatio: 2, pKa1: 3.40, pKa2: 5.11, pKa3: 10},
  Malonic: { MW: 104.0615, rxnRatio: 2, pKa1: 2.83, pKa2: 5.69, pKa3: 10},
  Tartaric: { MW: 150.087, rxnRatio: 2, pKa1: 2.98, pKa2: 4.34, pKa3: 10}
};

document.getElementById("acidSelector").addEventListener("change", function(event) {    
  currentAcid = event.target.value
  addSmallParticlesBtn.disabled = false;
  addLargeParticlesBtn.disabled = false;
});

document.getElementById("resetButton").addEventListener("click", () => {
  addSmallParticlesBtn.disabled = true;
  addLargeParticlesBtn.disabled = true;

  // panel 1
  clearBalancce()
  currentAcid = ""

  // panel 2
  resetTitration()

  openTabs(event, 'Tab1')

  // Reset dropdown
  const acidSelector = document.getElementById("acidSelector");
  acidSelector.value = "";
});


let beakerMass = getRandomAmount(70, 90);
let acidMass = 0;
let tareOffset = 0;
let amount = 0;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const addSmallParticlesBtn = document.getElementById("addSmallParticlesBtn");
const addLargeParticlesBtn = document.getElementById("addLargeParticlesBtn");

const particles = [];
const gravity = 0.25;
const particleRadius = 4;
let pileHeight = 0;
let pileWidth = 0;




function Particle(x, y, delay) {
  this.x = x;
  this.y = y;
  this.vy = 0;
  this.stable = false;
  this.delay = delay;
}

Particle.prototype.update = function () {
  if (!this.stable) {
    if (this.delay > 0) {
      this.delay--;
      return;
    }
    this.vy += gravity;
    this.y += this.vy;

    if (this.y + particleRadius >= canvas.height - pileHeight) {
      this.stable = true;
      particles.splice(particles.indexOf(this), 1);
      pileHeight += 0.4;
      pileWidth += 10;
    }
  }
};

function addParticles(size) {  
  if...