Skip to content

Commit

Permalink
u
Browse files Browse the repository at this point in the history
  • Loading branch information
@hadithmv
hadithmv committed Dec 12, 2024
1 parent c252c64 commit 3e5e698
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 0 deletions.
99 changes: 99 additions & 0 deletions page-uc/textEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2460,6 +2460,105 @@ <h4>Aqiqah Date Calculator 🩸</h4>

<p>🔢 Direct Quantity Proportion</p>

<style>
.proportion-container {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem;
}

.proportion-set {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
background-color: var(--textarea-bg);
border: 1px solid var(--textarea-border);
border-radius: 4px;
}

.proportion-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1em;
}

.prop-input {
width: 80px;
padding: 0.3rem;
font-size: 1em;
border: 1px solid var(--textarea-border);
background-color: var(--textarea-bg);
color: var(--textarea-text);
border-radius: 4px;
}

.prop-input:focus {
outline: none;
border-color: var(--button-hover);
}

.unit {
color: var(--textarea-text);
}

.prop-numbered-tabs {
display: flex;
gap: 5px;
margin-bottom: 1rem;
}

.prop-numbered-tab, #addPropTab {
padding: 5px 10px;
cursor: pointer;
border: 1px solid var(--textarea-border);
border-radius: 5px;
background-color: var(--textarea-bg);
color: var(--textarea-text);
min-width: 30px;
text-align: center;
}

.prop-numbered-tab.active {
background-color: var(--button-hover);
color: var(--button-hover-text);
}
</style>

<div id="proportionTab" class="tab-content"></div>
<div class="prop-numbered-tabs">
<button class="prop-numbered-tab active" data-tab="1">1</button>
<button id="addPropTab">+</button>
</div>

<div class="proportion-container">
<!-- First proportion set -->
<div class="proportion-set">
<div class="proportion-row">
If <input type="number" class="prop-input first-x" placeholder="10"> <span class="unit">g</span> =
<input type="number" class="prop-input first-y" placeholder="20"> <span class="unit">$</span>
</div>
<div class="proportion-row">
then <input type="number" class="prop-input second-x" value="1"> <span class="unit">g</span> =
<input type="number" class="prop-input second-y" placeholder="2"> <span class="unit">$</span>
</div>
</div>

<!-- Second proportion set -->
<div class="proportion-set">
<div class="proportion-row">
If <input type="number" class="prop-input first-x" placeholder="10"> <span class="unit">g</span> =
<input type="number" class="prop-input first-y" placeholder="20"> <span class="unit">$</span>
</div>
<div class="proportion-row">
then <input type="number" class="prop-input second-x" value="1"> <span class="unit">g</span> =
<input type="number" class="prop-input second-y" placeholder="2"> <span class="unit">$</span>
</div>
</div>
</div>
</div>
<!-- -->

<hr />
Expand Down
92 changes: 92 additions & 0 deletions page-uc/textEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3064,6 +3064,98 @@ two input boxes next to this button, saying "Find" and "Replace" as placeholders

// =====================================================

// Direct Proportion Calculator functionality
const propContainer = document.querySelector(".proportion-container");
const addPropTabButton = document.getElementById("addPropTab");
const propNumberedTabs = document.querySelector(".prop-numbered-tabs");

if (propContainer && addPropTabButton && propNumberedTabs) {
let currentPropTab = 1;
let propTabs = [{ id: 1, content: propContainer.innerHTML }];

function updateProportions(set) {
const inputs = set.querySelectorAll(".prop-input");
const firstX = inputs[0].value || inputs[0].placeholder;
const firstY = inputs[1].value || inputs[1].placeholder;
const secondX = inputs[2].value || inputs[2].placeholder;

// Calculate k (constant of proportionality)
const k = firstY / firstX;

// Update second Y based on proportion
inputs[3].value = (secondX * k).toFixed(2);
}

// Add event listeners to all input fields
function setupInputListeners() {
document.querySelectorAll(".proportion-set").forEach((set) => {
set.querySelectorAll(".prop-input").forEach((input) => {
input.addEventListener("input", () => updateProportions(set));
});
});
}

// Add new proportion tab
addPropTabButton.addEventListener("click", () => {
const newTabId = propTabs.length + 1;
propTabs.push({ id: newTabId, content: propContainer.innerHTML });

const newTab = document.createElement("button");
newTab.classList.add("prop-numbered-tab");
newTab.dataset.tab = newTabId;
newTab.textContent = newTabId;

propNumberedTabs.insertBefore(newTab, addPropTabButton);
switchPropTab(newTabId);
});

// Switch between proportion tabs
propNumberedTabs.addEventListener("click", (e) => {
if (e.target.classList.contains("prop-numbered-tab")) {
const tabId = parseInt(e.target.dataset.tab);
switchPropTab(tabId);
}
});

function switchPropTab(tabId) {
propTabs[currentPropTab - 1].content = propContainer.innerHTML;
currentPropTab = tabId;
propContainer.innerHTML = propTabs[currentPropTab - 1].content;

document.querySelectorAll(".prop-numbered-tab").forEach((tab) => {
tab.classList.toggle("active", parseInt(tab.dataset.tab) === tabId);
});

setupInputListeners();
}

// Initialize input listeners
setupInputListeners();

// Load saved proportion content
const savedPropTabs = JSON.parse(localStorage.getItem("proportionTabs"));
if (savedPropTabs) {
propTabs = savedPropTabs;
propTabs.forEach((tab) => {
if (tab.id > 1) {
const newTab = document.createElement("button");
newTab.classList.add("prop-numbered-tab");
newTab.dataset.tab = tab.id;
newTab.textContent = tab.id;
propNumberedTabs.insertBefore(newTab, addPropTabButton);
}
});
switchPropTab(parseInt(localStorage.getItem("currentPropTab")) || 1);
}

// Save content periodically
setInterval(() => {
propTabs[currentPropTab - 1].content = propContainer.innerHTML;
localStorage.setItem("proportionTabs", JSON.stringify(propTabs));
localStorage.setItem("currentPropTab", currentPropTab);
}, 5000);
}

// =====================================================

// END
Expand Down

0 comments on commit 3e5e698

Please sign in to comment.