Added roman numerals functionality

pauld0051 · Dec 31, 2023 · d1c950a · d1c950a
1 parent 6809209
commit d1c950a
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 13 deletions.
diff --git a/header.html b/header.html
@@ -40,6 +40,7 @@
                         <li><a class="dropdown-item" href="wide_text.html"><i class="fas fa-arrows-alt-h"></i> Wide</a></li>
                         <li><a class="dropdown-item" href="square_negative_text.html">🆂 Negative Square</a></li>
                         <li><a class="dropdown-item" href="doublestruck_text.html">𝔻 Double Struck</a></li>
+                        <li><a class="dropdown-item" href="roman_numerals.html">IV Roman Numerals Convertor</a></li>
                     </ul>
                 </li>
                 <li class="nav-item dropdown">

diff --git a/index.html b/index.html
@@ -87,6 +87,10 @@ <h3>Negative Square Text Generator</h3>
             <p class="card-icon">𝔻</p>
             <h3>Double Struck Text Generator</h3>
         </a>
+        <a href="roman_numerals.html" class="card" id="romanNumeralsTextCard">
+            <p class="card-icon">IV</p>
+            <h3>Roman Numerals Convertor</h3>
+        </a>
         <a href="symbols.html" class="card" id="symbolsTextCard">
             <i class="fas fa-infinity fa-3x"></i>
             <h3>All Symbols</h3>

diff --git a/roman_numerals.html b/roman_numerals.html
@@ -0,0 +1,56 @@
+<!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="Pangram World" />
+    <meta property="og:description"
+        content="Check if you have a pangram, add symbols or adjust your text to bold, italic, or even alternating caps/lower case for Facebook and other social media platforms. Additionally, enrich your science and math emails with a variety of mathematical symbols and Greek letters." />
+    <meta property="og:image" content="https://www.pangram-world.com/images/pangram-logo-192.png" />
+    <meta property="og:url" content="https://www.pangram-world.com" />
+    <title>Roman Numeral Generator</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">
+    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+    <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>Suitable to copy and paste into <i class="fab fa-facebook facebook-icon" font-size: 1em; vertical-align:
+                middle; margin-left: 0.5em;"></i></p>
+        <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>
+    </main>
+
+    <footer id="globalFooter"></footer>
+    <script src="scripts/toUnicodeVariant.js"></script>
+    <script src="scripts/romanNumerals.js"></script>
+</body>
+</html>
diff --git a/scripts/romanNumerals.js 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
@@ -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 */
 }