JavaScript Tutorial

In this tutorial, I will show how to create a simple Word Counter App using HTML and JavaScript. The main goal of this tutorial is to give you ideas or techniques how to manipulate html content text and more. This web application idea or techniques can be useful for your future web application projects such as Content Management Systems also known as CMS. The application only uses pure JavaScript codes in acheiving the main features.

The scripts are written in:

In this tutorial, I will share with you a simple web app written in HTML, CSS, and JavaScript. The main purpose of this tutorial will help new programmers, especially the IT/CS students to have an idea of how to handle computations in a web application using JavaScript. Here, I will be providing a simple personal loan calculator source code. The application uses different built-in objects or functions in JavaScript such as the click event listener and Math Object.

In this tutorial, I will share with you a simple web app written in HTML, CSS, and JavaScript. This tutorial objective is to give new programmers, especially the students a very simple idea of how do simple applications are being made using JavaScript. Here, students can learn about JavaScript's click event listener, page onLoad, and updating textContent. I will be providing a source code of Simple Counter App.

In this tutorial, I will show you how to create a simple search box that can toggle show/hide elements in your HTML. I will give you an idea of how to achieve this kind of feature using jQuery. The main goal of the said feature is to hide the element where the text does not include the word, character, or phrase in the search box.

In this article, I will be discussing about how to create an Add and Remove Form Item Feature in web-application using jQuery's clone() method. This kind of feature is commonly applied to a project which has a process of saving multiple data at once in the database. There are lots of ideas and techniques you can create to achieve this feature with the help of jQuery, but I found this solution more simple and easiest in my experience.

In this tutorial, you will learn how to create a Custom Controls for the HTML Video Elements. here, you will know how to create a custom play/pause button, stop button, playback slider, and volume slider. The custom controls functionalities can be achieve using JavaScript and jQuery Library.

This is a simple tutorial that will teach how to convert Text into Speech in web applications. In order to do this, we are going to use the Web Speech API Interface Speech Synthesis. The Web Speech API will allow you to convert the text into incorporate voice data into web projects.

In this tutorial, I will be providing a simple web application that allows users to write a text message and converts it into speech. The application will re-display the text message below the form. Each word spoken will be highlighted.

In this tutorial, you will learn how to Dynamically Map an Area of an Image using JavaScript/jQuery. This will help you to understand also on how to put a detection link on a specific part or area of the image. With the use of HTML Canvas, we can dynamically locate the specific position and size of the area we want to detect on the image.

In this tutorial, we will tackle about how to create a Bar Graph using Chart.js. Chart.js is an open-source javascript library that focuses in generating a graphical canvases such as Line , Bar, and Pie Graphs. Here, I will be providin a source code that demonstrates how to generate a simple Bar Graph using the said javascript library.

In this tutorial, we will tackle about how to Sort the HTML Table Column Data using jQuery. Here, I will show how to create a custom JavaScript function that can sort each column in your HTML table. I will be providing a simple HTML Application Source code below which contains a sample HTML Table with Table sorting function. The sorting function will be triggered when the user clicks the column header. Each column header will have an arrow up icon if a user triggers the column to sort in ascending direction and an arrow down for descending direction.