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.

Adding html file inside assets folder (Creating HTML5 Android WebApp)

Now we are ready to add our html file inside assets folder. Create a folder named assets and put your html file there. Then build the app. You will see your app is running displaying that html page.

This code is for html sample page used in this tutorial:

<!DOCTYPE html>
		<title>LightWeight NoteTaker</title>
		<p>This is a LightWeight NoteTaker HTML5 Android app</p>

Edit the file (Creating HTML5 Android WebApp)

The next step is to edit file. Copy and paste this code to your MainActivity, but remember keep your package name unchanged, my package name is “com.thirteenov.lightweightnotetaker” so you must your own package name as it is your unique app identifier.

package com.thirteenov.lightweightnotetaker;


import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView browser;

    protected void onCreate(Bundle savedInstanceState) {



        browser = findViewById(;
        browser.setWebChromeClient(new WebChromeClient());


        browser.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView viewx, String urlx) {
                    return false;
                    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlx));
                    return true;

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView browser = findViewById(;
        if ((keyCode == KeyEvent.KEYCODE_BACK) &amp;&amp; browser.canGoBack()) {
            //if Back key pressed and webview can navigate to previous page
            // go back to previous page
            return true;
        return super.onKeyDown(keyCode, event);

Adding the WebView to activity_main.xml in Android Studio (Creating HTML5 Android WebApp)

The next step is to add WebView to your layout file in Android Studio.

Delete everything in your layout before adding WebView. Then after you drag and drop the WebView, you need to make it full screen.

Make sure you set the constraint correctly and set the layout-width and layout-height to match constraint.

Give it an id: “webview”

Now we are done with layout. Next is to edit file.

Creating New Android Project (Creating HTML5 Android WebApp)

As usual, to create a new project of anything, in this case Android project, we just need to follow the dialog wizard.

I named this project LightWeight NoteTaker, a light weight html5 note taking app.

The package name of this app is “com.thirteenov.lightweightnotetaker” . So basically we need that package name as a unique identifier of our app.

I used Java as main programming language for this project, because it’s more convenient to me.

Then we click “Finish” button.

Let’s create an HTML5 based Android web app

Hi, I’m going to start creating an HTML5 based Android web app.

I’ve just Installed Android Studio and it’s getting ready now (it’s currently downloading some updates before I can use it).

So basically, the idea behind creating Android WebApp is to have a WebView in the app and we create everything (the content) inside that WebView.

So mostly we code in HTML5, and less in Java.

Improved MyRotationTouchpad Script for Unity3D (Vertical and Horizontal)

Previously I’ve shared a script with you I called “MyRotationTouchpad”. But I was thinking I need to improve it.

So here it is, newer updated script. What I improved in this script is: You can rotate objects horizontally and also vertically.

This is the script:

Very Simple Third Person Controller for Unity3D

Based on some of my previous tutorials, I’ve created this very simple third person controller system that you can use for your games.

With this system you can move your character by using virtual touch joystick and rotate around by dragging the screen left and right.

How to click and drag to Mouse Orbit in Unity

In many cases we need an ability to do Mouse Orbit in our Unity Game. Mouse Orbit means by moving your mouse you are orbiting a specific object to view it in different angles.

I’ve found this script from this link:

By default, without clicking the screen you already orbiting your specific object. But I modified the script to only orbit by mouse click only, I mean if I don’t hold my left mouse button I don’t want to orbit.