25+ JavaScript Programs to Reverse a String

This post contains a total of 25+ Hand-Picked JavaScript Program examples to Reverse a String, with Source Code. All the Programs are made using JavaScript & some uses a little bit of css for styling.

You can use the source code of these programs for educational use with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Ashutosh Sharma

Made by Ashutosh Sharma. A simple JavaScript program to reverse a string. Enter the string in the prompt to get its reversed output. ( Source )


<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        
body {
    background-color: hsla(230,100%,50%,.7);
    margin-left: 20px;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    font-family: cursive;
}
        </style>
    </head>
    <body>
        <script>
            var str = prompt("Enter Your Favorite Word ");
function reverse(string) {
    var hah = "";
    for(var i=string.length-1;i>=0;i--){
        hah += string[i];
    }
    return hah;
}
document.write(reverse(str));
            </script>
    </body>
</html>

2. By Sujithra

Made by Sujithra. Enter the string in the input box and click the ‘Reverse’ button to get its output in the prompt. ( Source )

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript">
 function myfunc()
 {
 	var str=document.getElementById("mystring").value;
 	alert(""+ reverse(str));
 }
 function reverse(str)
 {
 	str=str.split("");
 	str= str.reverse();
 	str= str.join("");
 	return str;
 }
 </script>
 <style>
     body {
    background-color:black;
}
     </style>
</head>
<body>
<h1 style="color:white"> reverse</h1>
<input type="text" id="mystring" value=""/>
<input type="button" onClick="myfunc()" value="reverse">
</body>
</html>

3. By Parth

Made by Parth. Enter your string in the input field and after that click the reverse button, the JavaScript program will now display you the reversed and the original string. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Reverse a String</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Parth">
        <meta name="keywords" content="Sololearn">
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <style>
        body {
    background-color: #ffffe0;
    text-align: center;
    padding-top: 2%;
}

.userText {
    color: #0ef;
    font-weight: bold;
    font-size: 20px;
}

.reversedText {
    text-shadow: .9px 2px 5px #313;
    font-size: 2em;
    color: #0fa;
}

.submit {
    position: relative;
    width: 50%;
    background-color: #3ef;
    border-radius: 5px;
    border: 2px solid orange;
    font-weight: bold;
    margin-top: 9px;
    padding: 3px;
}

input {
    text-align: center;
    width: 50%;
    border: 2.5px solid orange;
    border-radius: 7px;
    padding: 6px;
}
        </style>
    </head>
    <body>
        <input type="text" placeholder="Type your name/any text" />
        <br />
        <button class="submit" onclick="reverseText()">Reverse the text</button>
        <br /><br />
        <em>You wrote →</em> <span class="userText"></span> 
        <br /><br />
        <em>Reversed text →</em> <bdo class="reversedText" dir="rtl"></bdo>
    <script>
        
function reverseText() {
    var userText = $("input").val();
    $(".userText, .reversedText").html(userText);
}
        </script>
    </body>
</html>

4. By Danijel Ivanović

Made by Danijel Ivanović. Enter the text string in line ‘reverseString(“Hi”));’ line. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Reverse a String</title>
        <h3>Challenge : Reverse a String</h3>
        <hr>
        <h4>String after reverse :</h4>
    </head>
    <body>
        <script>
            alert("*** CHALLENGE : Reverse a String ***");
alert(
    "Input String : !! nraeLoloS ,olleH")

function reverseString(str) { 

    var result = ""; 
    
    for(var i=str.length-1; i>=0; i--) { 
    
        result += str.charAt(i); 
    } 
           
    return result; 
} 
     
document.write(
    reverseString("Hi"));

            </script>
    </body>
</html>

5. By Aydin

Made by Aydin. This program will reverse words in a string, it wont reverse single word. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <script>
            var inp = prompt("Enter string to be reversed (it reverses not words, words in string):");
var rev = inp.split(' ').reverse().join(' ');
document.write(rev);
            </script>
    </body>
</html>

6. By marjel101

Made by marjel101. Enter your string and after that click the Submit button. ( Source )

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf=8">
  <title>Reverse strings</title>
  <style>
      body {
  background-color: rgb(234,156,123);
  margin-top: 3rem;
  width: 80%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  color: rgb(123,54,123);
}
#input {
  background-color: salmon;
  padding: 1rem;
  border: 1px pink dotted;
}
#result {
  background-color: salmon;
  padding: 1rem;
  min-height: 100px;
  border: 1px pink dotted;
  line-height: 2rem;
}
      </style>
  </head>
  <body>
	<h1>Enter a string to reverse</h1>
	<div id="input">
	  <input type="text" id="inputString">
	  <button type="button" onclick="inputWord();">Submit</button>
	</div><br>
	<div id="result"></div>
    <script>
        window.onload = init;
var letter = "";
var string = "";
var result = "";

function init() {}

function inputWord() {
  var word = "";
  var word2 = "";
  word = document.querySelector("#inputString").value;
  document.querySelector("#inputString").value = "";
  result = document.querySelector("#result");
  result.innerHTML = "You typed: " + word + "<br>";
  word2 = reverseString(word);
  result.innerHTML += "Backwards this word reads: " + word2 + "<br>";
  checkWord(word,word2);
}
function reverseString(string) {
  var lng = string.length;
  var str2 = "";
  if (string === "") {
	return "";
  } else {
	for (var i = 0; i < lng; i++) {
	  letter = string.charAt(i);
	  str2 = letter + str2;
	}
	return str2;
  }
}

function checkWord(a,b) {
  if (a.toUpperCase() === b.toUpperCase()) {
	result.innerHTML += "Hooray! You found a palindrome!!";
  }
}

        </script>
  </body>
</html>

7. By Mazin Ayash

Made by Mazin Ayash. Enter string in prompt to get the reversed version of the string. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	<style>
        body {
	font-family:times;
	font-size:25px;
	text-align:center;
	color:#99e;
	background-color:#459;
}
        </style>
    </head>
	<body>
		<script>
            function revStr7 (str) {
    return str.split("").reduce((rev, char) => char + rev ,'');
    return rev;
}

function revStr6 (str) {
    return str.split("").reduce(function (rev, char) {
        return char + rev;
    })
}

function revStr5 (str) {
    let rev = "";
    str.split("").forEach (char => rev = char + rev);
    return rev;
}

function revStr4 (str) {
    let rev = "";
    str.split("").forEach(function (char) {
        rev = char + rev;
    })
    return rev;
}

function revStr3 (str) {
    let rev = "";
    for (let char of str){
        rev = char + rev;
    }
    return rev;
}

function revStr2 (str) {
    let rev = "";
    for (let i = 0; i <= str.length-1; ++i){
        rev = str[i] + rev;
    }
    return rev;
}

function revStr1 (str) {
    let rev = "";
    for (let i = str.length-1; i >= 0; --i){
        rev = rev + str[i];
    }
    return rev;
}

function revStr0 (str) {
    return str.split("").reverse().join("");
}

var str = prompt ("enter a string to reverse");
document.write(revStr0 (str) + "<br />");
document.write(revStr1 (str) + "<br />");
document.write(revStr2 (str) + "<br />");
document.write(revStr3 (str) + "<br />");
document.write(revStr4 (str) + "<br />");
document.write(revStr5 (str) + "<br />");
document.write(revStr6 (str) + "<br />");
document.write(revStr7 (str) + "<br />");
            </script>
	</body>
</html>

8. By Ognyan Koychev

Made by Ognyan Koychev. Simple JavaScript program that takes string input using prompt and outputs the reversed string in the prompt. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<script>
            let str = prompt("Your Input here: ");

let reverseStr = '';

for(let i= str.length - 1; i >= 0; i--) {
    reverseStr += str[i];
}

alert(`The reverse of "${str}" is: \n${reverseStr}`);
            </script>
	</body>
</html>

9. By RedBlazerFlame

Made by RedBlazerFlame. JavaScript program to reverse a string with css animation on output. You can also disable the animation by clicking the disable button. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	<style>
        body {
	background-color:blue;
	font-family:futura;
}
@keyframes p{
	0%{transform:scale(1);
		color: black;
	}
	25%{
		transform:scale(1.25) rotate(-10deg);
	}
	50%{transform:scale(1.5);
		color:red;
		
	}
	75%{
		transform:scale(1.25) rotate(10deg);
	}
		100%{transform:scale(1) rotate(0deg);
			color:black;
		}
}
#b {
	animation:p 0.5s infinite;
	text-align:center;
	word-wrap:break-word;
}
#d {
   text-align:center;
	word-wrap:break-word; 
}
        </style>
    </head>
	<body>
 Disable animation:	<input id="c" type="checkbox" onclick="j()"> <br />
Your Message Is:	<p id="b"></p><p id="d"></p>
	<script>
	var s=prompt("Message:");

var a="";
var b=document.getElementById("b");
var c=document.getElementById("c");
var d=document.getElementById("d");

for (i=s.length;i>=1;--i){
	a=a+s.charAt(i-1);
};
b.innerHTML=a;
function j(){
c=document.getElementById("c");
	if (c.value=="on"){
		d.innerHTML=a;
		b.innerHTML="";
	} else {
	b.innerHTML=a;
		d.innerHTML="";
	}
}
</script>
	</body>
</html>

10. By Irena

Made by Irena. Enter your string at the top input field and after that click the button to get the reversed string at the bottom. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	<style>
        input {
    height: 30px;
    font-size: 18px;
    margin: 20px;
}

button {
    font-size: 16px;
    margin: 10px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
        </style>
    </head>
	<body>
	  
		<input id="revStr" type="text" placeholder="write something">
		<button id="clickMe">Click to reverse the input</button>
		<input id="rev" type="text" placeholder="reversed result">
		
		<script>
			
		function reverseMe(str) {
			var reversed = "";
			for (var i = str.length - 1; i >= 0; i--) {
				reversed += str[i];
			}
			
			return reversed;
		
		}
		
		var btn = document.getElementById('clickMe');
		btn.addEventListener('click', function() {
			var val = document.getElementById('revStr').value;
			var txt = document.getElementById("rev");
			txt.value = reverseMe(val);
		});
		
		</script>
	</body>
</html>

	

11. By Bee David

Made by Bee David. Enter text string at the top input box to get the reversed string at the bottom in Realtime without you having to click anything. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Reverse</title>
        <style>
            
@import url('https://fonts.googleapis.com/css?family=Amaranth');
body {
    background-color:rgb(230,230,230);
    padding:15px;
}

#wallpaper{
    background-color:white;
    width:inherit;
    height:100vh;
    border-radius:15px;
}

h1{
    font-family: 'Amaranth', sans-serif;
    text-align:center;
    padding:20px;
    margin:0px;
}

p{
    font-size:20px;
    font-family: 'Amaranth', sans-serif;
    color:red;
    margin-bottom:15px;
    margin-left:5%;
}

textarea{
    font-size:20px;
    font-family: 'Amaranth', sans-serif;
    display:block;
    border:3px solid rgb(200,150,250);
    border-radius:15px;
    width:90%;
    height:25%;
    margin:auto;
}

#result{
    font-size:20px;
    overflow:scroll;
    font-family: 'Amaranth', sans-serif;
    border:3px solid rgb(200,150,250);
    border-radius:15px;
    width:90%;
    height:25%;
    margin:auto;
}
            </style>
    </head>
    <body>
        <div id="wallpaper">
            <h1><span>Reverse your text</span></h1>
            <p>Write your text here:</p>
            <textarea></textarea>
            <p>Result here:</p>
            <div id="result"></div>
        </div>
        <script>
            
function reverse(){
    var text = document.getElementsByTagName("textarea");
    var a = text[0].value.split('');
    var b = text[0].value.split('');
    
    for(x=0;x<a.length;x++){
        a[x]=b[a.length-(x+1)]
    }
    
    var result = document.getElementById('result');
    result.innerHTML = a.join('');
}
setInterval(reverse,50);
            </script>
    </body>
</html>

12. By Tema

Made by Tema. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Reverse string in string</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="myconsole"></div>
        <script>
            //var s="ab(cd(ef)g)h";
            var s = prompt();
            
            var arr = s.split(/[\(\)]/);
            var c = document.getElementById("myconsole");
            function rev(s) {
                return s.split('').reverse().join('');
            }
            
            // Рекурсивная функция
            function revrekurs(a){
                if(a.length<=1){
                    return a.join('');
                }
                else{
                    return a[0]+rev(revrekurs(a.slice(1,a.length-1)))+a[a.length-1];
                }
            }

            c.innerHTML = revrekurs(arr);
            
            // Без рекурсии
            var i, t;
            while (arr.length > 1) {
                i = arr.length >> 1;
                t = arr.splice(i, 2);
                arr[i - 1] = arr[i - 1] + rev(t[0]) + t[1];
            }
            c.innerHTML = c.innerHTML+"<br>"+arr[0];
        </script>
        <!--
ЗАДАЧА:
На входе дана строка:

var str = "ab(cd(ef)g)h";

Напишите функцию, которая получает в качестве аргумента строку, после этого реверсирует строки, содержащиеся в каждой паре соответствующих скобок, начиная с самой внутренней пары. Выводит измененную строку. Строка результатов не должна содержать скобок.

ПРИМЕРЫ ТЕСТОВ:
1.
вход:  "ab(cd(ef)g)h";
выход: "abgefdch";

2.
вход: "abcd(efgh(ijk)lmn)o";
выход: "abcdnmlijkhgfeo";

3.
вход: "ab(cd)e";
выход: "abdce";

4.
вход: "abcde";
выход: "abcde";
 
        -->
    </body>
</html>

13. By Roopesh

Made by Roopesh. Enter your string and click on reverse to get the reversed text string. You can also clear the result by clicking the ‘Clear’ button. ( Source )

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
        body{
     background-color:#074972
     }
     
#inp{
     width:100%;
     height:40px;
     background-color:#f6f4a2;
     text-align:center;
     border-width:0.5px;
     border-radius:15px;
     font-size:15px;
     }
     
#btn {
     width:35%;
     height:50px;
     background-color:#656bf7;
     border-width:0.3px;
     margin-left:32.5%;
     margin-top:5px;
     margin-bottom:5px;
     border-radius:9px;
     font-size:15px;
     }
     
#oup {
     width:100%;
     height:40px;
     background-color:#f6f4a2;
     text-align:center;
     border-width:0.5px;
     border-radius:15px;
     font-size:15px;
     }
     
#clrbtn {
     width:35%;
     height:50px;
     background-color:#256bf7;
     border-width:0.3px;
     margin-left:32.5%;
     margin-top:5px;
     margin-bottom:5px;
     border-radius:9px;
     font-size:15px;
     }
        </style>
  </head>
  <body>
    <input id="inp" type="text" placeholder="your string"/>
    <br>
    <input id="btn" type="button" value="Reverse" onclick="rev()"/>
    <br>
    <input id="oup" type="text" placeholder="Output"/>
    <br>
    <input id="clrbtn" type="button" value="clear" onclick="clr()"/>
  <script>
      function rev() {
  var inp = document.getElementById("inp");
  var oup = document.getElementById("oup");
  var v,len = inp.value.length;
  while(len != 0){
    //picks every letter from string in a order last to first
    v = inp.value.substring(len-1,len);
    oup.value += v;
    len--;
      }
  }
 
function clr(){
  var oup = document.getElementById("oup");
  oup.value = "";
   }
      </script>
  </body>
</html>

14. By Vikaash

Made by Vikaash. Enter your text in prompt to get the reversed text. The program can also reverse numbers. ( Source )

<!DOCTYPE html>
<html>
 <head>
  <title>Reverse String</title>
  <style>
      body {
    background-color:black;
    text-align:center;
    font-size:40px;
    font-family:Cursive;
    letter-spacing:2px;
    word-spacing:4px;
    color:#00FFFF;
    font-style:italic;
}
      </style>
 </head> 
 <body>
  <script type="text/javascript">
  Window.prototype.write = (x) => document.write(x);
   var word = prompt("Please enter");
   String.prototype.reverse = function(){
   var word = this;
     var len = word.length -1;
     var word2 = "";
     for(var i = len;0<=i;i--){
         word2 += word.charAt(i);
         if(word2.length === word.length){
             return word2;
         }
     }
 };
write(word.reverse());
  </script>
 </body>
</html>

15. By Bryson Lee

Made by Bryson Lee. Input your string and click the send button to get the reversed input. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>String Reverser</title>
	<style>
        

body {
	background: #141414;
	justify-content: center;
	align-items:center;
	flex-direction:column;
	display:flex;
}

h1, p {
    color: #FFA500;
    font-family: sans-serif;
}


button {
    background: #FFA500;
    padding: 1%;
    border-radius: 100px;
    height: 50px;
    width:200px;
    
}


textarea {
    height: 100px;
    width: 200px;
}
        </style>
    </head>
	<body>
		<h1>String Reverser</h1>
		<textarea placeholder="Enter a string to be inputed backwards..." id="edit_message"></textarea>
		<br>
		<button id="send" onclick="reverseString()">Send!</button>
		
		<p id="display"></p>
        <script>
            function reverseString() {
    
    //declare variable
    const edit_message = document.getElementById("edit_message").value;
    const display = document.getElementById("display");

    var splitString = edit_message.split(""); 
 
    var reverseArray = splitString.reverse(); 
 
    var joinArray = reverseArray.join(""); 
    
    //display message
    display.textContent = "The name " + edit_message + " backwards is " + joinArray + ".";

}
            </script>
	</body>
</html>

16. By Joshua

Made by Joshua. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Reverse Any String</title>
	<style>
        body {
	background-color: lightblue;
}
#Title {
    text-align: center;
    font-family: cursive;
    font-size: 40px;
}
#ReversedString {
    font-family: cursive;
    font-size: 15px;
}
#ReverseIntro {
    font-family: cursive;
    font-size: 15px;
}
        </style>
    </head>
	<body>
	    <p id="Title">Reverse Any String</p>
	    <input placeholder="Enter a string" id="Input"/>
	    <button id="button" onclick="reverse()">Reverse</button>
		<div>
		    <p id="ReverseIntro">Reversed String:</p>
		    <p id="ReversedString"></p>
		</div>
        <script>
            function reverse() {
    var str = document.getElementById("Input").value;
    var strpro = str.split("");
    var revstr = strpro[strpro.length-1];
    for(x = strpro.length-2; x >= 0; x--) {
        revstr = revstr+strpro[x];
    }
    document.getElementById("ReversedString").innerHTML = revstr;
}
            </script>
	</body>
</html>

17. By Maulik Paghdal

Made by Maulik Paghdal. JavaScript program to reverse a string using textbox. ( Source )


<html>
<body>

<style>
    button{
    
    padding: 15px 15px;
    font-size:20;
    border: 2px solid #000;
    
}

.myinp{
    width:200px;
    padding:15px;
    font-size:20;
    border: 2px solid #000;
}

p{
    font-size:20;
}
    </style>
<input class="myinp" type="text" name="" id="reversTheName">

<button onClick="reverseString()">Reverse</button>
<p id="showData"></p>

<script>
function reverseString(){
var str = document.getElementById('reversTheName').value;
var newString=" ";

for(var i=str.length-1; i>=0; i--){
newString += str[i];
}
document.getElementById('showData').innerHTML= newString;
}
</script>

</body>
</html>

18. By shubham verma

Made by shubham verma. Get reversed string in Realtime. ( Source )


<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
    
<title>string revese</title>
<style>
html{
font-size:60.5%;
}

h1
{
font-size:2rem;
background-color:red;
color:black;
}
.inp{
float:center
font-size:2rem; 
border:solid 2px green;
text-align:center;
background:khaki;
//margin:2rem;
//padding:2rem;
width:25.0rem;
height:3.0rem;
display:inline-block;
}
#container{
width:60.0rem;
margin:auto;
height:30.0rem;
padding:2.0rem;
border:solid 0.2rem black;
text-align:center;
}
@media screen and (max-width: 800px) {
  #container{
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>
<div id="container">
<h1>Reversed the string for real time </h1>
<div>
<input type="text" value="" id="string"  class ="inp" placeholder="Enter Your string" onkeyup="stringrev()"><br><br>
<div>
<div>
<input type="text" value="" placeholder="Reversed string"  class ="inp" id="string1">
<div>
<br><br>
<input type="text" value="" placeholder="Get random number"  id="rend">
<button onclick="time()"> Random    </button>
<script>
function time()
{
 var k = Math.floor(Math.random()*20);
 document.getElementById("rend").value=k;
}

function stringrev()
{

var newstring="";
var str1 = document.getElementById("string").value;
for(var i=str1.length-1;i>=0;i--)
{
newstring+=str1[i];
}

var str1 = document.getElementById("string1").value=newstring;
}
</script>
</body>
</html>

19. By APU CHAND MALIK

Made by APU CHAND MALIK. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Revarse string</title>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body> 
       <div class="container">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">MENU
        <span class="caret"></span></button>
        <ul class="dropdown-menu">

          <li class="dropdown-header">My Codes</li>
          <li><a href="https://code.sololearn.com/WW6Ok89d4R5W/?ref=app">reverse string</a></li>
          <li><a href="https://code.sololearn.com/WIU0BF2GRhlC/?ref=app">plaindrome no</a></li>
          <li><a href="https://code.sololearn.com/W1NG2mHiI8J7/?ref=app">vowel counter</a></li>
        </ul>
      </div>
    </div> 
     <div class="container">
      <div class="panel panel-primary">
        <div class="panel-heading">
           <label for="data">input</label>
        </div>
        <section class="panel-body">
            <article class="form-group">
            <textarea raws="5" class="form-control" id="inp"></textarea>
            </article>
        </section>
        <div class="panel-footer">
            <button class="btn btn-block btn-primary" onclick="submit();">reverse</button>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">output</div>
        <div class="panel-body">
             <div id="otpt"></div>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div> 
        
        
    </body>
</html>

20. By Bright

Made by Bright. A basic JavaScript program to reverse a string. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        body {
    
}

input[type=text]{
    
    border:1px solid black;
    border-radius:5px;
    padding:20px;
}

input[type=text]:focus{
    outline:none;
}

#clc{
    background-color:green;
    border:none;
    padding:5px 50px 5px 50px;
    color:white;
    font-weight:bold;
    margin-top:5px;
    text-align:center;
}

#clc:hover{
    animation-name:background-color;
    animation-duration:400ms;
    animation-fill-mode:forwards;
} @keyframes background-color{
    100%{
        background-color:red;
    }
}

p{
    font-weight:bold;
    font-size:20px;
}
        </style>
    </head>
    <body>
        <form id="ms">
            <input type="text" id="txt" placeholder="enter text to reverse"></input><br />
            <button type="button" id="clc">Reverse</button>
        </form>
        <p id="res"></p>
    <script>
        window.onload = function(){
  let btn = document.getElementById("clc");
  btn.onclick = function (str) {
   let txtt = document.getElementById("txt").value;
   if(txtt.length === 1 || txtt.length<1){
     alert("Please Enter atleast two words")  
   }else{
    str = txtt;
    let x = str.split("")
    let r = x.reverse()
    let k = r.join("")
    document.getElementById("res").innerHTML = k;
}}
}

        </script>
    </body>
</html>

21. By Ravi Kumar

Made by Ravi Kumar. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    
    <body>
        
    <h1>Instance Reverse string</h1>
    
    <input type="text" id="input"  placeholder="Enter string" onkeyup="reverse()">
    
    <br><br>
    
    <input type="text" id="result" placeholder="Reverse string">
    
    <script>
        

function reverse()
{       
      var str=document.getElementById("input").value; 
                 
      var rvstr=" ";
            
   for(var i=str.length-1;i>=0;i--) 
   {
       rvstr+=str[i];
   } 
   
   document.getElementById("result").value=rvstr;
               
    }
        </script>
    </body>
    
</html>

22. By Suheyb Abdulwahid Abdullahi

Made by Suheyb Abdulwahid Abdullahi. ( Source )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
  <form class="form-inline">
  <div class="input-group">
  <input type="mail" placeholder="enter your name" class="form-control" required>
  <div class="input-group-btn">
  <button class="btn btn-danger" onclick="Suhayb()">Search</button>
  </div>
  </div>
  </form>
  <p id="demo"></p>
    </div> 
    <script>
        function Suhayb() {
var parg = document.querySelector("#demo")
    var d = document.getElementsByClassName("form-control")[0];
    var qimo = d.value;
    var dabagedin = qimo.split("").reverse().join("");
    parg.textContent = dabagedin;
    alert(dabagedin);
}
        </script>
</body>
</html>

23. By Joe Shanahan

Made by Joe Shanahan. Enter the string and click the reverse button. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Reverse String</title>
	</head>
	<body>
	    <input type="text" id="input" placeholder="Enter your string" />
	    <br>
	    <button onclick="change()">Reverse the string</button>
	    <p id="result"></p>
        <script>
            
function change() {
    var string = document.getElementById("input").value;
var array = string.split("");
var rarray = array.reverse();
var rstring = rarray.join("");
	document.getElementById("result").innerHTML = rstring
}
            </script>
	</body>
</html>

24. By Vds

Made by Vds. Enter a string that is below 10 digits in length. ( Source )

 <html>
 <head>
     <title>Reverse of string</title>
    <style>
        #t1{
    border-style:solid ;
    border-width:3px;
    border-spacing:1px;
    border-color:#49299e;
    border-radius:3px;
    background-color:#600see;
    padding:3px;
    font-family:serif;
    font-weight:bold;
    font-size:10px;
    outline:none;
    
    }
#l{
    font-size:16px;;
    border-width:4px;
    padding-bottom:3px;
    font-family:serif;
    font-weight:bold;
    text-decoration:underline ;    text-shadow:-1px -1.5px 1px #fff06e;
}   
#b1{
    box-shadow:3px -4px 3px black;;
    background-color:#600see;
    border-color:#6090ee;
    font-size:14px;
    font-family:serif;
    border-radius:30px;
    border-width:5px;
    outline:none;
}
#b1:active 
{ 
  box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); 
transform: translateY(4px); 
 }
h3{
    text-shadow:3px -2px 3px white;
    border-style:dotted ;
    border-width:2px;
}
#l1,#l2{
    text-align:left;
    font-size:15px;;
    border-width:4px;
    padding-bottom:3px;
    font-family:serif;
    font-weight:bold;


}


        </style>
    <script language = "Javascript">
    {
   function rev()
    {
      var x = document.f1.t1.value
      var y =x.split("").reverse("").join("")
     {
      document.getElementById("l1").innerHTML="the string is="+x 
      }
      {
     document.getElementById("l2").innerHTML="the reverse of the string is="+y
    }
    }
   }
      </script>
 </head>
     <body bgcolor="#099492"><center>
  <blink> <h3>REVERSE OF STRING</h3></blink>
     <hr color="orange">
     <form name = "f1">
<label id="l">Enter a string</label>&nbsp<input type = "text" name = "t1" maxlength = "10" id="t1" placeholder="enter maximum 10 character">   
<br><br>
   <input type = "button" value = "click to see what happens" id="b1" onclick="rev()"><br />
   </center>
   <label id="l1">the string is=</label><br />
    
 <label id="l2">the reverse of the string is=</label>
     <br />
         <hr color="orange"> </form>
     </body>
 </html> 

25. By JaScript

Made by JaScript. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Reverse string</title>
	</head>
	<body>
		<h1>Reverse string</h1><div>Please enter a text to convert: <input id="inp" type="text"/></div><br/>
  		<div><span>Reversed string: </span><h2><span id="test" 
  		style="color:tomato; font-weight: bold;"></span></h2></div>
  		<script>
  		
function ReverseString(str) {
   return str.split('').reverse().join('')
}

//console.log(ReverseString("Hello"))

let out =  document.querySelector('#test');
let psc = document.querySelector("input");
psc.addEventListener("input", () => {
	out.innerHTML = "";
	out.innerHTML = ReverseString(psc.value);
});
  		</script>
	</body>
</html>

26. By Vijay Pal

Made by Vijay Pal. ( Source )

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Reverse the string</title>
</head>

<body bgcolor="skyblue">
    <div>
        <form name="f1">
        Enter Any string For Reverse <br>
        <input type="text" name="t1"> <br> <br>
  <input type="button" name="b1" onclick="rev()" value="Click">  
      
        </form>
    </div>
    <script>
        
function rev()
{
var s=f1.t1.value;
var a=s.length;
var ch=''
for(i=a-1;i>=0;i--)
{
ch+=s.substring(i,i+1)
}
console.log("The Reverse string is "+ch);

}
        </script>
</body>
</html>