Question

In: Computer Science

I need to create a web page(JAVASCRIPT) that allows the user to reverse a string. For...

I need to create a web page(JAVASCRIPT) that allows the user to reverse a string. For Example, if the user types Mirror Image, after the button is clicked, the text will say egamI rorriM.You have to implement each button by using a while, do while and for loop.

here is a default code

<html>
<head>
   <title>Mirror</title>
</head>
<body>
   <p id="label1">Original Text: <h1 id="text1">Some text goes here!!!</h1></p>
   <p id="label2">Mirror Text: <h1 id="text2">!!!ereh seog txet emoS</h1>
   <input type="button" value="Reverse (while loop)" /><br />
   <input type="button" value="Reverse (do while loop)" /><br />
   <input type="button" value="Reverse (for loop)" /><br />
  
  
</body>
</html>

Solutions

Expert Solution

  • Provided code is well commented wherever code is added in given code.
  • Code snippet is provided below the typed code to understand indentation of code.
  • Output snippet is also attached below.
  • NOTE: Output format can be changed easily according to you, if needed.

Code:

<html>
<head>
<title>Mirror</title>
</head>
<body>
<p id="label1">Original Text: <h1 id="text1">Some text goes here!!!</h1></p>

<!-- for user input here input tag is used with id = inp_text -->
<!-- NOTE: Provided code is kept as it is if needed changes can be accordingly -->
<b>Type here: </b><input type="text" name="inp_text" id="inp_text">
<p id="label2">Mirror Text: <h1 id="text2">!!!ereh seog txet emoS</h1>

    <!-- p tag is used to print the ouptut produced by functions -->
<p id="output"></p>

<!-- respective functions are called using onclick property of button -->
<input type="button" value="Reverse (while loop)" onclick="func1()"/><br />
<input type="button" value="Reverse (do while loop)" onclick="func2()"/><br />
<input type="button" value="Reverse (for loop)" onclick="func3()"/><br />
  

<script>   
   // Defining function to reverse a string using while loop
function func1() {
    // getting user input value by using id
var x = document.getElementById("inp_text").value;
// initializing loop counter to length - 1 (last index of string)
    var i = x.length-1;
    // creating variable to store reverse string
var revString = "";
while(i>=0)
{
   // adding characters of input string from last to first
   revString += x[i];
   i--;  
}

// printing reversed string as output
document.getElementById(
"output").innerHTML = revString;
}

// Defining function to reverse a string using do while loop
function func2() {
// getting user input value by using id
var x = document.getElementById("inp_text").value;
// initializing loop counter to length - 1 (last index of string)
    var i = x.length-1;
    // creating variable to store reverse string
var revString = "";
// using do while loop to reverse string
do
{
   // adding characters of input string from last to first
   revString += x[i];
   i--;  
}while(i>=0);

// printing reversed string as output
document.getElementById(
"output").innerHTML = revString;
}

// Defining function to reverse a string using for loop
function func3() {
// getting user input value by using id
var x = document.getElementById("inp_text").value;
// loop counter variable
    var i;
    // creating variable to store reverse string
var revString = "";
// using for loop to reverse string
for(i=x.length-1; i>=0; i--)
{
   revString += x[i];
}

// printing reversed string as output
document.getElementById(
"output").innerHTML = revString;
}
</script>
  
</body>
</html>

Code Snippet:

<html>
<head>
   <title>Mirror</title>
</head>
<body>
   <p id="label1">Original Text: <h1 id="text1">Some text goes here!!!</h1></p>
   
   <!-- for user input here input tag is used with id = inp_text -->
   <!-- NOTE: Provided code is kept as it is if needed changes can be accordingly -->
   <b>Type here: </b><input type="text" name="inp_text" id="inp_text">
   <p id="label2">Mirror Text: <h1 id="text2">!!!ereh seog txet emoS</h1>

        <!-- p tag is used to print the ouptut produced by functions -->
   <p id="output"></p>

   <!-- respective functions are called using onclick property of button -->
   <input type="button" value="Reverse (while loop)" onclick="func1()"/><br />
   <input type="button" value="Reverse (do while loop)" onclick="func2()"/><br />
   <input type="button" value="Reverse (for loop)"  onclick="func3()"/><br />
  

  <script>   
        // Defining function to reverse a string using while loop
        function func1() { 
                // getting user input value by using id
            var x = document.getElementById("inp_text").value;
            // initializing loop counter to length - 1 (last index of string) 
                var i = x.length-1; 
                // creating variable to store reverse string
            var revString = "";
            while(i>=0)
            {
                // adding characters of input string from last to first
                revString += x[i];
                i--;    
            }

            // printing reversed string as output
            document.getElementById( 
              "output").innerHTML = revString; 
        } 

        // Defining function to reverse a string using do while loop
        function func2() { 
           // getting user input value by using id
            var x = document.getElementById("inp_text").value; 
            // initializing loop counter to length - 1 (last index of string) 
                var i = x.length-1; 
                // creating variable to store reverse string
            var revString = "";
            // using do while loop to reverse string
            do
            {
                // adding characters of input string from last to first
                revString += x[i];
                i--;    
            }while(i>=0);

            // printing reversed string as output
            document.getElementById( 
              "output").innerHTML = revString; 
        } 

        // Defining function to reverse a string using for loop
        function func3() { 
           // getting user input value by using id
            var x = document.getElementById("inp_text").value; 
            // loop counter variable
                var i; 
                // creating variable to store reverse string
            var revString = "";
            // using for loop to reverse string
            for(i=x.length-1; i>=0; i--)
            {
                revString += x[i];
            }

            // printing reversed string as output
            document.getElementById( 
              "output").innerHTML = revString; 
        } 
    </script> 
  
</body>
</html>

Output Snippet:

I hope you got the provided solution.

Thank You.

venereology answered 3 months ago
Next > < Previous

Related Solutions

Create a web page using PHP that allows the users to create an account (a username...
Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.
JavaScript. Create a Web page with the following features: Three lines of text about anything. A...
JavaScript. Create a Web page with the following features: Three lines of text about anything. A link to OCC (http://www.orangecoastcollege.edu) that opens in a new browser window. An image link (graphical link). A link to the top of the page. A graphical link to your email. Formatted text throughout the page. Horizontal lines
You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
n this assignment, you will need to code a Web page that will allow a user...
n this assignment, you will need to code a Web page that will allow a user to enter their first and last names and indicate how many pets they have, if any. If they have pets, the user will be able to list up to three of their names. You will code validations on some of the fields and display error messages on the page when a field does not pass the validation test. If all the data entered is...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below). Table 1 – Discounts Quantity Purchased Discount 1 – 29 0% 30 - 59 10% 60 + 15% Example: If a customer purchases 40 family membership, their total price (CTotal) would be: COriginalPrice = 30*40=1200 DMainDiscount = 1200*0.1=120 CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 =...
Summary Develop a Spring Boot Web App which allows user to create a list of the...
Summary Develop a Spring Boot Web App which allows user to create a list of the destinations they have visited during vacations. Your application should allow user to search for a destination based on year of visit. Form View The initial page should have links to either search for a destination , add a new destination, display a list of all destinations that they have visited. The search destination page will have a text field to search by year. The...
Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...
Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
in Java, I need to create an array of animals. The user is going to be...
in Java, I need to create an array of animals. The user is going to be prompted to enter the size of the array where a valid size is 10-30(inclusive). Then I have to populate only half of this array. I am not sure how to do that so can you please write comments explaining. Thank you
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT