Aminigbo · December 5, 2024 16:11
diff --git a/table-array.html b/table-array.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nigerian States Table</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f5f5f5;
    }

    table {
      width: 80%;
      margin: 20px auto;
      border-collapse: collapse;
      background: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 15px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tr:hover {
      background-color: #f1f1f1;
    }

    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      padding: 20px;
      border-radius: 8px;
    }

    .modal-header {
      font-size: 1.5em;
      margin-bottom: 15px;
    }

    .modal-content {
      font-size: 1em;
    }

    .modal-close {
      cursor: pointer;
      color: white;
      background-color: red;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 0.9em;
    }

    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
  </style>
 </head>
 <body>
  <h1 style="text-align: center;">Nigerian States</h1>
  <table>
    <thead>
      <tr>
        <th>S/N</th>
        <th>State</th>
      </tr>
    </thead>
    <tbody id="stateTable"></tbody>
  </table>

  <div class="overlay" id="overlay"></div>
  <div class="modal" id="modal">
    <div class="modal-header" id="modalHeader">State Name</div>
    <div class="modal-content" id="modalContent">More info about the state will be displayed here.</div>
    <button class="modal-close" onclick="closeModal()">Close</button>
  </div>

  <script>
    const states = [
      { name: "Lagos", info: "Lagos is the most populous state and a major financial hub in Nigeria." },
      { name: "Kano", info: "Kano is known for its rich cultural heritage and commercial activities." },
      { name: "Rivers", info: "Rivers is renowned for its oil and gas production." },
      { name: "Kaduna", info: "Kaduna is a significant state in terms of education and industry." },
      { name: "Enugu", info: "Enugu is known as the 'Coal City' due to its coal mining activities." }
    ];

    const tableBody = document.getElementById('stateTable');
    const modal = document.getElementById('modal');
    const overlay = document.getElementById('overlay');
    const modalHeader = document.getElementById('modalHeader');
    const modalContent = document.getElementById('modalContent');

    function populateTable() {
      states.forEach((state, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${index + 1}</td>
          <td><a href="#" onclick="openModal(${index})" style="color: #007BFF; text-decoration: none;">${state.name}</a></td>
        `;
        tableBody.appendChild(row);
      });
    }

    function openModal(index) {
      const state = states[index];
      modalHeader.textContent = state.name;
      modalContent.textContent = state.info;
      modal.style.display = 'block';
      overlay.style.display = 'block';
    }

    function closeModal() {
      modal.style.display = 'none';
      overlay.style.display = 'none';
    }

    // Populate the table on page load
    populateTable();
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Nigerian States Table</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	background-color: #f5f5f5;
	}

	table {
	width: 80%;
	margin: 20px auto;
	border-collapse: collapse;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	th, td {
	padding: 15px;
	text-align: left;
	border: 1px solid #ddd;
	}

	th {
	background-color: #4CAF50;
	color: white;
	}

	tr:nth-child(even) {
	background-color: #f9f9f9;
	}

	tr:hover {
	background-color: #f1f1f1;
	}

	.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	background-color: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	padding: 20px;
	border-radius: 8px;
	}

	.modal-header {
	font-size: 1.5em;
	margin-bottom: 15px;
	}

	.modal-content {
	font-size: 1em;
	}

	.modal-close {
	cursor: pointer;
	color: white;
	background-color: red;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 0.9em;
	}

	.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	}
	</style>
	</head>
	<body>
	<h1 style="text-align: center;">Nigerian States</h1>
	<table>
	<thead>
	<tr>
	<th>S/N</th>
	<th>State</th>
	</tr>
	</thead>
	<tbody id="stateTable"></tbody>
	</table>

	<div class="overlay" id="overlay"></div>
	<div class="modal" id="modal">
	<div class="modal-header" id="modalHeader">State Name</div>
	<div class="modal-content" id="modalContent">More info about the state will be displayed here.</div>
	<button class="modal-close" onclick="closeModal()">Close</button>
	</div>

	<script>
	const states = [
	{ name: "Lagos", info: "Lagos is the most populous state and a major financial hub in Nigeria." },
	{ name: "Kano", info: "Kano is known for its rich cultural heritage and commercial activities." },
	{ name: "Rivers", info: "Rivers is renowned for its oil and gas production." },
	{ name: "Kaduna", info: "Kaduna is a significant state in terms of education and industry." },
	{ name: "Enugu", info: "Enugu is known as the 'Coal City' due to its coal mining activities." }
	];

	const tableBody = document.getElementById('stateTable');
	const modal = document.getElementById('modal');
	const overlay = document.getElementById('overlay');
	const modalHeader = document.getElementById('modalHeader');
	const modalContent = document.getElementById('modalContent');

	function populateTable() {
	states.forEach((state, index) => {
	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${index + 1}</td>
	<td><a href="#" onclick="openModal(${index})" style="color: #007BFF; text-decoration: none;">${state.name}</a></td>
	`;
	tableBody.appendChild(row);
	});
	}

	function openModal(index) {
	const state = states[index];
	modalHeader.textContent = state.name;
	modalContent.textContent = state.info;
	modal.style.display = 'block';
	overlay.style.display = 'block';
	}

	function closeModal() {
	modal.style.display = 'none';
	overlay.style.display = 'none';
	}

	// Populate the table on page load
	populateTable();
	</script>
	</body>
	</html>