-
Notifications
You must be signed in to change notification settings - Fork 0
/
roman_numerals.html
112 lines (108 loc) · 6.7 KB
/
roman_numerals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Roman Numeral Generator | Pangram World" />
<meta property="og:description"
content="Effortlessly convert numbers to Roman numerals or vice versa with our Roman Numeral Generator. Ideal for students, educators, and history enthusiasts. Whether you input 542 to get DXLII or XIX to find 19, our tool makes conversion and copying simple." />
<meta property="og:image" content="https://www.pangram-world.com/images/pangram-world-title.png" />
<meta property="og:url" content="https://www.pangram-world.com/roman_numerals.html" />
<title>Roman Numeral Generator | Pangram World</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.css">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/cards.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- ... favicon ... -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="images/android-chrome-512x512.png">
<script src="scripts/main.js" defer></script>
<script src="scripts/bootstrap.bundle.js"></script>
<script src="https://kit.fontawesome.com/18fe617275.js" crossorigin="anonymous"></script>
<!-- Add any additional meta tags and scripts here -->
</head>
<body>
<!-- Main content area where your page content will go -->
<header id="globalHeader"></header>
<main>
<h2>Roman Numeral Generator</h2>
<p class="info-text">Suitable to copy and paste into <i class="fab fa-facebook facebook-icon"></i></p>
<!-- Help Button to trigger modal -->
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#romanNumeralHelpModal">
<i class="far fa-question-circle red"></i>
</button>
<!-- The Modal -->
<div class="modal fade" id="romanNumeralHelpModal" tabindex="-1" aria-labelledby="romanNumeralHelpModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="romanNumeralHelpModalLabel">Roman Numeral Guide</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Roman numerals are based on seven symbols:</p>
<ul>
<li><strong>I</strong> - 1</li>
<li><strong>V</strong> - 5</li>
<li><strong>X</strong> - 10</li>
<li><strong>L</strong> - 50</li>
<li><strong>C</strong> - 100</li>
<li><strong>D</strong> - 500</li>
<li><strong>M</strong> - 1000</li>
</ul>
<p>Numbers are formed by combining symbols and adding their values. For example:</p>
<ul>
<li><strong>VIII</strong> - 8</li>
<li><strong>XII</strong> - 12</li>
<li><strong>XX</strong> - 20</li>
<li><strong>XXXIII</strong> - 33</li>
<li><strong>XLV</strong> - 45</li>
<li><strong>L</strong> - 50</li>
<li><strong>XC</strong> - 90</li>
<li><strong>C</strong> - 100</li>
<li><strong>D</strong> - 500</li>
<li><strong>CM</strong> - 900</li>
<li><strong>MMXXIV</strong> - 2024</li>
</ul>
<p>Note: The same symbol is not meant be used more than three times in a row. You'll get away with it here, maybe. But this also means you can only go as high as 3999, any other number will be invalid.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form id="alternatingTextForm">
<input type="number" id="textInput" placeholder="Enter your number here" required>
<button type="submit" class="transform-btn">Transform</button>
</form>
<!-- Output textbox -->
<textarea id="alternatingTextOutput" placeholder="Your Roman Numerals will appear here" readonly></textarea>
<!-- Copy button -->
<button id="copyButton" type="button" class="copy-btn">Copy Roman Numerals</button>
<br>
<h2>Convert from Roman Numerals</h2>
<form id="romanToArabicForm">
<input type="text" id="romanInput" placeholder="Enter Roman numerals" required>
<button type="submit" class="transform-btn">Convert</button>
</form>
<!-- Output textbox -->
<textarea id="arabicNumberOutput" placeholder="Arabic numbers will appear here" readonly></textarea>
<!-- Copy button -->
<button id="copyArabicButton" type="button" class="copy-btn">Copy Number</button>
<!-- Scroll to Top button (hidden by default with inline style.css) -->
<button onclick="scrollToTop()" id="scrollToTopButton"
style="display: none; position: fixed; bottom: 20px; right: 20px;"><i class="fas fa-arrow-up"></i></button>
</main>
<footer id="globalFooter"></footer>
<script src="scripts/toUnicodeVariant.js"></script>
<script src="scripts/romanNumerals.js"></script>
</body>
</html>