--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="rain (bocharudo)">
+ <meta name="description" content="a simple decimal number to roman numeral converter project.">
+ <meta name="robots" content="index, follow">
+ <title>Roman Numeral Converter by rain</title>
+ <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="Roman Numeral Converter by rain">
+ <meta property="og:description" content="an online web tool that converts decimal numbers to roman numerals.">
+ <meta property="og:image" content="/assets/pfp/profile.jpg">
+ <meta property="og:url" content="https://tenkyuu.dev">
+ <meta name="twitter:card" content="summary_large_image">
+ <link rel="stylesheet" href="styles.css">
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css2?family=Metamorphous&family=Crimson+Text:ital@0;1&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+ <noscript>
+ <link href="https://fonts.bunny.net/css2?family=Metamorphous&family=Crimson+Text:ital@0;1&display=swap" rel="stylesheet">
+ </noscript>
+</head>
+<body>
+ <main>
+ <div>
+ <h1 class="title">Roman Numeral Converter</h1>
+ <p class="info">This simple tool lets you quickly convert numbers to Roman numerals. Just enter a number, press <span class="strong italic">"Convert,"</span> and get the Roman numeral equivalent instantly. Perfect for quick conversions anytime!</p>
+ </div>
+ <div class="converter-ctn rounded">
+ <form id="form" method="POST">
+ <label for="number" class="strong rounded">Decimal Number</label>
+ <input type="number" id="number" placeholder="Enter a decimal number..." required>
+ <button id="convert-btn" type="submit" class="rounded">Convert</button>
+ </form>
+ </div>
+ <div id="output" class="output rounded hidden"></div>
+ </main>
+ <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+: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
repos / roman-numeral-converter.git / commitdiff