JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<!doctype html>
<head>
    <title>High Scores Table - Client Side Database</title>
</head>
<body>

    <p>
        <input type="text" name="name" id="name" length="3" maxlength="3" placeholder="NME">
        <input type="number" name="score" id="score" placeholder="684351">
        <input type="button" onclick="DB.callAddScore()" value="add">
    </p>

    <div id="scores">

    </div>

    <script src="localSQL.js"></script>
</body>
</html>

JavaScript

DB = {
    shortName:"highScores",
    version: "1.0",
    displayName:"High Scores Records",
    maxSize:65536,
    db:null,
    scores:[],
    tables:[
        {
            name:'highScores',
            fields:[
                {name:'id', structure:'INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT'},
                {name:'date', structure:'DATE NOT NULL'},
                {name:'user', structure:'INTEGER NOT NULL'},
                {name:'score', structure:'INTEGER NOT NULL'}
            ]
        },
        {
            name:'users',
            fields:[
                {name:'id', structure:'INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT'},
                {name:'name', structure:'TEXT NOT NULL'}
            ]
        }
    ],
    init:function(){
        this.db = openDatabase(this.shortName,
                               this.version,
                               this.displayName,
                               this.maxSize);
        this.db.transaction(
            function(transaction){
                var sql, table, field;

                for(var tableNum = 0, numTables = DB.tables.length; tableNum < numTables; tableNum++){
                    table = DB.tables[tableNum];
                    sql = [
                        'CREATE TABLE IF NOT EXISTS ',
                        table.name,
                        ' ('
                    ];

                    for(var fieldNum = 0, numFields = table.fields.length; fieldNum < numFields; fieldNum++){
                        field = table.fields[fieldNum];

                        //separate fields with commas
                        if(fieldNum > 0){
                            sql.push(', ');
                        }

                        sql.push(field.name, ' ');
                        sql.push(field.structure);
                    }

                    sql.push(');');

                    console.log('sql statement: ' + sql.join(''));
                    transaction.executeSql(sql.join(''));
    ...