READ IT BACK TO ME html code
READ IT BACK TO ME
We the People of the United States, in Order to form a more perfect Union, establish Justice,
insure domestic Tranquility, provide for the common defense, promote the general Welfare,
and secure the Blessings of Liberty to ourselves and our Posterity,
do ordain and establish this Constitution for the United States of America
Grab this code and run off like you just stole it !!!
Enjoy !!!
<center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>READ IT BACK TO ME</title>
<style>
body {
font-family: Arial, sans-serif;
}
#text-box {
width: 80%;
height: 200px;
padding: 10px;
font-size: 16px;
}
#buttons {
margin-top: 10px;
}
button {
margin: 5px;
padding: 10px;
font-size: 16px;
}
select {
margin: 5px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>READ IT BACK TO ME</h1>
<textarea id="text-box"></textarea>
<div id="buttons">
<button id="save-button">Save Text File</button>
<button id="read-back-button">Read Back</button>
<button id="reset-button">Reset</button>
<select id="background-color-select">
<option value="white">White</option>
<option value="lightgray">Light Gray</option>
<option value="gray">Gray</option>
<option value="darkgray">Dark Gray</option>
<option value="black">Black</option>
</select>
<select id="text-color-select">
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<script>
const textArea = document.getElementById('text-box');
const saveButton = document.getElementById('save-button');
const readBackButton = document.getElementById('read-back-button');
const resetButton = document.getElementById('reset-button');
const backgroundColorSelect = document.getElementById('background-color-select');
const textColorSelect = document.getElementById('text-color-select');
saveButton.addEventListener('click', () => {
const text = textArea.value;
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'text.txt';
a.click();
});
readBackButton.addEventListener('click', () => {
const text = textArea.value;
const speech = new SpeechSynthesisUtterance(text);
speech.lang = 'en-US';
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
});
resetButton.addEventListener('click', () => {
textArea.value = '';
});
backgroundColorSelect.addEventListener('change', () => {
document.body.style.background = backgroundColorSelect.value;
});
textColorSelect.addEventListener('change', () => {
document.body.style.color = textColorSelect.value;
});
</script></center><center>
<p>We the People of the United States, in Order to form a more perfect Union, establish Justice,</p><p> insure domestic Tranquility, provide for the common defense, promote the general Welfare,</p><p> and secure the Blessings of Liberty to ourselves and our Posterity,</p><p> do ordain and establish this Constitution for the United States of America</p></center>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>READ IT BACK TO ME</title>
<style>
body {
font-family: Arial, sans-serif;
}
#text-box {
width: 80%;
height: 200px;
padding: 10px;
font-size: 16px;
}
#buttons {
margin-top: 10px;
}
button {
margin: 5px;
padding: 10px;
font-size: 16px;
}
select {
margin: 5px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>READ IT BACK TO ME</h1>
<textarea id="text-box"></textarea>
<div id="buttons">
<button id="save-button">Save Text File</button>
<button id="read-back-button">Read Back</button>
<button id="reset-button">Reset</button>
<select id="background-color-select">
<option value="white">White</option>
<option value="lightgray">Light Gray</option>
<option value="gray">Gray</option>
<option value="darkgray">Dark Gray</option>
<option value="black">Black</option>
</select>
<select id="text-color-select">
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<script>
const textArea = document.getElementById('text-box');
const saveButton = document.getElementById('save-button');
const readBackButton = document.getElementById('read-back-button');
const resetButton = document.getElementById('reset-button');
const backgroundColorSelect = document.getElementById('background-color-select');
const textColorSelect = document.getElementById('text-color-select');
saveButton.addEventListener('click', () => {
const text = textArea.value;
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'text.txt';
a.click();
});
readBackButton.addEventListener('click', () => {
const text = textArea.value;
const speech = new SpeechSynthesisUtterance(text);
speech.lang = 'en-US';
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
});
resetButton.addEventListener('click', () => {
textArea.value = '';
});
backgroundColorSelect.addEventListener('change', () => {
document.body.style.background = backgroundColorSelect.value;
});
textColorSelect.addEventListener('change', () => {
document.body.style.color = textColorSelect.value;
});
</script></center><center>
<p>We the People of the United States, in Order to form a more perfect Union, establish Justice,</p><p> insure domestic Tranquility, provide for the common defense, promote the general Welfare,</p><p> and secure the Blessings of Liberty to ourselves and our Posterity,</p><p> do ordain and establish this Constitution for the United States of America</p></center>
</body>
</html>