Skip to content

Commit 0f72d9e

Browse files
MeetpidevMeetpidev
authored
Roman_Number_Converter
A simple and interactive web application that converts decimal numbers to Roman numerals. This project showcases basic HTML, CSS, and JavaScript skills while providing a user-friendly interface for converting numbers. Features - User Input: Enter a decimal number between 1 and 3999. - Conversion: Click the "Convert" button to see the corresponding Roman numeral. - Responsive Design: Works seamlessly across different devices and screen sizes. - Attractive UI: Modern design with hover effects and smooth transitions.
1 parent 4d23921 commit 0f72d9e

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)