Added Decimal Roman Calculator (#1830)

Rakesh9100 · Aug 10, 2024 · 82ebd17 · 82ebd17
1 parent 5973e44
commit 82ebd17
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 0 deletions.
diff --git a/Calculators/Decimal-Roman-Calculator/README.md b/Calculators/Decimal-Roman-Calculator/README.md
@@ -0,0 +1,16 @@
+# <p align="center">Decimal Roman Calculator</p>
+
+## Description :-
+
+This project is a simple web-based calculator that converts given decimal number to roman number and vice-versa.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+![Screenshot 2024-08-08 233955](https://github.com/user-attachments/assets/3c44de9a-20f2-45f3-9cc6-d07ddda9857f)
+![Screenshot 2024-08-08 233932](https://github.com/user-attachments/assets/f493e6ff-2910-48a6-9e06-68cbbac238c1)
+
diff --git a/Calculators/Decimal-Roman-Calculator/index.html b/Calculators/Decimal-Roman-Calculator/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decimal-Roman Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="calculator">
+        <h1>Decimal-Roman Calculator</h1>
+        <div class="input-group">
+            <input type="number" id="decimalInput" placeholder="Enter Decimal Number">
+            <button onclick="convertToRoman()">Convert to Roman</button>
+        </div>
+        <div class="input-group">
+            <input type="text" id="romanInput" placeholder="Enter Roman Numeral">
+            <button onclick="convertToDecimal()">Convert to Decimal</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Decimal-Roman-Calculator/script.js b/Calculators/Decimal-Roman-Calculator/script.js
@@ -0,0 +1,68 @@
+function convertToRoman() {
+    const decimal = parseInt(document.getElementById('decimalInput').value);
+    if (isNaN(decimal) || decimal <= 0) {
+        document.getElementById('result').innerText = "Please enter a valid positive number.";
+        return;
+    }
+
+    const romanNumerals = [
+        { value: 1000, numeral: 'M' },
+        { value: 900, numeral: 'CM' },
+        { value: 500, numeral: 'D' },
+        { value: 400, numeral: 'CD' },
+        { 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 = '';
+    let num = decimal;
+
+    for (const { value, numeral } of romanNumerals) {
+        while (num >= value) {
+            roman += numeral;
+            num -= value;
+        }
+    }
+
+    document.getElementById('result').innerText = `${decimal} in Roman numerals is ${roman}`;
+}
+
+function convertToDecimal() {
+    const roman = document.getElementById('romanInput').value.toUpperCase();
+    const validRomanNumerals = /^[MDCLXVI]+$/; // Regular expression to match valid Roman numerals
+    if (!validRomanNumerals.test(roman)) {
+        document.getElementById('result').innerText = "Please enter a valid Roman numeral.";
+        return;
+    }
+
+    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 decimal = 0;
+    let i = 0;
+
+    while (i < roman.length) {
+        const currentNumeral = romanNumerals[roman[i]];
+        const nextNumeral = romanNumerals[roman[i + 1]];
+
+        if (nextNumeral && nextNumeral > currentNumeral) {
+            decimal += nextNumeral - currentNumeral;
+            i += 2;
+        } else {
+            decimal += currentNumeral;
+            i += 1;
+        }
+    }
+
+    document.getElementById('result').innerText = `${roman} in decimal is ${decimal}`;
+}
diff --git a/Calculators/Decimal-Roman-Calculator/styles.css b/Calculators/Decimal-Roman-Calculator/styles.css
@@ -0,0 +1,111 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, black,#013f01, #030364, #37036c, #5e025e);
+    background-size: 400% 400%;
+    animation: disco 10s infinite linear;
+}
+
+@keyframes disco {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.calculator {
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+    text-align: center;
+    animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
+    50% { box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
+    100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #333;
+    animation: color-change 5s infinite linear;
+}
+
+@keyframes color-change {
+    0% { color: #ff0000; }
+    25% { color: #067006; }
+    50% { color: #0000ff; }
+    75% { color: #710571; }
+    100% { color: #ff0000; }
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+input {
+    padding: 10px;
+    width: 200px;
+    margin-right: 10px;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    animation: input-glow 2s infinite ease-in-out;
+    outline: none;
+}
+
+@keyframes input-glow {
+    0% { border-color: #000000; box-shadow: 0 0 5px #000000; }
+    25% { border-color: #000000; box-shadow: 0 0 5px #000000; }
+    50% { border-color: #000000; box-shadow: 0 0 5px #000000; }
+    75% { border-color: #000000; box-shadow: 0 0 000000; }
+    100% { border-color: #000000; box-shadow: 0 0 5px #000000; }
+}
+
+button {
+    padding: 10px;
+    background-color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    animation: button-glow 2s infinite ease-in-out;
+}
+
+@keyframes button-glow {
+    0% { color: #ff0000; }
+    25% { color: #000000; }
+    50% { color: #0000ff; }
+    75% { color: #ff00ff; }
+    100% { color: #ff0000; }
+}
+
+button:hover {
+    animation: button-hover 0.5s forwards;
+}
+
+@keyframes button-hover {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 18px;
+    color: #333;
+    animation: text-fade 5s infinite;
+}
+
+@keyframes text-fade {
+    0% { color: #ff0000; }
+    25% { color: #00ff00; }
+    50% { color: #0000ff; }
+    75% { color: #ff00ff; }
+    100% { color: #ff0000; }
+}
+
diff --git a/index.html b/index.html
@@ -1587,6 +1587,20 @@ <h3>Effortlessly plan and manage your debt repayment with our easy-to-use Debt P
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Decimal Roman Calculator</h2>
+                <h3>Converts Decimal number to Roman number and vice-versa.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Decimal-Roman-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Debt-Payoff-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Decimal String Calculator</h2>