How to print login and signup details in a site using Admin button

I created a login form using html and css, i had created a Admin button when i click on the admin button it needs to print the logged in and signup persons details in a table format.

Iam learning java script, html and css. So i created a simple login form and then i created a admin buton.I decided to give a functionality to admin buton.

1. When i logged in or signup i need to store that data
   2)I need to print the stored data when i clicked on admin button in tabular format.

Step 1: HTML Form: Create an HTML form for login and signup with appropriate input fields for username, password, and any other required fields, Here is code.

Step 2: Write JavaScript code to handle form submissions and store the login/signup data.

Step 3: JavaScript to Display Admin Table: Write JavaScript code to display the stored login/signup data in a tabular format when the admin button is clicked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Store the login/signup data
let userData = [];
// Handle login form submission
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault();
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
userData.push({
username,
password
});
this.reset();
});
// Handle signup form submission
document.getElementById("signupForm").addEventListener("submit", function(event) {
event.preventDefault();
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
userData.push({
username,
password
});
this.reset();
});
document.getElementById("adminButton").addEventListener("click", function() {
let tableBody = document.querySelector("#adminTable tbody");
tableBody.innerHTML = ""; // Clear existing table rows
for (let user of userData) {
let row = document.createElement("tr");
let usernameCell = document.createElement("td");
let passwordCell = document.createElement("td");
usernameCell.textContent = user.username;
passwordCell.textContent = user.password;
row.appendChild(usernameCell);
row.appendChild(passwordCell);
tableBody.appendChild(row);
}
});

<!-- language: lang-html -->

<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Signup</button>
</form>
<button id="adminButton">Admin</button>
<table id="adminTable">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody></tbody>
</table>

<!-- end snippet -->

I'll preface this by saying this won't be the cleanest solution, but hopefully the easiest to understand as a beginner.

For the first part of the problem, create a handler function for the signup button on the form which extracts the data from the form fields, creates an object from this data and adds it to an array of users.

For the admin functionality, add an empty table element to your HTML. Then create another handler, for the admin button, which iterates the array of users and creates, as a child of the table element you created, a table row for each of the user objects in the array.

If you have any trouble figuring these out post a code sample and I'll give you some further pointers

EDIT: If you do struggle, Shanuka's provided code samples should help

> Here's an example using an array to store the data:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script>
var users = []; // Array to store user details
function storeUserDetails(username, password) {
var user = {
username: username,
password: password
};
users.push(user);
}
function loginUser() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
storeUserDetails(username, password);
}
</script>

> Display Stored Data
Create a table in HTML where you can display the stored user details.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<table id="userTable" style="display: none;">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody id="userTableBody">
<!-- User details will be added dynamically here -->
</tbody>
</table>

> Show data

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script>
function showUserDetails() {
var table = document.getElementById("userTable");
var tableBody = document.getElementById("userTableBody");
// Clear table body
tableBody.innerHTML = "";
// Populate table with user details
for (var i = 0; i < users.length; i++) {
var user = users[i];
var row = tableBody.insertRow();
var usernameCell = row.insertCell();
var passwordCell = row.insertCell();
usernameCell.innerHTML = user.username;
passwordCell.innerHTML = user.password;
}
// Show the table
table.style.display = "table";
}
</script>

> Trigger the Functions

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<form onsubmit="loginUser()">
<!-- Login form fields -->
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<button onclick="showUserDetails()">Admin</button>