Scribd
Upload
5K views

Build A Roman Numeral Converter

The document includes the HTML, CSS, and JavaScript code for a web application that converts numbers to Roman numerals. The HTML defines the user interface with a form to enter a number and a div to display the output. The CSS styles the interface and sets colors. The JavaScript contains functions to validate the input, convert the number to Roman numerals, and update the user interface on form submission or button click.

Uploaded by

John Kesh Mahugu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5K views

Build A Roman Numeral Converter

The document includes the HTML, CSS, and JavaScript code for a web application that converts numbers to Roman numerals. The HTML defines the user interface with a form to enter a number and a div to display the output. The CSS styles the interface and sets colors. The JavaScript contains functions to validate the input, convert the number to Roman numerals, and update the user interface on form submission or button click.

Uploaded by

John Kesh Mahugu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Castoro+Titling&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />

<title>Roman Numeral Converter</title>


</head>
<body>
<main>
<h2>The</h2>
<h1>Roman Numeral Converter</h1>
<form id="form" class="form">
<fieldset>
<label for="number">Enter a Number:</label><br />
<input type="number" id="number" required />
<button type="button" id="convert-btn">Convert</button>
</fieldset>
</form>
<div id="output" class="output hidden"></div>
</main>
<script src="script.js"></script>
</body>
</html>

** end of undefined **

** start of undefined **

:root {
--gray-00: #ffffff;
--gray-05: #f5f6f7;
--gray-15: #d0d0d5;
--gray-75: #3b3b4f;
--gray-85: #1b1b32;
--gray-90: #0a0a23;
--blue-50: #198eee;
--error: #a94442;
--danger-color: #850000;
--danger-background: #ffadad;
}

*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
padding: 50px 20px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: var(--gray-85);
color: var(--gray-05);
}

main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.freecodecamp-logo {
height: 30px;
margin-bottom: 20px;
}

h1 {
text-align: center;
margin: 20px auto;
max-width: 350px;
font-family: 'Castoro Titling', cursive;
}

form {
color: var(--gray-05);
margin: auto 25px;
padding: 15px auto;
border: 3px solid var(--gray-05);
text-align: center;
width: 90%;
max-width: 500px;
background-color: var(--gray-75);
}

fieldset {
border: 0 none;
height: 100%;
padding: 25px;
margin: 10px 20px;
}

label {
display: inline-block;
font-size: 1.5rem;
margin-bottom: 10px;
font-weight: bold;
}

input:focus-visible,
button:focus-visible {
outline: 3px solid var(--blue-50);
}
input {
display: block;
font-size: 2.5rem;
width: 100%;
height: 60px;
padding: 6px 12px;
margin: 10px 0;
line-height: 1.4;
color: white;
background-color: var(--gray-90);
border: 1px solid var(--gray-05);
}

button {
cursor: pointer;
margin-top: 15px;
text-decoration: none;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
padding: 10px 16px;
font-size: 23px;
width: 100%;
}

.output {
color: white;
background-color: var(--gray-75);
border: 3px solid var(--gray-05);
font-size: 2.5rem;
width: 90%;
max-width: 500px;
min-height: 55px;
margin-top: 25px;
padding: 15px;
overflow-wrap: break-word;
text-align: center;
}

.alert {
font-size: 2rem;
background-color: var(--danger-background);
border: 3px solid var(--danger-color);
color: var(--danger-color);
}

.hidden {
display: none;
}

** end of undefined **

** start of undefined **

const form = document.getElementById('form');


const convertButton = document.getElementById('convert-btn');
const output = document.getElementById('output');

const convertToRoman = num => {


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

ref.forEach(function (arr) {
while (num >= arr[1]) {
res.push(arr[0]);
num -= arr[1];
}
});

return res.join('');
};

const isValid = (str, int) => {


let errText = '';

if (!str || str.match(/[e.]/g)) {
errText = 'Please enter a valid number.';
} else if (int < 1) {
errText = 'Please enter a number greater than or equal to 1.';
} else if (int > 3999) {
errText = 'Please enter a number less than or equal to 3999.';
} else {
// No errors detected
return true;
}

// Handle error text and output styling


output.innerText = errText;
output.classList.add('alert');

return false;
};

const clearOutput = () => {


output.innerText = '';
output.classList.remove('alert');
};

form.addEventListener('submit', e => {
e.preventDefault();
updateUI();
});

convertButton.addEventListener('click', () => {
updateUI();
});

const updateUI = () => {


const numStr = document.getElementById('number').value;
const int = parseInt(numStr, 10);

output.classList.remove('hidden');

clearOutput();

if (isValid(numStr, int)) {
output.innerText = convertToRoman(int);
}
};

** end of undefined **

You might also like