kesavanm/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Password Gen!</title>
  </head>
  <body>
    <h1> Password Gen!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

<table>
  <!-- <tr>  <td> Count </td> <td> <input name='cnt' id='cnt'> </td>  </tr> -->
  <tr>
    <td> length </td>
    <td> <input name='cntLen' id='cntLen' type='number' size='2' maxlength="2"  value='12' style="width: 3em;"> </td>
  </tr>
  <tr>
      <td>
            <input type='submit' value='[ gen one ]'   id='smtOk'    onclick="randomGen();" >
            <input type='submit' value='[ gen multi]'  id='smtmulti' onclick="tableCreate(4,3);" >
      </td>
      <td>
        <input type='submit' value='[ clear ]' name='clear' id='clear' onclick="tableClear();">
        <input type='submit' value='[ quit  ]' name='quit' id='quit'    onclick="quitApp()">
      </td>
  </tr>
  <tr> <td> random value </td> <td> <font color='red'><div id='RandomValue'></div> </font> </td> </tr>
</table>

<p>
  <label> total multi set(s)</label>
  <input id='cntTbls' type='number' size="2"  maxlength="2"  disabled='disabled' value="0" style="width: 2em;" />
</p>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')

    function randomGen(){
      var rand = Math.floor(Math.random() * 1786) + 5878;
      var array = new Uint32Array(2);
      var cntL = parseInt(document.getElementById("cntLen").value,10) ;
      document.getElementById('RandomValue').innerHTML=randomString(cntL);
    }

    function randomString(len, an){
        an = an&&an.toLowerCase();
        var str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
        for(;i++<len;){
          var r = Math.random()*(max-min)+min <<0;
          str += String.fromCharCode(r+=r>9?r<36?55:61:48);
        }
        return str;
    }

    function quitApp(){
      const electron = require('electron');
      const remote = electron.remote;
      if (process.platform !== 'darwin') { remote.app.exit(); }
    }

    function tableClear(){
      var elems = document.getElementsByTagName("table");
      var matches = [];
      for (var i=0, m=elems.length; i<m; i++) {
          if (elems[i].id && elems[i].id.indexOf("tblRand") != -1) {
              matches.push(elems[i]);
          }
      }

      for(var i=1 ; i<matches.length+1;i++ ){
        var tableR = document.getElementById('tblRand' +i);
        tableR.parentNode.removeChild(tableR);
      }
      document.getElementById('cntTbls').value=0;
    }

    function tableCreate(row,col){
      var cntTbl = parseInt(document.getElementById("cntTbls").value,10) ;
      var body = document.body,
          tbl  = document.createElement('table');
      tbl.id='tblRand'+ ++cntTbl;
      document.getElementById('cntTbls').value=cntTbl;
      tbl.setAttribute("border-collapse", "collapse");
      tbl.setAttribute("class", "tblRandZ");
      tbl.style.width  = '100px';
      tbl.style.border = '1px solid black;';

        for(var i = 0; i < row; i++){
            var tr = tbl.insertRow();
            for(var j = 0; j < col; j++){
              /* if(i == 2 && j == 1){
                    break;
                } else {
                  */
                    var td = tr.insertCell();
                    var cntL = parseInt(document.getElementById("cntLen").value,10) ;
                    td.appendChild(document.createTextNode(randomString(cntL)));
                    td.style.border = '1px solid';
                    /*if(i == 1 && j == 1){
                        td.setAttribute('rowSpan', '2');
                    }*/
                //}
            }
        }
        body.appendChild(tbl);
        body.appendChild(document.createElement('p'));
    }

  </script>

  <style>
    #div1 {margin:10px;font-size:1.25em;}
    tblRandX {border-collapse:collapse;border:1px solid #7f7f7f;}
    #tblRandY {border-collapse:collapse;border:1px solid #7f7f7f;}
    .tblRandZ {border-collapse:collapse;border:1px solid #7f7f7f;}
    // td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}

   // input[type="number"] {   width:32px;}
  </style>

  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })


  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Password Gen!</title>
	</head>
	<body>
	<h1> Password Gen!</h1>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	We are using Node.js <script>document.write(process.versions.node)</script>,
	Chromium <script>document.write(process.versions.chrome)</script>,
	and Electron <script>document.write(process.versions.electron)</script>.

	<table>
	<!-- <tr> <td> Count </td> <td> <input name='cnt' id='cnt'> </td> </tr> -->
	<tr>
	<td> length </td>
	<td> <input name='cntLen' id='cntLen' type='number' size='2' maxlength="2" value='12' style="width: 3em;"> </td>
	</tr>
	<tr>
	<td>
	<input type='submit' value='[ gen one ]' id='smtOk' onclick="randomGen();" >
	<input type='submit' value='[ gen multi]' id='smtmulti' onclick="tableCreate(4,3);" >
	</td>
	<td>
	<input type='submit' value='[ clear ]' name='clear' id='clear' onclick="tableClear();">
	<input type='submit' value='[ quit ]' name='quit' id='quit' onclick="quitApp()">
	</td>
	</tr>
	<tr> <td> random value </td> <td> <font color='red'><div id='RandomValue'></div> </font> </td> </tr>
	</table>

	<p>
	<label> total multi set(s)</label>
	<input id='cntTbls' type='number' size="2" maxlength="2" disabled='disabled' value="0" style="width: 2em;" />
	</p>

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')

	function randomGen(){
	var rand = Math.floor(Math.random() * 1786) + 5878;
	var array = new Uint32Array(2);
	var cntL = parseInt(document.getElementById("cntLen").value,10) ;
	document.getElementById('RandomValue').innerHTML=randomString(cntL);
	}

	function randomString(len, an){
	an = an&&an.toLowerCase();
	var str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
	for(;i++<len;){
	var r = Math.random()*(max-min)+min <<0;
	str += String.fromCharCode(r+=r>9?r<36?55:61:48);
	}
	return str;
	}

	function quitApp(){
	const electron = require('electron');
	const remote = electron.remote;
	if (process.platform !== 'darwin') { remote.app.exit(); }
	}

	function tableClear(){
	var elems = document.getElementsByTagName("table");
	var matches = [];
	for (var i=0, m=elems.length; i<m; i++) {
	if (elems[i].id && elems[i].id.indexOf("tblRand") != -1) {
	matches.push(elems[i]);
	}
	}

	for(var i=1 ; i<matches.length+1;i++ ){
	var tableR = document.getElementById('tblRand' +i);
	tableR.parentNode.removeChild(tableR);
	}
	document.getElementById('cntTbls').value=0;
	}

	function tableCreate(row,col){
	var cntTbl = parseInt(document.getElementById("cntTbls").value,10) ;
	var body = document.body,
	tbl = document.createElement('table');
	tbl.id='tblRand'+ ++cntTbl;
	document.getElementById('cntTbls').value=cntTbl;
	tbl.setAttribute("border-collapse", "collapse");
	tbl.setAttribute("class", "tblRandZ");
	tbl.style.width = '100px';
	tbl.style.border = '1px solid black;';

	for(var i = 0; i < row; i++){
	var tr = tbl.insertRow();
	for(var j = 0; j < col; j++){
	/* if(i == 2 && j == 1){
	break;
	} else {
	*/
	var td = tr.insertCell();
	var cntL = parseInt(document.getElementById("cntLen").value,10) ;
	td.appendChild(document.createTextNode(randomString(cntL)));
	td.style.border = '1px solid';
	/*if(i == 1 && j == 1){
	td.setAttribute('rowSpan', '2');
	}*/
	//}
	}
	}
	body.appendChild(tbl);
	body.appendChild(document.createElement('p'));
	}

	</script>

	<style>
	#div1 {margin:10px;font-size:1.25em;}
	tblRandX {border-collapse:collapse;border:1px solid #7f7f7f;}
	#tblRandY {border-collapse:collapse;border:1px solid #7f7f7f;}
	.tblRandZ {border-collapse:collapse;border:1px solid #7f7f7f;}
	// td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}

	// input[type="number"] { width:32px;}
	</style>

	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let mainWindow

	function createWindow () {
	// Create the browser window.
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})



	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()

	// Emitted when the window is closed.
	mainWindow.on('closed', function () {
	// Dereference the window object, usually you would store windows
	// in an array if your app supports multi windows, this is the time
	// when you should delete the corresponding element.
	mainWindow = null
	})
	}



	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (mainWindow === null) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.