Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Decimal Roman Calculator #1830

Merged
merged 2 commits into from
Aug 10, 2024
Merged

Added Decimal Roman Calculator #1830

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b211e51
Decimal-Roman Calculator
nagalakshmi08 Aug 8, 2024
2b374d8
Update README.md
nagalakshmi08 Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions Calculators/Decimal-Roman-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# <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 :-

24 changes: 24 additions & 0 deletions Calculators/Decimal-Roman-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
68 changes: 68 additions & 0 deletions Calculators/Decimal-Roman-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`;
}
111 changes: 111 additions & 0 deletions Calculators/Decimal-Roman-Calculator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
}

14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1515,6 +1515,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>
Expand Down