Web page dynamic welcome message
The web page exercise is a simple example of how you can get input from a user, and then apply that input value within JavaScript to create a dynamic web response. Input field provides a way for the user to interact with the web page. To get the input value, select the page element, then from within that element property values there is a property name value which is holding the input field value. Return the value in a variable then use that value within a string response which then gets output into the web page as a customized message to the web user. Code example of selecting a page element, document.querySelector(), updating style property of an element assigning a new value to the property userVal.style.borderColor, adding an event listener to an element btn.onclick. 1. Get the username in the input field 2. When the button is pressed add an event that get the username and creates a welcome message on the page. 3. Add a check to ensure the length of the input is larger than 3 characters long ```html <body> <div class='output'>What is your name?</div> <input type='text' name='userName'> <button>Submit</button> </body> ``` The script ```js const output = document.querySelector('.output'); const userVal = document.querySelector('input[name="userName"]'); const btn = document.querySelector('button'); userVal.style.borderColor = '#333'; btn.onclick = () => { if(userVal.value.length > 3){ const message = `Welcome to the site ${userVal.value}`; output.textContent = message; userVal.style.display = `none`; btn.style.display = `none`; } else { output.textContent = `Name length must be 3+ characters`; userVal.style.borderColor = `red`; } } ``` Here's a simple script that can help you welcome visitors to your site with javascript. If you like this type of content, register and participate in our website by leaving a comment or even BATTERING code with us.