CODEWITHSUNDEEP
javascripthtmlcssasciiebcdic
sierra117
sierra117

Reputation: 39

How to print all ASCII or EBCDIC values after selecting radio buttons

I am continuing with the development of a basic website where the user enters a string of at least 256 characters minimum, selects a choice (ASCII or EBCDIC) for conversion, and then hits the submit button (Run) that outputs the final converted result on the page, displaying all the ASCII or EBCDIC values of the string they entered. I have trouble getting the website to convert the entered text to ASCII or EBCDIC values based on the selected radio button. Below is the code I have:

1.html:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Converter for ASCII or EBCDIC</title>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      <script src="encoding.js" defer></script>
   </head>

   <body style="text-align:center;">
    <label for="text">Enter a text that is at least 256 characters long</label><br>
    <input type="text" id="text_id" name="text" minlength="256">

    <p>Select the following:</p>
    <div>
        <input id="ascii" type="radio" name="encoding" value="ascii">
        <label for="ascii">ASCII</label>
    </div>
    <div>
        <input id="ebcdic" type="radio" name="encoding" value="ebcdic">
        <label for="ebcdic">EBCDIC</label>
    </div>
    <button onclick="myFunction()" type="button">"Run!"</button>
    <label for="button">"Run!"</label>
    <p id="demo" style="color:red;">
   </body>
</html>

style.css:

body 
{
  font: 12pt Arial;   
}

input[type=radio] + label::before 
{
   border-radius: 10px;   
}
input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}
encod

encoding.js:

function myFunction() 
{
  let str = document.getElementById("text_id");
  let a = "ASCII Code is == >  ";
  // Below checks to see if the user selects a radio button
  let radio_selected = false;
  document.querySelectorAll('input[type="radio"]').forEach(function(radio) 
  {
    if (radio.checked) 
    {
      radio_selected = true;
    }
  })
  if (!radio_selected) 
  {
    console.log("The radio has not been checked, please select a button");
    return;
  }
  if (str.value.length >= 256) 
  {
    //loop that checks the entire string the user has entered and prints all converted values
    for (let i = 0; i < str.length; i++) 
    {
        document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
    }
  } 
  else if (str.value.length < 256) 
  {
    console.log("null");
    return null;
    // prints and returns null if the user entered a string less than 256 characters
  }
  document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
}

The input validation (at least 256 characters) and button selection validation (user needs to select button) has been done, however, the conversion of the entered value based on the selected button and the output of all the characters in ASCII or EBCDIC is where I am confused.

Upvotes: 0

Views: 186

Answers (1)

LucasSousa
LucasSousa

Reputation: 136

You can check if the buttons are selected doing the following

function myFunction() {

    //Get both elements
    const ascii = document.getElementById('ascii')
    const ebcdic = document.getElementById('ebcdic')

    let str = document.getElementById("text_id");
    let a = "ASCII Code is == >  ";

    // Below checks to see if the user selects writed more than 255 chars
    if (str.value.length < 256) {
        console.log("null");
        return null;
        // prints and returns null if the user entered a string less than 256 characters
    }

    // Below checks to see if the user selects a radio button
    let radio_selected = false;
    document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
        if (radio.checked) {
            radio_selected = true;
        }
    })
    if (!radio_selected) {
        console.log("The radio has not been checked, please select a button");
        return;
    }
    
    //If one of the elements is checked it triggers a condition, if the other is cheked it triggers the other condition
    if (ascii.checked) {
        for (let i = 0; i < str.value.length; i++) {
            document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + str.value.charCodeAt(i);
        }
    }
    else if (ebcdic) {
        //function to convert to ebcdic, (I do not know how to do this)
    }

}

Upvotes: 1

Related Questions