JavaScript: toLowerCase()




The code used for RandomSentence.js is below:


 const sentences = [
    "Always be closing",
    "Bee a good person",
    "Chris is awesome",
    "Down low breezy",
    "Elephants wisdom",
    "Flying raccoons are great",
    "Greg has a garden hoe",
    "Hoes are useful garden tools",
    "I know a few people",
    "Justify this action",
    "K-Mart is out of Binnis",
    "Low men are always around", 
    "Manatee Springs State Park", 
    "New World Boarder", 
    "Over the crows beak", 
    "Pounce on the claw", 
    "Quigley under the sack", 
    "Raise a little bell",
    "Stiff arm that chump",
    "Throw it down big man", 
    "Under the umbrella is dry",
    "Visions of buick regals", 
    "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;

    }
    
}

The code used for index.php is below:


<!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: toLowerCase()</title>
</head>
<body>

<h1>JavaScript: toLowerCase()</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">toLowerCase()</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 lowerCaseText = text.toLowerCase();
        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} => ${lowerCaseText}</h3>`;
            return document.getElementById('text-input').value = '';
        }
    });

    randomTextButton.addEventListener('click', () => {
        return getSentence('text-input', 'upper');
    });

</script>

<?php
    include('../show_code.php');
    show_code('RandomSentence.js');
    show_code('index.php');
?>    
</body>
</html>