Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roman Numeral Converter</title>

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        label {
            font-size: 1.2em;
            margin-right: 10px;
        }

        input {
            padding: 10px;
            font-size: 1em;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }

        button {
            padding: 10px 15px;
            font-size: 1em;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        #output {
            margin-top: 20px;
            font-size: 1.5em;
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <label for="number">Enter a number:</label>
        <input type="number" id="number">
        <button id="convert-btn" onclick="convertToRoman()">Convert</button>
    </div>

    <div id="output"></div>

    <script>
        function convertToRoman() {
            const numberInput = document.getElementById("number").value;
            const number = parseInt(numberInput);

            if (isNaN(number)) {
                displayOutput("Please enter a valid number");
                return;
            }

            if (number < 1) {
                displayOutput("Please enter a number greater than or equal to 1");
                return;
            }

            if (number >= 4000) {
                displayOutput("Please enter a number less than 4000");
                return;
            }

            const romanSymbols = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
            const arabicNumerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
            let result = "";

            for (let i = 0; i < romanSymbols.length; i++) {
                while (number >= arabicNumerals[i]) {
                    result += romanSymbols[i];
                    number -= arabicNumerals[i];
                }
            }

            displayOutput(result);
        }

        function displayOutput(message) {
            document.getElementById("output").textContent = message;
        }
    </script>
</body>
</html>


/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0

Challenge Information:

Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.