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

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css">
    <main class="container">
        <img class="freecodecamp-logo" src=""
            alt="freeCodeCamp Logo" />
        <h1 class="title">Is it a Palindrome?</h1>
        <div class="palindrome-div" id="output">
            <label for="number">Enter in text to check for a palindrome:</label>
            <input class="palindrome-input" id="number" value="" type="text" />
            <button class="palindrome-btn" id="convert-btn">Check</button>
            <div class="results-div hidden" id="result"></div>
        <div class="palindrome-definition-div">
            <p class="palindrome-definition">
                <span role="img" aria-label="light-bulb">&#128161;</span>
                A palindrome is a word, phrase, or sequence of characters that reads the same forward and backward.
    <script src="script.js"></script>
/* file: styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

.container {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.freecodecamp-logo {
    width: 100px;
    height: auto;
    margin-bottom: 20px;

.title {
    font-size: 1.5em;
    margin-bottom: 20px;

.palindrome-div {
    margin-bottom: 20px;

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

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

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

.palindrome-btn:hover {
    background-color: #45a049;

.results-div {
    margin-top: 20px;
    font-size: 1.2em;
    color: #333;
    text-align: center;

.hidden {
    display: none;

.palindrome-definition-div {
    font-size: 1.2em;
    margin-top: 20px;

/* file: script.js */
const userInput = document.getElementById('number');
const checkPalindromeBtn = document.getElementById('convert-btn'); // Corrected ID
const resultDiv = document.getElementById('result');

const checkForPalindrome = input => {
    const originalInput = input; // Store for later output

    if (input === '') {
               exampleDiv.textContent = "Please enter a valid number";

    // Remove the previous result

    const lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
    let resultMsg = `<strong>${originalInput}</strong> ${
        lowerCaseStr === [...lowerCaseStr].reverse().join('') ? 'is' : 'is not'
    } a palindrome.`;

    const pTag = document.createElement('p');
    pTag.className = 'user-input';
    pTag.innerHTML = resultMsg;

    // Show the result.

checkPalindromeBtn.addEventListener('click', () => {
    userInput.value = '';

userInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
        userInput.value = '';

Your browser information:

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

Challenge Information:

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

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.

Hi @MohammedNasim.P

The exampleDiv variable is not defined.

Happy coding