All Symbols
diff --git a/roman_numerals.html b/roman_numerals.html
new file mode 100644
index 0000000..8db3a25
--- /dev/null
+++ b/roman_numerals.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+ Roman Numeral Generator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Roman Numeral Generator
+ Suitable to copy and paste into
+
+
+
+
+
+
+ Convert from Roman Numerals
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/romanNumerals.js b/scripts/romanNumerals.js
new file mode 100644
index 0000000..0e88630
--- /dev/null
+++ b/scripts/romanNumerals.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', function () {
+ const form = document.getElementById('alternatingTextForm');
+ const numberInput = document.getElementById('textInput');
+ const romanOutput = document.getElementById('alternatingTextOutput');
+ const copyButton = document.getElementById('copyButton');
+
+ form.addEventListener('submit', function (e) {
+ e.preventDefault();
+ const number = parseInt(numberInput.value);
+ romanOutput.value = convertToRoman(number);
+ });
+
+ copyButton.addEventListener('click', function () {
+ navigator.clipboard.writeText(romanOutput.value).then(() => {
+ copyButton.textContent = 'Copied!';
+ setTimeout(() => copyButton.textContent = 'Copy Roman Numerals', 5000);
+ }).catch(err => console.error('Error copying text: ', err));
+ });
+
+ function convertToRoman(num) {
+ if (num < 1 || num > 3999) return "Invalid Number"; // Roman numerals range
+ const lookup = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1};
+ let roman = '';
+ for (let i in lookup ) {
+ while ( num >= lookup[i] ) {
+ roman += i;
+ num -= lookup[i];
+ }
+ }
+ return roman;
+ }
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+ // ... [existing code for converting to Roman numerals] ...
+
+ const romanToArabicForm = document.getElementById('romanToArabicForm');
+ const romanInput = document.getElementById('romanInput');
+ const arabicOutput = document.getElementById('arabicNumberOutput');
+ const copyArabicButton = document.getElementById('copyArabicButton');
+
+ romanToArabicForm.addEventListener('submit', function (e) {
+ e.preventDefault();
+ arabicOutput.value = convertToArabic(romanInput.value.toUpperCase());
+ });
+
+ copyArabicButton.addEventListener('click', function () {
+ navigator.clipboard.writeText(arabicOutput.value).then(() => {
+ copyArabicButton.textContent = 'Copied!';
+ setTimeout(() => copyArabicButton.textContent = 'Copy Number', 5000);
+ }).catch(err => console.error('Error copying text: ', err));
+ });
+
+ function convertToArabic(roman) {
+ const romanNumerals = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1};
+ let index = 0, num = 0;
+ for (let i in romanNumerals) {
+ while (roman.indexOf(i, index) === index) {
+ num += romanNumerals[i];
+ index += i.length;
+ }
+ }
+ return num;
+ }
+});
+
diff --git a/style/styles.css b/style/styles.css
index 29fca2f..cf62515 100644
--- a/style/styles.css
+++ b/style/styles.css
@@ -88,28 +88,31 @@ button:active {
}
/* Style the form */
-#alternatingTextForm {
+#alternatingTextForm, #romanToArabicForm {
margin-bottom: 1rem; /* Spacing below the form */
}
-/* Style the input */
-#textInput {
+/* Consolidated input style */
+input[type="text"], input[type="number"], #textInput, #romanInput {
width: 100%; /* Full width */
- padding: 0.5rem;
+ padding: 1rem; /* Consistent padding */
margin-bottom: 1rem; /* Spacing below the input */
- border: 1px solid #ccc; /* Subtle border */
- border-radius: 4px; /* Slightly rounded corners */
+ border: 2px solid #007bff; /* Consistent border */
+ border-radius: 8px; /* Consistent rounded corners */
+ font-size: 1.25rem; /* Larger font size */
+ font-family: 'Roboto', sans-serif; /* Ensuring the font family is consistent */
}
+
+
/* Style the output textarea */
-#alternatingTextOutput, #alternatingTextOutput1 {
+textarea {
width: 100%; /* Full width */
- padding: 0.5rem;
- height: 3em; /* Fixed height for the textarea */
- border: 1px solid #ccc; /* Subtle border */
- border-radius: 4px; /* Slightly rounded corners */
- margin-bottom: 1rem; /* Spacing below the textarea */
- background-color: #f8f8f8; /* Slightly off-white background */
+ padding: 1rem; /* Match input padding */
+ border: 2px solid #007bff; /* Match input border */
+ border-radius: 8px; /* Match input border-radius */
+ font-size: 1.25rem; /* Match input font size */
+ font-family: 'Roboto', sans-serif; /* Ensuring the font family is consistent */
resize: none; /* Disable resizing */
}