Category: HTML5, CSS & JavaScript

This tutorial is answering a question about how to center align the qr code image generated by qrcode.js library on my previous video: https://www.youtube.com/watch?v=gLLd9YJOJgM&lc And the answer is relatively easy, we can adjust the styling of the div containing qr code image to make it center aligned. You can download the library from here: https://davidshimjs.github.io/qrcodejs/…

HTML5 is amazing to me it and I have fun to do coding with JavaScript because it runs on web browser just like that, so we don’t have to install anything, its just running on web browser. In this tutorial I will share with you how to create a web program, this time, a note…

In this video I demonstrate how to use PDFJS to open a full screen pdf file in a web browser and also how to embed a pdf file in an Iframe. By default PDFJS opens the pdf file from any url you specified in full screen. But we can use Iframe to open pdf file…

Here is another example and tutorial how we can do a show and hide previous and next HTML5 divs/tabs based on it’s id’s and classes… The idea is simple, we must store a value of a number of current tab that we are seeing right now in a variable, then by clicking next button we…

Hi! Previously I was searching for a way to capitalize the first letter of a word in JavaScript. I thought there is built in function/method in JavaScript to do that, but I didn’t find it. So, here is a simple function that I’ve made. To use this function, just call the function with any word…

In this post I’m going to share a simple PHP script to generate random sentence consisted of random pre-defined words. For example I want to show a text saying: “Hi, thank you for visiting my website” several times, but I don’t want repetitively saying exactly that sentence. Then the solution is this program, which can…

In this video tutorial I’m sharing about how to create “Load More” button in JavaScript to show partial contents of an array variable. Please note that in this technique first I retrieve all the information from server at single shot and store it in single array variable. So load more mechanism is happening on client…

Phaser.js is a good library for creating HTML5 games. However, this time I tried to use Phaser to make a greeting card maker web app. Visit CardU a webapp that I’ve made recently. You can test it and see how it works. Here I will share the source code of index.html and main.js files used…

The common way to display an image on a web page is showing image files by using <img src=”blabla.jpg”> tag. But the problem is image files are not good enough if you scale up the web page, you will see the pixels. It’s time to use SVG instead image files. This codes I’m going to…

Hello again! I’ve created a simple JavaScript program that can encrypt and decrypt basic texts. Watch this: And of course, this is the source code:

Hi, This is a short tutorial about creating simple menu system that if you click a menu item, it will show a div and hide another divs. With using this system you can make a single page web app nicely. Watch the video here:

Let’s say we have a huge data in an HTML table. Now we need to export it as an Excel file. What to do? Basically, we can select entire table, copy and paste it into a blank Excel document. Or, if we code it in JavaScript, here how we can achieve that. Watch this video:

In this video tutorial I will show you how you can create and send an HTML email from Gmail. Here is the source of this HTML email:

In this example, I have a bunch of city names as an array variable in JavaScript. Then I want to make a list of links for all the city names. Here I do it using jQuery: <div id=”kotas”></div> <script> var kotas = [ “Banda Aceh”, “Langsa”, “Lhokseumawe”, “Meulaboh”, “Sabang”, “Subulussalam”, “Denpasar”, “Pangkalpinang”, “Cilegon”, “Serang”, “Tangerang…

Generating random numbers is a common thing in programming. Here is some examples in JavaScript: //Basic Random Math.random(); //From 0 to specific number Math.random() * 10; //Removing decimals Math.floor(Math.random() * 10); //Random between 5 and 10 Math.floor(Math.random() * 5) + 5; //Random between 5 and 10 (included 10) Math.floor(Math.random() * 5) + 6;

Imagine if we have some divs, and we want to show them one by one like a gallery, by providing users two buttons to navigate to previous or next div. How do we code it? In this tutorial I’ll share how I do it by using jQuery.