HTML5 Canvas Reflexology Map and Area

Open Source HTML5 canvas based reflexology and massage area for feet and hands available in English and Bahasa Indonesia.

On the top right panel of this web app you can see 4 buttons:

1. Search
Tap to find any part of your body and tap the result, then you will see massage point related to that.

2. Hide all massage points
Tap this button to show all available massage point.

3. Clear all
Tap this one to hide all the reflexology points.

4. Hamburger menu
To show a navigation drawer that contains body part/organs that if you click one of them, massage points will appear on the screen.

Watch the demo video here:

Get the source code here: https://github.com/habibieamrullah/HTML5ReflexologyAreas

PHP MySQL Travel History Questionnaire during Covid19

This is a simple single page PHP and MySQL based Questionnaire regarding travel history during Covid19.

You will see a questionnaire page asking you 5 questions:

  1. Your name
  2. Phone number
  3. Have you been to China in last 2 weeks?
  4. Have you travelled out of Singapore in the last 2 weeks?
  5. Body temperature

When you click submit button, your entered data will be submitted and recorded in MySQL database.

You can switch to see between form page and record page by clicking a link at the bottom of these pages.

Lorem Ipsum Cakes V2 – Simple Cake Shop Online Order System

Lorem Ipsum Cakes V2 is a simple cake shop online order system using HTML5 and PHP. It simply record client’s orders on your website database and your client can simply chat with you by using WhatsApp, either web version on their desktop devices or mobile phones using installed WhatsApp app.

How to make a responsive full screen background image in HTML5

Bringing an image to a web page is easy as we can use <img src… tag. But what if we want to use an image as a background image? It is also easy. You can search for it on internet. But, there is more, how to make this background image in full screen mode, center fixed, filling the screen, with maintained aspect ratio, I mean not stretched? The answer is this few lines of css codes:

Lorem Ipsum Cakes – Free Order Via WhatsApp HTML5 Template

Hello everyone. This is a Free HTML website template that I’ve made it recently for one of my projects.

Let’s say we are selling cakes. People can order their cakes by filling this order form, and then the order message is being sent via WatsApp.

Feel free to modify the code and change my number to your number.

Open this link to see the demo: https://ciihuy.com/downloads/loremipsumcakes/

How to make and generateQR Code with JavaScript – Center Align the QR Code

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/

qrcode.js library is very simple and useful JavaScript library that can help you generate qr code images easily.

You can dowload the source code here: https://drive.google.com/open?id=17ZczRpYNWun5IH32Xv9XXp-0b_gsbuwK

How to make an HTML5 Note Taking Program

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 taking program.

By watching this tutorial you will know how to store note data, how to retrieve it back and how to delete each one of notes we saved.

We don’t use any database to make this note taking program, we only use what so-called Local Storage on web browser, so our notes are saved on web browser.