diff --git a/Roman_Number_Converter/index.html b/Roman_Number_Converter/index.html
new file mode 100644
index 00000000..4ec6ad86
--- /dev/null
+++ b/Roman_Number_Converter/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Roman Numeral Converter
+
+
+
+ Roman Numeral Converter
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Roman_Number_Converter/script.js b/Roman_Number_Converter/script.js
new file mode 100644
index 00000000..ea90c3f8
--- /dev/null
+++ b/Roman_Number_Converter/script.js
@@ -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();
+ }
+});
\ No newline at end of file
diff --git a/Roman_Number_Converter/style.css b/Roman_Number_Converter/style.css
new file mode 100644
index 00000000..70b04c93
--- /dev/null
+++ b/Roman_Number_Converter/style.css
@@ -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 */
+}
\ No newline at end of file