Skip to content

Commit

Permalink
undo refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@LiamSwayne
LiamSwayne committed Mar 16, 2024
1 parent 89ccb5a commit 2528964
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 63 deletions.
40 changes: 20 additions & 20 deletions site/calculator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,55 +11,55 @@
<h1>CO2 Emissions Calculator</h1>

<div class="input-section">
<label for="carbonInput">CO2 Emissions:&nbsp;</label>
<input type="number" id="carbonInput" placeholder="Enter CO2 emissions" aria-labelledby="carbonInputLabel" />
<label for="co2Input">CO2 Emissions:&nbsp;</label>
<input type="number" id="co2Input" placeholder="Enter CO2 emissions" aria-labelledby="co2Label" />
&nbsp;tons
</div>

<div class="input-section">
<label for="treeNumberInput">Number of trees:&nbsp;</label>
<input type="number" id="treeNumberInput" placeholder="Enter number of trees" aria-labelledby="treeNumberInputLabel" />
<label for="numberOfTreesInput">Number of trees:&nbsp;</label>
<input type="number" id="numberOfTreesInput" placeholder="Enter number of trees" aria-labelledby="numberOfTreesLabel" />
</div>

<div class="input-section">
<label for="budgetInput">Budget (USD):&nbsp;</label>$&nbsp;
<input type="number" id="budgetInput" placeholder="Enter budget" aria-labelledby="budgetInputLabel" />
<input type="number" id="budgetInput" placeholder="Enter budget" aria-labelledby="budgetLabel" />
</div>

<!-- National Forest Foundation -->
<div class="tree-slider">
<input type="checkbox" class="checkbox" id="org1Checkbox" onclick="toggleOrganization('org1')" />
<label for="org1Checkbox"> <a href="https://www.nationalforests.org/tree-planting-programs" target="_blank">National Forest Foundation</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="org1" min="0" max="1000" step="1" value="0" aria-labelledby="org1Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="org1Output">0 trees</output>
<input type="checkbox" class="checkbox" id="organization1Checkbox" onclick="toggleOrganization('organization1')" />
<label for="organization1Checkbox"> <a href="https://www.nationalforests.org/tree-planting-programs" target="_blank">National Forest Foundation</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="organization1" min="0" max="1000" step="1" value="0" aria-labelledby="organization1Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="organization1Output">0 trees</output>
</div>

<!-- #TeamTrees -->
<div class="tree-slider">
<input type="checkbox" class="checkbox" id="org2Checkbox" onclick="toggleOrganization('org2')" />
<label for="org2Checkbox"><a href="https://teamtrees.org/" target="_blank">#TeamTrees</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="org2" min="0" max="1000" step="1" value="0" aria-labelledby="org2Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="org2Output">0 trees</output>
<input type="checkbox" class="checkbox" id="organization2Checkbox" onclick="toggleOrganization('organization2')" />
<label for="organization2Checkbox"><a href="https://teamtrees.org/" target="_blank">#TeamTrees</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="organization2" min="0" max="1000" step="1" value="0" aria-labelledby="organization2Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="organization2Output">0 trees</output>
</div>

<!-- One Tree Planted -->
<div class="tree-slider">
<input type="checkbox" class="checkbox" id="org3Checkbox" onclick="toggleOrganization('org3')" />
<label for="org3Checkbox"><a href="https://onetreeplanted.org/products/plant-trees" target="_blank">One Tree Planted</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="org3" min="0" max="1000" step="1" value="0" aria-labelledby="org3Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="org3Output">0 trees</output>
<input type="checkbox" class="checkbox" id="organization3Checkbox" onclick="toggleOrganization('organization3')" />
<label for="organization3Checkbox"><a href="https://onetreeplanted.org/products/plant-trees" target="_blank">One Tree Planted</a>: $1 per tree</label>
<input type="range" style="margin-top:16px; width:200px;" id="organization3" min="0" max="1000" step="1" value="0" aria-labelledby="organization3Label" disabled />
<output style="margin-top:16px; margin-left: 8px;" id="organization3Output">0 trees</output>
</div>

<h2>Results</h2>

<div class="result-section">
<div id="carbonResultLabel">Net CO2 Emissions:&nbsp;</div>
<output id="carbonResult" aria-labelledby="carbonResultLabel">0 tons</output>
<div id="resultCO2Label">Net CO2 Emissions:&nbsp;</div>
<output id="resultCO2" aria-labelledby="resultCO2Label">0 tons</output>
</div>

<div class="result-section">
<div id="totalPriceLabel">Total Price:&nbsp;</div>
<output id="totalPrice" aria-labelledby="totalPriceLabel">$0</output>
</div>
</body>
</html>
</html>
104 changes: 61 additions & 43 deletions site/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
const sliderScalar = 1.01157945426;

function toggleOrganization(orgId) {
const checkbox = document.getElementById(orgId + 'Checkbox');
const slider = document.getElementById(orgId);
// Toggle organization slider
function toggleOrganization(organizationId) {
const checkbox = document.getElementById(organizationId + 'Checkbox');
const slider = document.getElementById(organizationId);
const isChecked = checkbox.checked;
slider.disabled = !isChecked;

slider.value = 0;
updateOrganizationQuantity(orgId, orgId + 'Output');
slider.value = 0; // Reset slider value
updateOrganizationQuantity(organizationId, organizationId + 'Output');
calculateResults();
}

// Update organization quantity output
function updateOrganizationQuantity(sliderId, outputId) {
const slider = document.getElementById(sliderId);
const output = document.getElementById(outputId);
Expand All @@ -19,85 +21,101 @@ function updateOrganizationQuantity(sliderId, outputId) {
calculateResults();
}

// Calculate and update results
function calculateResults() {
const carbonInput = parseFloat(document.getElementById('carbonInput').value) || 0;
let totalCarbonReduction = 0;
const co2Input = parseFloat(document.getElementById('co2Input').value) || 0;
let totalCO2Reduction = 0;
let totalPrice = 0;

for (let i = 1; i <= 3; i++) {
const orgId = 'org' + i;
const orgQuantity = parseInt(document.getElementById(orgId + 'Output').textContent.split(" ")[0]) || 0;
const orgAbsorption = i * 5;
const orgPrice = getPricePerOrganization(orgId);
const organizationId = 'organization' + i;
const organizationQuantity = parseInt(document.getElementById(organizationId + 'Output').textContent.split(" ")[0]) || 0;
const organizationCO2Absorption = i * 5; // Replace with actual CO2 absorption rate
const organizationPrice = getPricePerOrganization(organizationId);

totalCarbonReduction += orgQuantity * orgAbsorption;
totalPrice += orgQuantity * orgPrice;
totalCO2Reduction += organizationQuantity * organizationCO2Absorption;
totalPrice += organizationQuantity * organizationPrice;
}

const carbonResult = document.getElementById('carbonResult');
const resultCO2 = document.getElementById('resultCO2');
const totalPriceOutput = document.getElementById('totalPrice');
carbonResult.textContent = `${carbonInput - totalCarbonReduction} tons`;
resultCO2.textContent = `${co2Input - totalCO2Reduction} tons`;
totalPriceOutput.textContent = `$${totalPrice}`;
}

// Event listener for organization sliders
for (let i = 1; i <= 3; i++) {
const orgId = 'org' + i;
document.getElementById(orgId).addEventListener('input', function () {
updateOrganizationQuantity(orgId, orgId + 'Output');
const organizationId = 'organization' + i;
document.getElementById(organizationId).addEventListener('input', function () {
updateOrganizationQuantity(organizationId, organizationId + 'Output');
});
}

document.getElementById('carbonInput').addEventListener('input', calculateResults);
// Event listener for CO2 input
document.getElementById('co2Input').addEventListener('input', calculateResults);

// Event listener for number of trees input
document.getElementById('numberOfTreesInput').addEventListener('input', function () {
const treeNumberInputValue = parseFloat(this.value) || 0;
const checkedOrgs = ['org1Checkbox', 'org2Checkbox', 'org3Checkbox'].filter(id => document.getElementById(id).checked);
const numberOfTreesInputValue = parseFloat(this.value) || 0;
const checkedOrganizations = ['organization1Checkbox', 'organization2Checkbox', 'organization3Checkbox'].filter(id => document.getElementById(id).checked);

if (checkedOrgs.length === 0) {
document.getElementById('org1Checkbox').checked = true;
toggleOrganization('org1');
if (checkedOrganizations.length === 0) {
document.getElementById('organization1Checkbox').checked = true;
toggleOrganization('organization1');
}

checkedOrgs.forEach(orgId => {
const sliderId = orgId.replace('Checkbox', '');
document.getElementById(sliderId).value = Math.log((treeNumberInputValue + 1) / checkedOrgs.length) / Math.log(sliderScalar);
checkedOrganizations.forEach(organizationId => {
const sliderId = organizationId.replace('Checkbox', '');
document.getElementById(sliderId).value = Math.log((numberOfTreesInputValue + 1) / checkedOrganizations.length) / Math.log(sliderScalar);
updateOrganizationQuantity(sliderId, sliderId + 'Output');
});

calculateResults();
});

// Update organization quantity based on budget
function updateOrganizationQuantityFromBudget(sliderId, outputId) {
const slider = document.getElementById(sliderId);
const output = document.getElementById(outputId);
const sliderValue = Math.round(Math.pow(sliderScalar, slider.value));
output.textContent = `${sliderValue - 1} Donations`;
calculateResults();
}

// Event listener for budget input
document.getElementById('budgetInput').addEventListener('input', function () {
const budgetInputValue = parseFloat(this.value) || 0;
const checkedOrgs = ['org1Checkbox', 'org2Checkbox', 'org3Checkbox'].filter(id => document.getElementById(id).checked);
const checkedOrganizations = ['organization1Checkbox', 'organization2Checkbox', 'organization3Checkbox'].filter(id => document.getElementById(id).checked);

if (checkedOrgs.length === 0) {
document.getElementById('org1Checkbox').checked = true;
toggleOrganization('org1');
if (checkedOrganizations.length === 0) {
document.getElementById('organization1Checkbox').checked = true;
toggleOrganization('organization1');
}

checkedOrgs.forEach(orgId => {
const sliderId = orgId.replace('Checkbox', '');
const pricePerOrg = getPricePerOrganization(sliderId);
checkedOrganizations.forEach(organizationId => {
const sliderId = organizationId.replace('Checkbox', '');
const pricePerOrganization = getPricePerOrganization(sliderId);
const adjustedOrganizationQuantity = Math.floor(budgetInputValue / pricePerOrganization) / checkedOrganizations.length;

const adjustedOrgQuantity = Math.floor(budgetInputValue / pricePerOrg) / checkedOrgs.length;
document.getElementById(sliderId).value = Math.log(adjustedOrgQuantity + 1) / Math.log(sliderScalar);
document.getElementById(sliderId).value = Math.log(adjustedOrganizationQuantity + 1) / Math.log(sliderScalar);
updateOrganizationQuantity(sliderId, sliderId + 'Output');
});

calculateResults();
});

function getPricePerOrganization(orgId) {
switch (orgId) {
case 'org1':
case 'org2':
case 'org3':
return 1;
// Function to get the price per organization
function getPricePerOrganization(organizationId) {
switch (organizationId) {
case 'organization1':
case 'organization2':
case 'organization3':
return 1; // Assume all organizations have the same price
default:
console.error(`Unknown organizationId: ${orgId}`);
console.error(`Unknown organizationId: ${organizationId}`);
return 0;
}
}

// Initial calculations
calculateResults();

0 comments on commit 2528964

Please sign in to comment.