Skip to content

Dynamic #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
areebn321 merged 4 commits into from
Aug 15, 2025
Merged

Dynamic #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f06c113
Added Dynamic data functionately
areeb078 Aug 9, 2025
1b4c4cc
add gitignore
areeb078 Aug 15, 2025
ea68769
remove gitignore file
areeb078 Aug 15, 2025
6980a8e
added uncomplete ask feature
areeb078 Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 60 additions & 1 deletion edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EDITs</title>
<title>Committee | Edit</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
Expand Down Expand Up @@ -107,6 +107,13 @@
<div class="glass-container">
<a href="index.html">← Back</a>
<h1 id="show"></h1>
<!-- User management section -->
<div style="margin-bottom: 18px;">
<label style="font-weight:600;">Users:</label>
<ul id="userList" style="padding-left:18px; margin:8px 0;"></ul>
<input type="text" id="newUserInput" placeholder="Add user name" style="border-radius:8px; padding:6px 10px; border:1px solid #ccc; font-size:1em;">
<button id="addUserBtn">Add User</button>
</div>
<button id="showData">Show Data of Local Storage</button>
<div style="margin-bottom: 10px;">
<button id="editBasic">Edit Basic Value</button>
Expand Down Expand Up @@ -191,8 +198,60 @@ <h1 id="show"></h1>
localStorage.clear();
alert("All data cleared from localStorage.");
document.getElementById('show').innerText = "";
userList.innerHTML = "";
}
});

// --- User management logic ---
function getUsers() {
// Remove default value, return empty array if not set
return JSON.parse(localStorage.getItem('users') || '[]');
}
function setUsers(users) {
localStorage.setItem('users', JSON.stringify(users));
window.dispatchEvent(new Event('storage')); // Notify other tabs/pages
}
function renderUserList() {
const users = getUsers();
const ul = document.getElementById('userList');
ul.innerHTML = '';
users.forEach((user, idx) => {
const li = document.createElement('li');
li.style.marginBottom = '4px';
li.textContent = user + ' ';
// Remove button (only if more than 1 user)
if (users.length > 1) {
const rmBtn = document.createElement('button');
rmBtn.textContent = 'Remove';
rmBtn.style.fontSize = '0.9em';
rmBtn.style.marginLeft = '8px';
rmBtn.onclick = function() {
users.splice(idx, 1);
setUsers(users);
renderUserList();
};
li.appendChild(rmBtn);
}
ul.appendChild(li);
});
}
document.getElementById('addUserBtn').onclick = function() {
const input = document.getElementById('newUserInput');
let val = input.value.trim();
if (val) {
let users = getUsers();
if (!users.includes(val)) {
users.push(val);
setUsers(users);
renderUserList();
input.value = '';
} else {
alert('User already exists.');
}
}
};
// Initial render
renderUserList();
</script>
</body>
</html>
122 changes: 110 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,29 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Doc</title>
<title>Committee | Home</title>
</head>
<body>
<a href="edit.html">Go to Edit page</a>
<div id="total">
<table class="table">
<thead>
<tr>
<th>Areeb Total</th>
<th>Hania Total</th>
<tr id="totalHeaderRow">
<!-- Dynamic user total headers will be inserted here -->
</tr>
</thead>
<tbody >
<tr >
<td id="totalRowAreeb">*</td>
<td id="totalRowHania">*</td>
</tr>
<tr id="totalRow">
<!-- Dynamic user total values will be inserted here -->
</tr>
</tbody>
</table>
</div>
<table class="table" id="table" >
<thead>
<tr>
<tr id="userHeaderRow">
<th>Date</th>
<th>Areeb</th>
<th>Hania</th>
<!-- Dynamic user headers will be inserted here -->
</tr>
</thead>
<tbody id="tableBody">
Expand All @@ -42,6 +39,107 @@
</div>

<script src="main.js"></script>
<script src="script.js"></script>
<script src="script.js"></script>
<script>
function renderUserHeadersAndTotals() {
const users = JSON.parse(localStorage.getItem('users') || '[]');
const userHeaderRow = document.getElementById('userHeaderRow');
userHeaderRow.innerHTML = '<th>Date</th>' + users.map(u => `<th>${u}</th>`).join('');
const totalHeaderRow = document.getElementById('totalHeaderRow');
totalHeaderRow.innerHTML = users.map(u => `<th>${u} Total</th>`).join('');
const totalRow = document.getElementById('totalRow');
totalRow.innerHTML = users.map((u, i) => `<td id="totalRowUser${i}">*</td>`).join('');
}
renderUserHeadersAndTotals();

// Prevent adding rows if no users exist
document.addEventListener('DOMContentLoaded', function() {
const tableBody = document.getElementById('tableBody');
const addRowBtn = document.getElementById('addRow');
addRowBtn.addEventListener('click', function(e) {
const users = JSON.parse(localStorage.getItem('users') || '[]');
if (!users.length) {
alert('Please add at least one user in the Edit page before adding rows.');
e.stopImmediatePropagation();
return false;
}
}, true);
});

// Helper to reload table UI after row deletion
function reloadTableUI() {
if (window.loadTableFromLS) {
window.loadTableFromLS();
} else if (typeof loadTableFromLS === 'function') {
loadTableFromLS();
} else {
location.reload();
}
}

// Remove Row: Select row, then confirm with random 3-letter code, and update localStorage/UI-

document.addEventListener('DOMContentLoaded', function() {
const removeRowBtn = document.getElementById('removeRow');
let rowSelectorDiv = null;

removeRowBtn.addEventListener('click', function(e) {
const tableBody = document.getElementById('tableBody');
if (!tableBody.rows.length) {
alert('No rows to remove.');
return;
}
if (rowSelectorDiv && rowSelectorDiv.parentNode) {
rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
}
rowSelectorDiv = document.createElement('div');
rowSelectorDiv.style.position = 'fixed';
rowSelectorDiv.style.top = '50%';
rowSelectorDiv.style.left = '50%';
rowSelectorDiv.style.transform = 'translate(-50%, -50%)';
rowSelectorDiv.style.background = '#fff';
rowSelectorDiv.style.padding = '18px 24px';
rowSelectorDiv.style.border = '2px solid #6a82fb';
rowSelectorDiv.style.borderRadius = '12px';
rowSelectorDiv.style.boxShadow = '0 4px 24px rgba(31,38,135,0.13)';
rowSelectorDiv.style.zIndex = '9999';
rowSelectorDiv.innerHTML = '<b>Select a row to remove:</b><br><br>';
for (let i = 0; i < tableBody.rows.length; i++) {
const row = tableBody.rows[i];
const btn = document.createElement('button');
btn.textContent = `Row ${i + 1} (${row.cells[0]?.textContent || ''})`;
btn.style.margin = '4px 0';
btn.onclick = function() {
const code = Array(3).fill(0).map(() => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
const input = prompt(`Type the following 3 small letters to confirm deletion:\n${code}`);
if (input === code) {
let data = JSON.parse(localStorage.getItem('tableData') || '[]');
data.splice(i, 1);
localStorage.setItem('tableData', JSON.stringify(data));
reloadTableUI();
alert('Row deleted.');
} else {
alert('Incorrect code. Row not deleted.');
}
if (rowSelectorDiv && rowSelectorDiv.parentNode) {
rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
}
};
rowSelectorDiv.appendChild(btn);
rowSelectorDiv.appendChild(document.createElement('br'));
}
const cancelBtn = document.createElement('button');
cancelBtn.textContent = 'Cancel';
cancelBtn.style.marginTop = '10px';
cancelBtn.onclick = function() {
if (rowSelectorDiv && rowSelectorDiv.parentNode) {
rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
}
};
rowSelectorDiv.appendChild(cancelBtn);
document.body.appendChild(rowSelectorDiv);
});
});
</script>
</body>
</html>
92 changes: 70 additions & 22 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,80 @@ if(!localStorage.getItem('basicValue')) {
let val= prompt("Enter a value:");
localStorage.setItem('basicValue',val );
console.log("Local storage initialized.");
}
function getUsers() {
return JSON.parse(localStorage.getItem('users') || '[]');
}

function doTotal() {

let tableData = localStorage.getItem('tableData')|| 'No table data found in localStorage.'
tableData= JSON.parse(tableData);
console.log(tableData);
const users = getUsers();
const data = JSON.parse(localStorage.getItem('tableData') || '[]');
const totals = Array(users.length).fill(0);

tableData.forEach(row => {
console.log(row);
});
data.forEach(row => {
users.forEach((user, idx) => {
if (
row.users &&
row.users[user]
) {

const doneVal = row.users[user].done;

if (
(doneVal === true || doneVal === "true")
) {

totals[idx] += Number(row.users[user].value);
}
}
});
});

if (Array.isArray(tableData)) {
let areebSum = 0;
let haniaSum = 0;
tableData.forEach(row => {
if (row.areeb && row.areeb.done) {
areebSum += Number(row.areeb.value) || 0;
}
if (row.hania && row.hania.done) {
haniaSum += Number(row.hania.value) || 0;
}
users.forEach((user, idx) => {
const td = document.getElementById(`totalRowUser${idx}`);
if (td) td.textContent = totals[idx];
});
console.log("Areeb:", areebSum);
console.log("Hania:", haniaSum);
totalRowAreeb.textContent = areebSum;
totalRowHania.textContent = haniaSum;
}

function renderUserHeadersAndTotals() {
const users = JSON.parse(localStorage.getItem('users') || '[]');
// Table headers
const userHeaderRow = document.getElementById('userHeaderRow');
if (userHeaderRow) {
userHeaderRow.innerHTML = '<th>Date</th>' + users.map(u => `<th>${u}</th>`).join('');
}
// Total headers
const totalHeaderRow = document.getElementById('totalHeaderRow');
if (totalHeaderRow) {
totalHeaderRow.innerHTML = users.map(u => `<th>${u} Total</th>`).join('');
}
// Total values
const totalRow = document.getElementById('totalRow');
if (totalRow) {
const data = JSON.parse(localStorage.getItem('tableData') || '[]');
let sumArr=[];
const totals = users.map(user => {
let sum = 0;
data.forEach(row => {
if (
row.users &&
row.users[user] &&
(row.users[user].done === true || row.users[user].done === "true") &&
!isNaN(Number(row.users[user].value)) &&
row.users[user].value !== ""
) {
sum += Number(row.users[user].value);
}
});
sumArr.push(sum);
return sum;
});
totalRow.innerHTML = users.map((u, i) => { return `<td id="totalRowUser${i}">45</td>` }).join('');

}
}
doTotal();
// Ensure headers are rendered on page load
document.addEventListener('DOMContentLoaded', function() {
renderUserHeadersAndTotals();
doTotal();
});
Loading
Loading