tsurubaso/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Japanese Memo</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

    <link rel="stylesheet" href="styles.css">
    <script  src="renderer.js"></script>

</head>
<body style="background: white;">
<h1>
    Please enter the word(s) to Search
</h1>

<!-- input and button -->
<input type="text" id="input1" placeholder="write here">
<button type="button" id="btn1"  onclick="myScript()">Search the word</button>
<button type="button" id="btn2"  onclick="showMemo()">Show the Memo</button>
<button type="button" id="btn3"  onclick="eraseStore()">Erase the Memo</button>

<br>


</body>
</html>

## main.js
// Importing

const { app, BrowserWindow, ipcMain, dialog } = require('electron');
var Dictionary = require('japaneasy');
const Store = require('electron-store');

//Values

const store = new Store();
result = undefined;

//////////////////////////////////

function createWindow() {
	const win = new BrowserWindow({
		width: 1300,
		height: 400,
		webPreferences: {
			nodeIntegration: true,
			contextIsolation: false
		}
	});
	////////////////////////////////
	////////// Base functions
	win.loadFile('index.html');
	// win.webContents.openDevTools()
}

app.whenReady().then(() => {
	createWindow();
});

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit();
	}
});

app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow();
	}
});
////////////////////////////////
ipcMain.on('Manip1', function(event, wordToSearch) {
	console.log("wordToSearch", wordToSearch);

	var dict = new Dictionary();
	dict(wordToSearch)
		.then(function(result) {
			event.sender.send('WordFromMain', result);
			return result;
		})

});

ipcMain.on('Manip1a', function(event) {
	console.log('The word is undefined');
	dialog.showMessageBox({
		message: 'Please enter a word',
		type: 'warning',
		title: 'Word undefined'
	});
});

ipcMain.on('Manip2', function(event) {
	console.log(store.store)
	event.sender.send('WordFromStore', store.store);
});

ipcMain.on('Manip3', function(event) {
	//////////////Alert message to confirm Erase action
	//event.preventDefault();
	let options = {};
	options.type = 'warning';
	options.buttons = [ '&Yes', '&Cancel' ];
	options.defaultId = 1;
	options.title = 'Erase Memo';
	options.message = 'Do you really want to erase all words in the memo?';
	options.cancelId = 1;
	options.noLink = true;

	dialog.showMessageBox(options).then((returnValue) => {
		//console.log(returnValue);
		if (returnValue.response === 0) {
			//Yes button pressed
			store.clear();
			event.sender.send('wordErased');
		} else if (returnValue.response === 1) {
			//cancel button pressed
			console.log('The memo is untouched, boy!!');
		}
	});
});

ipcMain.on('wordToMemo', function(event, wordToMemo) {
	Jpword=undefined
	entreeNumber=undefined
	storeSize = store.size;
	entreeNumber = storeSize + 1;
	console.log("entreeNumber", entreeNumber);
	Jpword = wordToMemo
	console.log("Jpword", Jpword);

	store.set(entreeNumber.toString(), Jpword);

	//console.log(store.store)
});

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## renderer.js
const { ipcRenderer } = require('electron');

//////////////////////////////////////////////////////////////
//ValuesIn

//////////////////////////////////////////////////////////////

function myScript() {
	inputVal = undefined;
	inputVal = document.getElementById('input1').value;

	if (inputVal == '') {
		ipcRenderer.send('Manip1a');
	} else {
		ipcRenderer.send('Manip1', inputVal);
	}
}

function showMemo() {
	console.log('We show the Memo');
	ipcRenderer.send('Manip2');
}

function eraseStore() {
	console.log('We erase the Memo');
	ipcRenderer.send('Manip3');
}

ipcRenderer.on('WordFromMain', function(event, result) {
	if (document.contains(document.getElementById('japanese'))) {
		var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
		elems.forEach((element) => element.remove());
	} else {
		//pass
	}

	for (var i = 0; i < result.length; i++) {
		str = result[i].japanese;
		var dom = document.createElement('div');
		dom.innerHTML = str;
		dom.id = 'japanese';

		let btn = document.createElement('button');
		btn.innerHTML = 'Memo';
		btn.id = 'petitbutton';
		btn.addEventListener('click', function() {
		wordToMemo = this.parentNode.textContent.replace('Memo', '');
		console.log("wordToMemo", wordToMemo);
		ipcRenderer.send('wordToMemo', wordToMemo);
		});

		dom.appendChild(btn);
		document.body.appendChild(dom);

		console.log(result[i].pronunciation);
		str = result[i].pronunciation;
		var dom = document.createElement('div');
		dom.innerHTML = str;
		dom.id = 'pronunciation';
		document.body.appendChild(dom);

		for (var ia = 0; ia < result[i].english.length; ia++) {
			str = result[i].english[ia];
			var dom = document.createElement('div');
			dom.innerHTML = ia + 1 + ') ' + str;
			dom.id = 'english';
			document.body.appendChild(dom);
		}
	}
	result = undefined;
});

ipcRenderer.on('WordFromStore', function(event, storeWords) {

	if (document.contains(document.getElementById('japanese'))) {
		var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
		elems.forEach((element) => element.remove());
	} else {
		//pass
	}

	for (let i in storeWords) {
		str = storeWords[i];
		var dom = document.createElement('div');
		dom.innerHTML = str;
		dom.id = 'japanese';
		let btn = document.createElement('button');
		btn.innerHTML = 'Search';
		btn.id = 'petitbutton';

		btn.addEventListener('click', function() {
			contenuParent = this.parentNode.textContent.replace('Search', '');
			console.log('We will search this word: ' + contenuParent + ' Yes, I know, it was in the memo section bro');
			ipcRenderer.send('Manip1', contenuParent);
		});

		dom.appendChild(btn);
		document.body.appendChild(dom);
	}
	storeWords= undefined
})

ipcRenderer.on('wordErased', function(event) {
	if (document.contains(document.getElementById('japanese'))) {
		var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
		elems.forEach((element) => element.remove());
	} else {
		//pass
	}
});

## styles.css

  button {
    margin-top: 20px;
    line-height: 60px;
    font-weight: bold;
    padding: 0 40px;
    background: salmon;
    border: none;
  }
  button:hover {
    background: lightsalmon;
  }

  #petitbutton {
    color: rgb(65, 18, 112);
    font-family: sans-serif;
    font-weight: bold;
    padding: .5rem;
    background-color: #ccc;
    border-radius: 12px;
    display: outside;
    margin: 1em;
    transition-duration: 0.4s;
    width: 100px;
    border:1px solid red;
    vertical-align: top;
    margin-left: 50px;
    }
  #petitbutton:hover {
    background-color: #b46ddd; /* Green */
    color: white;
    }


  #japanese{
    font-family: "Times New Roman", Times, serif;
    background: rgb(2, 7, 73);
    font-weight: bold;
    font-size: 60px;
    color: white;
    width:80%;
  }

  #pronunciation{
    border-style: solid;
    background: rgb(93, 64, 126);
    font-size: 20px;
    color: white;
    width:80%;

  }

 #english{
  font-family: "Times New Roman", Times, serif;
  background: rgb(242, 201, 255);
  font-size: 15px;
  font-weight: bold;
  width:80%;


 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Japanese Memo</title>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

	<link rel="stylesheet" href="styles.css">
	<script src="renderer.js"></script>

	</head>
	<body style="background: white;">
	<h1>
	Please enter the word(s) to Search
	</h1>

	<!-- input and button -->
	<input type="text" id="input1" placeholder="write here">
	<button type="button" id="btn1" onclick="myScript()">Search the word</button>
	<button type="button" id="btn2" onclick="showMemo()">Show the Memo</button>
	<button type="button" id="btn3" onclick="eraseStore()">Erase the Memo</button>

	<br>




	</body>
	</html>
	// Importing

	const { app, BrowserWindow, ipcMain, dialog } = require('electron');
	var Dictionary = require('japaneasy');
	const Store = require('electron-store');

	//Values

	const store = new Store();
	result = undefined;

	//////////////////////////////////

	function createWindow() {
	const win = new BrowserWindow({
	width: 1300,
	height: 400,
	webPreferences: {
	nodeIntegration: true,
	contextIsolation: false
	}
	});
	////////////////////////////////
	////////// Base functions
	win.loadFile('index.html');
	// win.webContents.openDevTools()
	}

	app.whenReady().then(() => {
	createWindow();
	});

	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
	app.quit();
	}
	});

	app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow();
	}
	});
	////////////////////////////////
	ipcMain.on('Manip1', function(event, wordToSearch) {
	console.log("wordToSearch", wordToSearch);

	var dict = new Dictionary();
	dict(wordToSearch)
	.then(function(result) {
	event.sender.send('WordFromMain', result);
	return result;
	})

	});

	ipcMain.on('Manip1a', function(event) {
	console.log('The word is undefined');
	dialog.showMessageBox({
	message: 'Please enter a word',
	type: 'warning',
	title: 'Word undefined'
	});
	});

	ipcMain.on('Manip2', function(event) {
	console.log(store.store)
	event.sender.send('WordFromStore', store.store);
	});

	ipcMain.on('Manip3', function(event) {
	//////////////Alert message to confirm Erase action
	//event.preventDefault();
	let options = {};
	options.type = 'warning';
	options.buttons = [ '&Yes', '&Cancel' ];
	options.defaultId = 1;
	options.title = 'Erase Memo';
	options.message = 'Do you really want to erase all words in the memo?';
	options.cancelId = 1;
	options.noLink = true;

	dialog.showMessageBox(options).then((returnValue) => {
	//console.log(returnValue);
	if (returnValue.response === 0) {
	//Yes button pressed
	store.clear();
	event.sender.send('wordErased');
	} else if (returnValue.response === 1) {
	//cancel button pressed
	console.log('The memo is untouched, boy!!');
	}
	});
	});

	ipcMain.on('wordToMemo', function(event, wordToMemo) {
	Jpword=undefined
	entreeNumber=undefined
	storeSize = store.size;
	entreeNumber = storeSize + 1;
	console.log("entreeNumber", entreeNumber);
	Jpword = wordToMemo
	console.log("Jpword", Jpword);

	store.set(entreeNumber.toString(), Jpword);

	//console.log(store.store)
	});
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})
	const { ipcRenderer } = require('electron');

	//////////////////////////////////////////////////////////////
	//ValuesIn

	//////////////////////////////////////////////////////////////

	function myScript() {
	inputVal = undefined;
	inputVal = document.getElementById('input1').value;

	if (inputVal == '') {
	ipcRenderer.send('Manip1a');
	} else {
	ipcRenderer.send('Manip1', inputVal);
	}
	}

	function showMemo() {
	console.log('We show the Memo');
	ipcRenderer.send('Manip2');
	}

	function eraseStore() {
	console.log('We erase the Memo');
	ipcRenderer.send('Manip3');
	}

	ipcRenderer.on('WordFromMain', function(event, result) {
	if (document.contains(document.getElementById('japanese'))) {
	var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
	elems.forEach((element) => element.remove());
	} else {
	//pass
	}

	for (var i = 0; i < result.length; i++) {
	str = result[i].japanese;
	var dom = document.createElement('div');
	dom.innerHTML = str;
	dom.id = 'japanese';

	let btn = document.createElement('button');
	btn.innerHTML = 'Memo';
	btn.id = 'petitbutton';
	btn.addEventListener('click', function() {
	wordToMemo = this.parentNode.textContent.replace('Memo', '');
	console.log("wordToMemo", wordToMemo);
	ipcRenderer.send('wordToMemo', wordToMemo);
	});

	dom.appendChild(btn);
	document.body.appendChild(dom);

	console.log(result[i].pronunciation);
	str = result[i].pronunciation;
	var dom = document.createElement('div');
	dom.innerHTML = str;
	dom.id = 'pronunciation';
	document.body.appendChild(dom);

	for (var ia = 0; ia < result[i].english.length; ia++) {
	str = result[i].english[ia];
	var dom = document.createElement('div');
	dom.innerHTML = ia + 1 + ') ' + str;
	dom.id = 'english';
	document.body.appendChild(dom);
	}
	}
	result = undefined;
	});

	ipcRenderer.on('WordFromStore', function(event, storeWords) {

	if (document.contains(document.getElementById('japanese'))) {
	var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
	elems.forEach((element) => element.remove());
	} else {
	//pass
	}

	for (let i in storeWords) {
	str = storeWords[i];
	var dom = document.createElement('div');
	dom.innerHTML = str;
	dom.id = 'japanese';
	let btn = document.createElement('button');
	btn.innerHTML = 'Search';
	btn.id = 'petitbutton';

	btn.addEventListener('click', function() {
	contenuParent = this.parentNode.textContent.replace('Search', '');
	console.log('We will search this word: ' + contenuParent + ' Yes, I know, it was in the memo section bro');
	ipcRenderer.send('Manip1', contenuParent);
	});

	dom.appendChild(btn);
	document.body.appendChild(dom);
	}
	storeWords= undefined
	})

	ipcRenderer.on('wordErased', function(event) {
	if (document.contains(document.getElementById('japanese'))) {
	var elems = document.querySelectorAll('#japanese, #pos, #pronunciation, #english, #petitbutton');
	elems.forEach((element) => element.remove());
	} else {
	//pass
	}
	});

	button {
	margin-top: 20px;
	line-height: 60px;
	font-weight: bold;
	padding: 0 40px;
	background: salmon;
	border: none;
	}
	button:hover {
	background: lightsalmon;
	}

	#petitbutton {
	color: rgb(65, 18, 112);
	font-family: sans-serif;
	font-weight: bold;
	padding: .5rem;
	background-color: #ccc;
	border-radius: 12px;
	display: outside;
	margin: 1em;
	transition-duration: 0.4s;
	width: 100px;
	border:1px solid red;
	vertical-align: top;
	margin-left: 50px;
	}
	#petitbutton:hover {
	background-color: #b46ddd; /* Green */
	color: white;
	}



	#japanese{
	font-family: "Times New Roman", Times, serif;
	background: rgb(2, 7, 73);
	font-weight: bold;
	font-size: 60px;
	color: white;
	width:80%;
	}

	#pronunciation{
	border-style: solid;
	background: rgb(93, 64, 126);
	font-size: 20px;
	color: white;
	width:80%;

	}

	#english{
	font-family: "Times New Roman", Times, serif;
	background: rgb(242, 201, 255);
	font-size: 15px;
	font-weight: bold;
	width:80%;


	}