Here you go:
<!DOCTYPE html>
<html>
<head>
<title>Text Generator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.result-container {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f7f7f7;
}
.copy-icon {
float: right;
margin-left: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Text Generator</h1>
<label for="inputText">Enter Text:</label>
<textarea id="inputText"></textarea>
<button onclick="generateText()">Generate</button>
<div id="resultContainer" class="result-container"></div>
</div>
<script>
function generateText() {
const inputText = document.getElementById('inputText').value;
const reversedText = reverseText(inputText);
const flippedText = flipText(inputText);
const reversedWording = reverseWording(inputText);
const flippedWording = flipWording(inputText);
const reversedEachWord = reverseEachWord(inputText);
displayResult(reversedText, flippedText, reversedWording, flippedWording, reversedEachWord);
}
function reverseText(text) {
return text.split('').reverse().join('');
}
function flipText(text) {
const characters = {
a: 'É',
b: 'q',
c: 'É”',
d: 'p',
e: 'Ç',
f: 'ÉŸ',
g: 'ƃ',
h: 'É¥',
i: 'ı',
j: 'ɾ',
k: 'Êž',
l: 'l',
m: 'ɯ',
n: 'u',
o: 'o',
p: 'd',
q: 'b',
r: 'ɹ',
s: 's',
t: 'ʇ',
u: 'n',
v: 'ʌ',
w: 'Ê',
x: 'x',
y: 'ÊŽ',
z: 'z',
A: '∀',
B: 'ð’',
C: 'Ɔ',
D: 'á—¡',
E: 'ÆŽ',
F: 'Ⅎ',
G: 'פ',
H: 'H',
I: 'I',
J: 'Å¿',
K: 'â‹Š',
L: 'Ë¥',
M: 'W',
N: 'N',
O: 'O',
P: 'Ô€',
Q: 'Q',
R: 'á´š',
S: 'S',
T: '⊥',
U: '∩',
V: 'Λ',
W: 'M',
X: 'X',
Y: 'â…„',
Z: 'Z',
' ': ' '
};
let flippedText = '';
for (let i = 0; i < text.length; i++) {
const char = text[i];
flippedText += characters[char] || char;
}
return flippedText;
}
function reverseWording(text) {
return text.split(' ').reverse().join(' ');
}
function flipWording(text) {
const words = text.split(' ');
const flippedWords = words.map(word => flipText(word));
return flippedWords.join(' ');
}
function reverseEachWord(text) {
const words = text.split(' ');
const reversedWords = words.map(word => reverseText(word));
return reversedWords.join(' ');
}
function displayResult(reversedText, flippedText, reversedWording, flippedWording, reversedEachWord) {
const resultContainer = document.getElementById('resultContainer');
resultContainer.innerHTML = '';
createResultElement('Reversed Text:', reversedText);
createResultElement('Flipped Text:', flippedText);
createResultElement('Reversed Wording:', reversedWording);
createResultElement('Flipped Wording:', flippedWording);
createResultElement('Reversed Each Word:', reversedEachWord);
}
function createResultElement(title, text) {
const resultContainer = document.getElementById('resultContainer');
const titleElement = document.createElement('h3');
titleElement.textContent = title;
resultContainer.appendChild(titleElement);
const textElement = document.createElement('div');
textElement.textContent = text;
const copyIcon = document.createElement('span');
copyIcon.classList.add('copy-icon');
copyIcon.textContent = '📋';
copyIcon.addEventListener('click', function () {
copyToClipboard(text);
});
textElement.appendChild(copyIcon);
resultContainer.appendChild(textElement);
}
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('Copied to clipboard: ' + text);
}
</script>
</body>
</html>