heerdyes/frontend.html

## frontend.html
<html>
<head>
  <title>frontend</title>
  <style>
    table {
      border-collapse: collapse;
    }
    tr, td {
      border: 1px solid darkgreen;
    }
    section {
      margin: 10px;
      border: 1px solid gray;
    }
    div {
      margin: 5px;
    }
  </style>
</head>
<body>

<section>
  <div>
    <em>add course -> </em>
    <input id="i_ccode" placeholder="course code">
    <input id="i_cname" placeholder="course name">
    <button onclick="addcourse();">add</button>
  </div>
</section>
<section>
  <div>
    <table id="coursetbl"></table>
  </div>
</section>

<script>
function tblpopu(data) {
  let trs = document.querySelector('#coursetbl');
  trs.innerHTML = '';
  let i = 0;
  for (let o of data) {
    let c1 = `<td>${o.ccode}</td>`;
    let c2 = `<td>${o.cname}</td>`;
    let c3 = `<td><button onclick="rmcourse(${i});">X</button></td>`;
    trs.innerHTML += `<tr> ${c1} ${c2} ${c3} </tr>`;
    i++;
  }
}

function rmcourse(j) {
  fetch(`/rmcourse/${j}`)
    .then(r => r.json())
    .then(afterpostingcourse);
}

function getcourses() {
  fetch('/courses')
    .then(r => r.json())
    .then(tblpopu);
}

function afterpostingcourse(data) {
  if (data.status === "OK") {
    console.log('reloading table');
    getcourses();
  } else {
    console.log('something is not right!');
  }
}

function postcourse(c) {
  console.log('posting course:', c);
  fetch('/courses', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(c)
  })
    .then(r => r.json())
    .then(afterpostingcourse);
}

function addcourse() {
  let cc = document.querySelector('#i_ccode').value;
  let cn = document.querySelector('#i_cname').value;
  let c = {
    ccode: cc,
    cname: cn
  };
  postcourse(c);
}

// load table in the beginning
getcourses();
</script>
</body>
</html>
	<html>
	<head>
	<title>frontend</title>
	<style>
	table {
	border-collapse: collapse;
	}
	tr, td {
	border: 1px solid darkgreen;
	}
	section {
	margin: 10px;
	border: 1px solid gray;
	}
	div {
	margin: 5px;
	}
	</style>
	</head>
	<body>

	<section>
	<div>
	<em>add course -> </em>
	<input id="i_ccode" placeholder="course code">
	<input id="i_cname" placeholder="course name">
	<button onclick="addcourse();">add</button>
	</div>
	</section>
	<section>
	<div>
	<table id="coursetbl"></table>
	</div>
	</section>

	<script>
	function tblpopu(data) {
	let trs = document.querySelector('#coursetbl');
	trs.innerHTML = '';
	let i = 0;
	for (let o of data) {
	let c1 = `<td>${o.ccode}</td>`;
	let c2 = `<td>${o.cname}</td>`;
	let c3 = `<td><button onclick="rmcourse(${i});">X</button></td>`;
	trs.innerHTML += `<tr> ${c1} ${c2} ${c3} </tr>`;
	i++;
	}
	}

	function rmcourse(j) {
	fetch(`/rmcourse/${j}`)
	.then(r => r.json())
	.then(afterpostingcourse);
	}

	function getcourses() {
	fetch('/courses')
	.then(r => r.json())
	.then(tblpopu);
	}

	function afterpostingcourse(data) {
	if (data.status === "OK") {
	console.log('reloading table');
	getcourses();
	} else {
	console.log('something is not right!');
	}
	}

	function postcourse(c) {
	console.log('posting course:', c);
	fetch('/courses', {
	method: 'POST',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(c)
	})
	.then(r => r.json())
	.then(afterpostingcourse);
	}

	function addcourse() {
	let cc = document.querySelector('#i_ccode').value;
	let cn = document.querySelector('#i_cname').value;
	let c = {
	ccode: cc,
	cname: cn
	};
	postcourse(c);
	}

	// load table in the beginning
	getcourses();
	</script>
	</body>
	</html>