Here’s a simple HTML, CSS, and JavaScript implementation of a Roman numerals chart. It includes a table displaying numbers and their Roman numeral equivalents, along with three examples of conversions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roman Numerals Chart</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
table {
width: 50%;
margin: auto;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Roman Numerals Chart (1-100)</h2>
<table>
<thead>
<tr>
<th>Number</th>
<th>Roman Numeral</th>
</tr>
</thead>
<tbody id="romanTable">
</tbody>
</table>
<script>
function toRoman(num) {
const romanMap = [
{ value: 100, numeral: 'C' },
{ value: 90, numeral: 'XC' },
{ value: 50, numeral: 'L' },
{ value: 40, numeral: 'XL' },
{ value: 10, numeral: 'X' },
{ value: 9, numeral: 'IX' },
{ value: 5, numeral: 'V' },
{ value: 4, numeral: 'IV' },
{ value: 1, numeral: 'I' }
];
let roman = '';
for (let i = 0; i < romanMap.length; i++) {
while (num >= romanMap[i].value) {
roman += romanMap[i].numeral;
num -= romanMap[i].value;
}
}
return roman;
}
function generateTable() {
const tableBody = document.getElementById("romanTable");
for (let i = 1; i <= 100; i++) {
let row = document.createElement("tr");
let numCell = document.createElement("td");
let romanCell = document.createElement("td");
numCell.textContent = i;
romanCell.textContent = toRoman(i);
row.appendChild(numCell);
row.appendChild(romanCell);
tableBody.appendChild(row);
}
}
generateTable();
</script>
</body>
</html>