methyl/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Keyword Comparison Tool</title>
  <link rel="stylesheet" href="style.css" />

  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.1.1/papaparse.min.js"></script>
</head>
<body>
  <div class="input">
    <div>Previous CSV
<textarea id="a"></textarea>
    </div>
    <div>Current CSV
<textarea id="b"></textarea>
    </div>
  </div>

  <div class="output">
    <div>
  <h2>New keywords</h2>
  <ol class="new"></ol>
    </div><div>
  <h2>Lost keywords</h2>
  <ol class="lost"></ol>
    </div></div>

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

## index.js

areas = document.querySelectorAll('textarea')


const handleChange = (e) => {
//   console.lo
//   document.querySelector('pre').innerHTML = e.currentTarget.value
  let {data: a} = Papa.parse(document.querySelector("#a").value, { delimiter: ';'})
  let {data: b} = Papa.parse(document.querySelector("#b").value, { delimiter: ';'})
  a = a.filter(words => words.join(",") != "Keyword,Found in,Repeats,Density,Prominence").map(([word, ...rest]) => word.trim()).filter(a => a.length)
  b = b.filter(words => words.join(",") != "Keyword,Found in,Repeats,Density,Prominence").map(([word, ...rest]) => word.trim()).filter(a => a.length)

  let newKws = b.filter(word => !a.includes(word))
  let lostKws = a.filter(word => !b.includes(word))
  document.querySelector('.new').innerHTML = newKws.map(kw => `<li>${kw}</li>`).join("\n")
  document.querySelector('.lost').innerHTML = lostKws.map(kw => `<li>${kw}</li>`).join("\n")
}

;[...areas].forEach(area => {
  area.addEventListener('change', handleChange)

})

## style.css
.input {
display: flex;
  text-align: center;
}

.input > div {
  margin: 16px;
  flex: 1;
}

textarea {
  width: 100%;
  height: 30vh;
}

.output {
display: flex;
  text-align: center;
}

.output > div {
  margin: 16px;
  flex: 1;
}

.output ol {
  text-align: left
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Keyword Comparison Tool</title>
	<link rel="stylesheet" href="style.css" />

	<script src="https://cdn.jsdelivr.net/npm/papaparse@5.1.1/papaparse.min.js"></script>
	</head>
	<body>
	<div class="input">
	<div>Previous CSV
	<textarea id="a"></textarea>
	</div>
	<div>Current CSV
	<textarea id="b"></textarea>
	</div>
	</div>

	<div class="output">
	<div>
	<h2>New keywords</h2>
	<ol class="new"></ol>
	</div><div>
	<h2>Lost keywords</h2>
	<ol class="lost"></ol>
	</div></div>

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

	areas = document.querySelectorAll('textarea')


	const handleChange = (e) => {
	// console.lo
	// document.querySelector('pre').innerHTML = e.currentTarget.value
	let {data: a} = Papa.parse(document.querySelector("#a").value, { delimiter: ';'})
	let {data: b} = Papa.parse(document.querySelector("#b").value, { delimiter: ';'})
	a = a.filter(words => words.join(",") != "Keyword,Found in,Repeats,Density,Prominence").map(([word, ...rest]) => word.trim()).filter(a => a.length)
	b = b.filter(words => words.join(",") != "Keyword,Found in,Repeats,Density,Prominence").map(([word, ...rest]) => word.trim()).filter(a => a.length)

	let newKws = b.filter(word => !a.includes(word))
	let lostKws = a.filter(word => !b.includes(word))
	document.querySelector('.new').innerHTML = newKws.map(kw => `<li>${kw}</li>`).join("\n")
	document.querySelector('.lost').innerHTML = lostKws.map(kw => `<li>${kw}</li>`).join("\n")
	}

	;[...areas].forEach(area => {
	area.addEventListener('change', handleChange)

	})
	.input {
	display: flex;
	text-align: center;
	}

	.input > div {
	margin: 16px;
	flex: 1;
	}

	textarea {
	width: 100%;
	height: 30vh;
	}

	.output {
	display: flex;
	text-align: center;
	}

	.output > div {
	margin: 16px;
	flex: 1;
	}

	.output ol {
	text-align: left
	}