From b6794ea1dd636470306d5188e23d350a3cee3448 Mon Sep 17 00:00:00 2001 From: bocharudo Date: Sat, 30 Nov 2024 11:35:22 +0800 Subject: [PATCH] upload files --- index.html | 41 ++++++++++++++++++++++ script.js | 69 ++++++++++++++++++++++++++++++++++++ styles.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 211 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..956cf46 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Roman Numeral Converter by rain + + + + + + + + + + + + + +
+
+

Roman Numeral Converter

+

This simple tool lets you quickly convert numbers to Roman numerals. Just enter a number, press "Convert," and get the Roman numeral equivalent instantly. Perfect for quick conversions anytime!

+
+
+
+ + + +
+
+ +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..579cea8 --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +const inputNum = document.getElementById("number"); +const convertBtn = document.getElementById("convert-btn"); +const output = document.getElementById("output"); + +const checkUserInput = (num) => { + let outputText = ""; + + if (!num || isNaN(num)) { + outputText = "Please enter a valid number"; + } else if (num < 0) { + outputText = "Please enter a number greater than or equal to 1"; + } else if (num >= 4000 ) { + outputText = "Please enter a number less than or equal to 3999"; + } else { + return null; + }; + + return outputText; +} + +const convertDecToRoman = (num) => { + let remainingNum = num; + let result = []; + + const combinations = [ + { symbol: "M", value: 1000 }, + { symbol: "CM", value: 900 }, + { symbol: "D", value: 500 }, + { symbol: "CD", value: 400 }, + { symbol: "C", value: 100 }, + { symbol: "XC", value: 90 }, + { symbol: "L", value: 50 }, + { symbol: "XL", value: 40 }, + { symbol: "X", value: 10 }, + { symbol: "IX", value: 9 }, + { symbol: "V", value: 5 }, + { symbol: "IV", value: 4 }, + { symbol: "I", value: 1 } + ]; + + combinations.forEach((combination) => { + const sym = combination.symbol; + const val = combination.value; + + while (remainingNum >= val) { + result.push(sym); + remainingNum -= val; + }; + }); + + output.classList.remove("invalid"); + output.innerText = result.join(""); +}; + +convertBtn.addEventListener("click", (e) => { + e.preventDefault(); + output.classList.remove("hidden"); + + const inputValue = inputNum.value; + const parsedInput = parseInt(inputValue); + const errorMessage = checkUserInput(parsedInput); + + if (errorMessage) { + output.innerText = errorMessage; + output.classList.add("invalid"); + } else { + convertDecToRoman(parsedInput); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9fb196a --- /dev/null +++ b/styles.css @@ -0,0 +1,101 @@ +:root { + --title-font: "Metamorphous", serif; + --text-font: "Crimson Text", serif; + --border: none; + --big-text: 3.4rem; + --medium-text: 2rem; + --small-text: 1.5rem; + --button-text-color: #fff; + --button-color: #0031a2; + --button-hover-opacity: 0.9; + --output-text-color: #fff; + --output-bg: #0031a2; + --invalid-text-color: #fff; + --invalid-bg: #cb0000; +} +*, +::before, +::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +body { + font-family: var(--text-font); +} +main { + width: 95%; + max-width: 1080px; + margin: 2rem auto; +} +.title { + font-family: var(--title-font); + font-size: var(--big-text); +} +.info { + margin-top: 1.2rem; + font-size: var(--medium-text); +} +.strong { + font-weight: bold; +} +.italic { + font-style: italic; +} +.rounded { + border-radius: 0.3rem; +} +.hidden { + display: none; +} +.converter-ctn, +.output, +.output-invalid { + box-shadow: 0rem 0.2rem 0.8rem #00000025; + padding: 2rem 3rem; + margin-top: 1.4rem; +} +form { + white-space: nowrap; +} +input, +button { + font-size: var(--small-text); +} +label { + display: block; + font-size: var(--medium-text); +} +input { + display: inline-block; + width: 70%; + padding: 0.5rem; +} +button { + display: inline-block; + width: 30%; + color: var(--button-text-color); + background-color: var(--button-color); + border: none; + padding: 0.7rem; +} +button:hover, button:focus { + opacity: var(--button-hover-opacity); +} +.output, +.invalid { + font-size: var(--medium-text); + text-align: center; + border: 0.1rem solid #000; +} +.output { + color: var(--output-text-color); + background-color: var(--output-bg); +} +.invalid { + color: var(--invalid-text-color); + background-color: var(--invalid-bg); +} \ No newline at end of file -- 2.39.5