 |
| How to Make The Best Reverse Text Generator Tool In Blogger For Free? |
ello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about How to Make The Best Reverse Text Generator Tool In Blogger For Free?
What Is A Reverse Text Generator Tool?
First, a simple definition: A reverse text generator is a text generator. Text generators are pieces of code that take text and automatically reverse or mirror text online and convert your text into a backward version from your original text. Reverse text generators are exactly what you think it is.
Ways To Use A Reverse Text Generator Tool
The use of the Reverse Text Generator Tool can provide many benefits to your Business/Work/Fun. The main uses include the following:
- Reverse Text with the “Reverse Text” option.
- Flip Text with the “Flip Text” option.
- Reverse wording with the “Reverse Wording” option.
- Flip Wording with the “Flip Wording” option.
- Reverse Each Word’s Lettering with the “Reverse Each Word’s Lettering” option.
- Reverse Text Upside Down with the “Upside Down” option.
How To Make A Reverse Text Generator Tool?
To make the best reverse text generator tool for your blogger site, you need to add HTML, CSS, and JavaScript codes. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in the second, and JavaScript in the last step.
Step 1 - Adding HTML
<div id="app" align="center">
<h1>Reverse Text Generator</h1>
<div class="LCC-btn">
<input type="button" @click="reversetext" value="Reverse Text" />
<input type="button" @click="fliptext" value="Flip Text" />
<input type="button" @click="reversewords" value="Reverse Wording" />
<input type="button" @click="flipwords" value="Flip Wording" />
<input type="button" @click="reversewordletters" value="Reverse Each Word's Lettering"/>
<input type="button" @click="flipupsidedown" value="Upside Down" />
</div>
<textarea v-model="input_output" class="TxtArea" rows="10" wrap="soft"></textarea>
</div>
Step 2 - Adding CSS
These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool
<style type="text/css">
* {
margin: 0;
padding: 0;
}
BODY {
font-family: "noto sans", sans-serif;
margin: 10px;
}
#app h1 {
font-size: 50px;
text-align: center;
}
.LCC-btn {
display: flex;
justify-content: center;
flex-wrap: wrap;
background: #f3f3f3;
width: 100%;
box-sizing: border-box;
padding: 21px;
margin-top: -4px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.LCC-btn input {
font-size: 14px;
height: auto;
margin: 10px;
border: none;
padding: 10px 12px;
background-color: #8775f5;
border-radius: 3px;
color: #fefefe;
transition: all 0.3s;
}
.LCC-btn input:hover {
opacity: 0.7;
transition: all 0.3s;
cursor: pointer;
}
.TxtArea {
width: 100%;
box-sizing: border-box;
color: #797979;
border: 1px solid #dcdcdc;
padding: 15px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-size: 15px;
outline: none;
border-top: none;
resize: none;
}
@media screen and (max-width:335px) {
.LCC-btn input {
width: 100%;
}
}
</style>
Step 3 - Adding JavaScript
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js' > < /script> <script >
Vue.prototype.$swapcase = function (text) {
var toswap = text;
var toswaplen = toswap.length;
var uplet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var lolet = 'abcdefghijklmnopqrstuvwxyz';
word = toswap.split('');
wordlen = word.length;
var first = word[0];
var last = word[wordlen - 1];
if (uplet.indexOf(first) == -1) upperc = 0;
else upperc = 1;
if (lolet.indexOf(last) == -1) lowerc = 0;
else lowerc = 1;
if (upperc + lowerc == 2) {
toswap = toswap.split('');
toswap = toswap.slice(1, toswaplen - 1);
toswap.unshift(first.toLowerCase());
toswap.push(last.toUpperCase());
toswap = toswap.join('');
return toswap;
} else return toswap;
}
new Vue({
data() {
return {
input_output: '',
flipTable: {
a: '\u0250',
b: 'q',
c: '\u0254',
d: 'p',
e: '\u01DD',
f: '\u025F',
g: '\u0183',
h: '\u0265',
i: '\u0131',
j: '\u027E',
k: '\u029E',
l: '\u05DF',
m: '\u026F',
n: 'u',
r: '\u0279',
t: '\u0287',
v: '\u028C',
w: '\u028D',
y: '\u028E',
'.': '\u02D9',
'[': ']',
'(': ')',
'{': '}',
'?': '\u00BF',
'!': '\u00A1',
"\'": ',',
'<': '>',
'_': '\u203E',
'"': '\u201E',
'\\': '\\',
';': '\u061B',
'\u203F': '\u2040',
'\u2045': '\u2046',
'\u2234': '\u2235'
}
}
},
mounted() {
var vm = this
for (i in flipTable) {
vm.flipTable[vm.flipTable[i]] = i;
}
},
methods: {
reversetext() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9])/gi, ' $1 ');
text = text.split('').reverse().join('');
text = text.replace(/ ([^a-z 0-9]) /gi, '$1');
vm.input_output = text;
},
fliptext() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9\n])/gi, ' $1 ');
text = text.split('\n').reverse().join('\n');
text = text.split('').reverse().join('');
text = text.replace(/ ([^a-z 0-9\n]) /gi, '$1');
vm.input_output = text;
},
reversewords() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9])/gi, ' $1 ');
text = text.replace(/\n/g, ' \n ').split(' ').reverse().join(' ').replace(/ \n /g, '\n');
text = text.replace(/ ([^a-z 0-9]) /gi, '$1');
vm.input_output = text;
},
flipwords() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9\n])/gi, ' $1 ');
text = text.split('\n').reverse().join('\n');
text = text.replace(/\n/g, ' \n ').split(' ').reverse().join(' ').replace(/ \n /g, '\n');
text = text.replace(/ ([^a-z 0-9\n]) /gi, '$1');
vm.input_output = text;
},
reversewordletters() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9])/gi, ' $1 ');
text = text.split(' ');
var len = text.length;
var textarr = new Array();
for (var x = 0; x < len; x++) {
var text2 = vm.$swapcase(text[x]);
text2 = text2.split('').reverse().join('');
textarr[x] = text2;
}
text = textarr.join(' ');
text = text.replace(/ ([^a-z 0-9]) /gi, '$1');
vm.input_output = text;
},
flipupsidedown() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = vm.flipString(text.toLowerCase());
vm.input_output = text;
},
flipString(aString) {
var vm = this,
last = aString.length - 1;
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = vm.flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
},
reversewords() {
var vm = this,
text = vm.input_output;
text = text.replace(/\r/gi, '');
text = text.replace(/([^a-z 0-9])/gi, ' $1 ');
text = text.replace(/\n/g, ' \n ').split(' ').reverse().join(' ').replace(/ \n /g, '\n');
text = text.replace(/ ([^a-z 0-9]) /gi, '$1');
vm.input_output = text;
}
}
}).$mount('#app') </script>
Conclusion
Ok so that 's How to Make The Best Reverse Text Generator Tool In Blogger For Free?. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
Source:
www.soipro.com
About the Author
Hello this is NVH Corp, I am Web Designer and Expert at SoiPro(dot)Com