first commit

main.js

@@ -0,0 +1,59 @@
+/*
+  DI311 Homework 0   
+  Author: Your name (KAIST ID)
+*/
+
+/**
+ *
+ * @param {number} start - a single integer representing the start time
+ * @param {number} end - a single integer representing the end time
+ * @returns a string in the format HH:MM:SS which will be displayed
+ */
+function computeDifference(start, end) {
+  // TODO: fill up the content on this function
+  console.log(start, end); // PLACEHOLDER CODE - see your input in the console
+  return 'HH:MM:SS'; // PLACEHOLDER CODE - returns a string
+}
+
+// DO NOT CHANGE THE CODE BELOW THIS LINE
+
+// Call this function to show the error message (if visible is true)
+function showError(visible) {
+  if (visible) document.querySelector('#message').removeAttribute('hidden');
+  else document.querySelector('#message').setAttribute('hidden', '');
+}
+
+function setResult(res) {
+  document.querySelector('#result').innerHTML = res;
+}
+
+function validate(hhmmss) {
+  const regex = /^[0-2][0-9][0-5][0-9][0-5][0-9]$/;
+  if (hhmmss.match(regex) === null) throw new Error('Invalid input');
+  return parseInt(hhmmss);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('input[type="text"]').forEach((elem) => {
+    elem.addEventListener('input', function () {
+      let startTime = document.querySelector('#startTime').value;
+      let endTime = document.querySelector('#endTime').value;
+
+      try {
+        startTime = validate(startTime);
+        endTime = validate(endTime);
+        showError(false);
+      } catch (e) {
+        startTime = 0;
+        endTime = 0;
+        showError(true);
+      }
+
+      const diff = computeDifference(startTime, endTime);
+      if (diff) setResult(diff);
+      else showError(true);
+    });
+  });
+});
+
+export { computeDifference };