const sentences = [
"Always be closing",
"Bee a good person",
"Chris is and amazing guy",
"Down low breezy",
"Sip a small drink of drank",
"Stiff raccoons are great",
"Greg has an action hoe",
"Hoes are useful garden tools",
"I know a few folks from Norfolk",
"Travis Travers is a piece of shit",
"K-Mart is out of Binnis man",
"Low men are always around",
"Manatee Springs State Park",
"Your breasts taste like ham",
"Over the crows beak",
"Pounce on the claw",
"Quigley under the sack",
"Raise a glass ball",
"Stiff arm that chump",
"Throw it down big man",
"Under the umbrella is dry",
"Cutlass Calais provides a smooth ride",
"We all should funk",
"X gon give it to ya",
"Your sweat pants stink",
"Zoos are jails"
];
function getSentence(htmlId, stringCase){
const element = document.getElementById(htmlId);
var n = Math.random();
// generates random number between 0-25 which is sentences.length
n = n * 25;
n = Math.floor(n) + 1;
if(stringCase === 'upper' || stringCase === 'Upper') {
return element.value = sentences[n].toUpperCase();
} else if (stringCase === 'lower' || stringCase === 'Lower') {
return element.value = sentences[n].toLowerCase();
} else {
throw new Error('String case required as second argument: upper or lower');
return;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>JavaScript: toUpperCase()</title>
</head>
<body>
<h1 class='lesson-h1'>JavaScript: toUpperCase()</h1>
<textarea cols="40" type="text" name="text-input" id="text-input" placeholder="Enter Text Here"></textarea>
<br><br>
<button id="random-text-button">Generate Random Text</button>
<button id="submit-button">toUpperCase()</button>
<div id="htmlDiv">
</div>
<script src="RandomSentence.js"></script>
<script type="text/javascript">
const userText = document.getElementById('text-input');
const randomTextButton = document.getElementById('random-text-button');
const submitButton = document.getElementById('submit-button');
const htmlDiv = document.getElementById('htmlDiv');
submitButton.addEventListener('click', () => {
let text = userText.value;
let upperCaseText = text.toUpperCase();
if(!text){
console.log("There is no text to parse");
return htmlDiv.innerHTML = "<h3>There is no text to parse</h3>";
}
else {
console.log("there is user text");
htmlDiv.innerHTML = `<h3>${text} => ${upperCaseText}</h3>`;
return document.getElementById('text-input').value = '';
}
});
randomTextButton.addEventListener('click', () => {
return getSentence('text-input', 'lower');
});
</script>
<?php
include('../show_code.php');
show_code('RandomSentence.js');
show_code('index.php');
?>
</body>
</html>