Category: JavaScript Tutorial

python tutorials and learn python

Created with Sketch.

Javascript Form Validation

Javascript Form Validation Summary: in this tutorial, you’ll learn about JavaScript form validation by building a signup form from scratch. What is form validation? Before submitting data to the server, you should check the data in the web browser to ensure that the submitted data is in the correct format. To provide quick feedback, you…
Read more

Learn JavaScript Debounce Function By Building the Wikipedia Search App

Learn JavaScript Debounce Function By Building the Wikipedia Search App Summary: in this tutorial, you’ll learn about JavaScript debounce function and how to use it to improve application performance. To understand the debounce function, you’re going to build a Wikipedia Search application using the debouncing programming technique. Create the project folder structure First, create a…
Read more

JavaScript Word Counter

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

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

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

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

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

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

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

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