Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e62ea0e

Browse files
Merge pull request #1920 from Meetpidev/master
Roman Numeral Converter
2 parents 30879ae + 0f72d9e commit e62ea0e

File tree

3 files changed

+132
-0
lines changed

3 files changed

+132
-0
lines changed

‎Roman_Number_Converter/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Roman Numeral Converter</title>
8+
</head>
9+
<body>
10+
<main id="container">
11+
<h1>Roman Numeral Converter</h1>
12+
<input type="number" min="1" id="number" autocomplete="off">
13+
<button id="convert-btn">Convert</button>
14+
<div id="output"></div>
15+
</main>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎Roman_Number_Converter/script.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
let number = document.getElementById("number");
2+
let convertBtn = document.getElementById("convert-btn");
3+
let output = document.getElementById("output");
4+
5+
const romans = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
6+
const numerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
7+
8+
function convertToRoman() {
9+
let userInput = Number(number.value);
10+
output.innerText = "";
11+
output.style.padding = "1.2rem";
12+
13+
if (number.value === "") {
14+
output.innerText = "Please enter a valid number";
15+
return;
16+
} else if (number.value <= 0) {
17+
output.innerText = "Please enter a number greater than or equal to 1";
18+
return;
19+
} else if (number.value > 3999) {
20+
output.innerText = "Please enter a number less than or equal to 3999";
21+
return;
22+
}
23+
24+
for (let i = 0; i < romans.length; i++) {
25+
while (userInput >= numerals[i]) {
26+
userInput -= numerals[i];
27+
output.innerText += romans[i];
28+
}
29+
}
30+
31+
}
32+
33+
window.addEventListener("load", () => {
34+
output.style.padding = "0px";
35+
})
36+
convertBtn.addEventListener("click", convertToRoman);
37+
number.addEventListener("keydown", e => {
38+
if (e.key === "Enter") {
39+
convertToRoman();
40+
}
41+
});

‎Roman_Number_Converter/style.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Arial', sans-serif;
6+
}
7+
8+
html, body {
9+
height: 100%;
10+
background-color: #121212; /* Darker background for contrast */
11+
}
12+
13+
#container {
14+
height: 100%;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
h1 {
22+
margin-bottom: 1.5em;
23+
color: #f0f0f0; /* Lighter color for better readability */
24+
}
25+
26+
#number {
27+
border: none;
28+
outline: none;
29+
padding: 15px;
30+
background-color: #2c2c2c; /* Slightly lighter gray */
31+
margin-bottom: 1.5em;
32+
width: 30%;
33+
font-size: 1.5rem;
34+
color: white;
35+
border-radius: 5px; /* Rounded corners */
36+
transition: background-color 0.3s ease; /* Smooth transition */
37+
}
38+
39+
#number::placeholder {
40+
color: #b0b0b0; /* Placeholder color */
41+
}
42+
43+
#number:hover {
44+
background-color: #3a3a3a; /* Darker on hover */
45+
}
46+
47+
#convert-btn {
48+
border: none;
49+
padding: 15px;
50+
cursor: pointer;
51+
margin-bottom: 1.5em;
52+
width: 30%;
53+
font-size: 1.5rem;
54+
background-color: dodgerblue; /* Button color */
55+
color: white; /* Text color */
56+
border-radius: 5px; /* Rounded corners */
57+
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
58+
}
59+
60+
#convert-btn:hover {
61+
background-color: #0056b3; /* Darker blue on hover */
62+
transform: scale(1.05); /* Slightly enlarge on hover */
63+
}
64+
65+
#output {
66+
background-color: #4caf50; /* Green output box */
67+
color: white;
68+
padding: 1.2rem;
69+
font-size: 2rem;
70+
border-radius: 5px; /* Rounded corners */
71+
width: fit-content; /* Adjust width to content */
72+
margin-top: -10px; /* Overlap slightly with button for aesthetics */
73+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /