"use strict";

                            // function to count and display the number of characters
                            function displayCount() {

                                let userStr = document.getElementById('word').value;

                                let count = "Your input has XX characters (not including spaces).";
                                let newUserStr = "";
                                let newCount = "";

                                if(count.includes('XX')) {
                                    newUserStr = userStr.split(" ").join("");  // remove space to count only letters
                                    newCount = count.replace('XX', `${newUserStr.length}`);
                                    
                                }

                                let elPhrase = document.getElementById('phrase');
                                elPhrase.textContent = userStr;
                                let elCount = document.getElementById('count');
                                elCount.textContent = newCount;
                            }
                        
                    

JS Char Count

Using HTML, JavaScript, custom CSS & Bootstrap to design an application that captures user input and then executes code to count the character of that input but doesn't include the spaces, displaying the count back to the page.

The code is structure in single controller function.

displayCount() function

Here we use javascript to "Get" the value from the HTML file user input field by using document.getElementById to locate the html tag with id of 'word'.

Declaring string variables called 'count', 'newUserStr' and 'newCount' that will be used to display information back to the page.

Then using an if-statement/boolean to check to see if 'XX' exist in the 'count' string, which is always true in this case. We then split the string at every space and then join it back together without the spaces as the variable 'newUserStr'. Then we replace the 'XX' in the 'count' string with the length of the 'newUserStr' string in the variable 'newCount'.

Finally, using document.getElementById and the .textContent property we write the original user string back to the page and the message with the character count held in the 'newCount' variable.