finished ex04

10- ex04/index.html

@@ -21,6 +21,12 @@
     <div id="banner">
         <span id="textField"> </span>
     </div>
+    
+    <button class="option" id="option"> show info!</button>
+    <div class="info" id="infoContainer">
+        <span id="info"> </span>
+    </div>
+    
     <script src="scripts/main.js"></script>
 </body>
 </html>

10- ex04/scripts/main.js

@@ -1,21 +1,35 @@
 const text = document.getElementById('textArea');
 const scrambleButton = document.getElementById('submitButton');
 const textField = document.getElementById('textField');
+const optionButton = document.getElementById('option');
+const info = document.getElementById('info');
+const infoContainer = document.getElementById('infoContainer');
+
+
 
 function scramble(event){
     
-let sentence = text.value;
-let trimmedText = sentence.trim();
-let splitText = trimmedText.split(' ');
-let finalSentence = [];
+    let sentence = text.value;
+    let trimmedText = sentence.trim();
+    let splitText = trimmedText.split(' ');
+    let finalSentence = [];
 
 while(splitText.length > 0){
     let random = Math.floor(Math.random() * splitText.length);
     finalSentence.push(splitText.splice(random,1));
 }
-finalSentence= finalSentence.join(' ');
+finalSentence = finalSentence.join(' ');
 textField.innerHTML = finalSentence;
+
+optionButton.addEventListener('click', function(event){
+    let splittedText = trimmedText.split(' ');
+    let wordCount = splittedText.length;
+    let charCount = trimmedText.length;
+    info.innerHTML = "amount of words: " + wordCount + "<br />" + "amount of characters: " + charCount;
+    infoContainer.style.visibility = "visible";
+});
 }
 
 
+
 scrambleButton.addEventListener('click',scramble);

10- ex04/styles/main.css

@@ -17,6 +17,8 @@ header h1{
 }
 button{
     margin-left: 10%;
+    background-color: rgb(60, 133, 82);
+    color: white;
 }
 
 form textarea{
@@ -27,5 +29,12 @@ form textarea{
 
 div {
     height: 100px;
+    width: 50%;
+    margin: 2%;
+    margin-left: 10%;
     border:  solid thin gray;
-}
+}
+.info{
+ visibility: hidden;
+ }
+