JavaScript Word Counter Summary: in this tutorial, you’ll learn how to build a Word Counter application using vanilla JavaScript. Here is the Word Counter App that you’re going to build. Create the project structure First, create the project folder called word-counter. Second, under the word-counter project, create the css and js folders, which will store…
Read more
How to Toggle Password Visibility Summary: in this tutorial, you will learn how to toggle the visibility of a password input by using plain JavaScript. A password field provides a way for users to securely input a password by showing the * character instead of the actual characters. However, it is likely that some users…
Read more
JavaScript input Event Summary: in this tutorial, you’ll learn about the JavaScript input event that fires whenever the value of the <input>, <select>And <textarea> changes. Introduction to the JavaScript input event The input event fires every time whenever the value of the <input>, <select>, or <textarea> element changes. Unlike the change event that only fires…
Read more
JavaScript change Event Summary: in this tutorial, you’ll learn about the JavaScript change event of the input text, radio button, checkbox, and select elements. The change event occurs when the element has completed changing. To attach an event handler to the change event of an element, you can either call the addEventListener() method: element.addEventListener(‘change’, function(){…
Read more
Removing Items from a Select Element Conditionally Summary: in this tutorial, you’ll learn how to use JavaScript to remove items from a select element based on a condition. JavaScript uses the HTMLSelectElement class to represent the <select> element. To remove an option from a select element, you use the remove() method of the HTMLSelectElement object. Suppose the…
Read more
JavaScript: Dynamically Add & Remove Options Summary: in this tutorial, you will learn how to dynamically add options to and remove options from a select element in JavaScript. The HTMLSelectElement type represents the <select> element. It has the add() method that dynamically adds an option to the <select> element and the remove() method that removes…
Read more
JavaScript select Element Summary: in this tutorial, you will learn how to handle the <select> element in JavaScript. Introduction to the HTML select elements A <select> element provides you with a list of options. A <select> element allows you to select one or multiple options. To create a <select> element, you use the <select> and…
Read more
JavaScript Checkbox Summary: in this tutorial, you will learn how to use JavaScript to test if a checkbox is checked, get the values of selected checkboxes, and select/unselect all checkboxes. Creating an HTML checkbox To create a checkbox, you use the <input> element with the type of checkbox as follows: <input type=”checkbox” id=”accept”> Accept Code…
Read more
JavaScript Radio Button Summary: in this tutorial, you will learn how to use JavaScript to check which radio button in a radio group is checked. Introduction to the JavaScript Radio Button Radio buttons allow you to select only one of a predefined set of mutually exclusive options. To create a radio button, you use the…
Read more
JavaScript Form Summary: in this tutorial, you will learn about JavaScript form API: accessing the form, getting values of the elements, validating form data, and submitting the form. Form basics To create a form in HTML, you use the <form> element: <form action=”/signup” method=”post” id=”signup”> </form> Code language: HTML, XML (xml) The <form> element has…
Read more