Skip to content

Roman Numeral Converter #1920

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

Merged
merged 3 commits into from
Oct 4, 2024
Merged

Roman Numeral Converter #1920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06519b3
The Pokémon Search App
Meetpidev Oct 4, 2024
4d23921
Delete projects/pokemonSearch directory
Meetpidev Oct 4, 2024
0f72d9e
Roman_Number_Converter
Meetpidev Oct 4, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions Roman_Number_Converter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Roman Numeral Converter</title>
</head>
<body>
<main id="container">
<h1>Roman Numeral Converter</h1>
<input type="number" min="1" id="number" autocomplete="off">
<button id="convert-btn">Convert</button>
<div id="output"></div>
</main>
<script src="script.js"></script>
</body>
</html>
41 changes: 41 additions & 0 deletions Roman_Number_Converter/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
let number = document.getElementById("number");
let convertBtn = document.getElementById("convert-btn");
let output = document.getElementById("output");

const romans = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
const numerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];

function convertToRoman() {
let userInput = Number(number.value);
output.innerText = "";
output.style.padding = "1.2rem";

if (number.value === "") {
output.innerText = "Please enter a valid number";
return;
} else if (number.value <= 0) {
output.innerText = "Please enter a number greater than or equal to 1";
return;
} else if (number.value > 3999) {
output.innerText = "Please enter a number less than or equal to 3999";
return;
}

for (let i = 0; i < romans.length; i++) {
while (userInput >= numerals[i]) {
userInput -= numerals[i];
output.innerText += romans[i];
}
}

}

window.addEventListener("load", () => {
output.style.padding = "0px";
})
convertBtn.addEventListener("click", convertToRoman);
number.addEventListener("keydown", e => {
if (e.key === "Enter") {
convertToRoman();
}
});
73 changes: 73 additions & 0 deletions Roman_Number_Converter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

html, body {
height: 100%;
background-color: #121212; /* Darker background for contrast */
}

#container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

h1 {
margin-bottom: 1.5em;
color: #f0f0f0; /* Lighter color for better readability */
}

#number {
border: none;
outline: none;
padding: 15px;
background-color: #2c2c2c; /* Slightly lighter gray */
margin-bottom: 1.5em;
width: 30%;
font-size: 1.5rem;
color: white;
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition */
}

#number::placeholder {
color: #b0b0b0; /* Placeholder color */
}

#number:hover {
background-color: #3a3a3a; /* Darker on hover */
}

#convert-btn {
border: none;
padding: 15px;
cursor: pointer;
margin-bottom: 1.5em;
width: 30%;
font-size: 1.5rem;
background-color: dodgerblue; /* Button color */
color: white; /* Text color */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
}

#convert-btn:hover {
background-color: #0056b3; /* Darker blue on hover */
transform: scale(1.05); /* Slightly enlarge on hover */
}

#output {
background-color: #4caf50; /* Green output box */
color: white;
padding: 1.2rem;
font-size: 2rem;
border-radius: 5px; /* Rounded corners */
width: fit-content; /* Adjust width to content */
margin-top: -10px; /* Overlap slightly with button for aesthetics */
}