init

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+{
+	"name": "ID311",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+	"customizations": {
+		"vscode": {
+			"settings": {
+				"workbench.colorTheme": "Visual Studio Light",
+				"workbench.iconTheme": "material-icon-theme",
+				"editor.defaultFormatter": "esbenp.prettier-vscode",
+				"editor.snippetSuggestions": "top",
+				"editor.suggestSelection": "first",
+				"editor.formatOnSave": true,
+				"prettier.singleQuote": true,
+			},
+			"extensions": [
+				"esbenp.prettier-vscode",
+				"PKief.material-icon-theme",
+				"yzhang.markdown-all-in-one",
+				"ritwickdey.LiveServer",
+				"mhutchie.git-graph",
+				"pranaygp.vscode-css-peek",
+				"naumovs.color-highlight",
+				"mechatroner.rainbow-csv",
+				"svelte.svelte-vscode"
+			]
+		},
+	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "sudo apt update",
+	// Configure tool-specific properties.
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	"remoteUser": "vscode"
+}

.gitignore

@@ -0,0 +1,6 @@
+.git
+.prettierrc
+node_modules
+.DS_Store
+.vscode
+test

README.md

@@ -0,0 +1,61 @@
+# Homework 0 - Software Prototyping ID311
+
+- Use this homework to test yourself before taking the course.
+- **Deadline: March 5th, 2023 at 11:59 pm**
+- _[Live demo](http://hwdemo.prototyping.id/hw0)_
+
+## General Description
+
+<p align="center">
+<img src="assets/main.png" width="600" />
+</p>
+
+In this assignment, you need to implement a function that computes the time difference between two integer numbers input by the user, representing time expressed in the military format HHMMSS. `HH` stands for hours (00 to 23), `MM` for minutes (00-59), and `SS` for seconds (00-59). The function validates the input (i.e., it checks whether hours, minutes, and seconds are correct), computes the difference between the two numbers, and returns a string formatted as "HH:MM:SS" with the resulting time difference to be displayed in the graphical interface.
+
+Here is the function signature that you have to complete:
+
+```js
+function computeDifference(start, end) {
+  // TODO: fill up the content on this function
+  return 'HH:MM:SS'; // PLACEHOLDER
+}
+```
+
+- The function parameters `start` and `end` are the two input times. So, for example, `123456` would mean hours are 12, minutes are 34, and seconds are 56.
+- The maximum difference between the two times is `23:59:59`.
+- `end` can be smaller than `start`: in such case, it means that you need to compute the time difference from the previous day at the time `start` to the next day at the time `end`.
+- If the user input is invalid (for example, minutes greater than 59), you should return `undefined`.
+- The time difference to return as a string should be formatted with the `:` between hours and minutes and minutes and seconds. For example, `10:01:20` means that there is a difference of 10 hours, 1 minute, and 20 seconds.
+- Feel free to modify the code as you please (e.g., creating new functions, global variables, or anything you want to).
+
+## How to get started
+
+- Clone or download this repository on your computer.
+- Open the repository folder with VSCode
+- Start coding in `main.js`, which is the only file you need to modify
+- To see the result, use the `LiveServer` extension
+
+## About grading
+
+The maximum score for this assignment is 100 points. If the program does not compile (e.g., not a valid javascript file), the score is 0. If it runs, the score is inversely proportional to the number of errors. If the code has runtime errors, there is a 20 points penalty, plus a penalty for any additional part that cannot be checked.
+
+You will receive a score for this assignment, **however** this **DOES NOT COUNT** toward your final score. It is a score only for yourself to help you decide whether to take this class or not.
+
+## How to submit
+
+<p align="center">
+<img src="assets/submission.png" width="600" />
+</p>
+
+1. After completing your code, make sure to fill up the [SubmissionNotes](SubmissionNotes.md) with your basic info and indicate whether you received any help. Feel free to add any relevant information.
+2. Zip the folder of this repository containing your solution.
+3. Submit the homework using the class [submission system](https://homework.prototyping.id).
+4. For any problem, feel free to contact the professor or TA via Discord. No emails, please.
+
+**NOTES**
+
+- Only submissions made with the system will be considered (e.g., no direct emails to TA or Prof).
+- You can re-submit as many times as you want: the last submission only will be considered.
+- Submissions after the deadline (even a few minutes) will receive a penalty of 10%. After 24 hours from the deadline, you will receive 0 points.
+- Keep a screenshot that proves your completed submission.
+- Coding style might be considered in grading.

SubmissionNotes.md

@@ -0,0 +1,17 @@
+# Homework submission form
+
+1. **Your name**: NAME
+
+2. **KAIST ID**: 0000000
+
+3. **Email**: YOUR_EMAIL@kaist.ac.kr
+
+---
+
+## Description
+
+Feel free to use this space to add any relevant information. You can add, for example:
+
+- Links to images/Video/Additional material\*\*: [example](http://...)
+- List the people/resources you received help from: ...
+- Anything else you want to say about how to use your softare, issues, or limitations of your work

index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
+
+    <link href="style.css" rel="stylesheet" />
+
+    <title>Homework 0</title>
+  </head>
+  <body>
+    <div class="container col-md-5">
+      <form>
+        <div class="container result mb-5">
+          <div class="text-primary fs-1">Time difference</div>
+        </div>
+
+        <div class="row g-3 mb-3">
+          <div class="col">
+            <label>Start time</label>
+            <input
+              type="text"
+              class="form-control"
+              placeholder="HHMMSS"
+              aria-label="Start time"
+              id="startTime"
+            />
+          </div>
+          <div class="col">
+            <label>End time</label>
+            <input
+              type="text"
+              class="form-control"
+              placeholder="HHMMSS"
+              aria-label="End time"
+              id="endTime"
+            />
+          </div>
+        </div>
+      </form>
+
+      <!-- <div class="container result">
+        <button type="button" class="btn btn-primary mb-3">Calculate</button>
+      </div> -->
+
+      <div id="message" class="text-danger fs-8" hidden>
+        Badly formatted or incomplete input
+      </div>
+
+      <div class="container result mt-5">
+        <div id="result" class="badge bg-primary fs-2 text-wrap">00:00:00</div>
+      </div>
+    </div>
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
+      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
+      crossorigin="anonymous"
+    ></script>
+
+    <script type="module" src="main.js"></script>
+  </body>
+</html>

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 };

style.css

@@ -0,0 +1,29 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.result {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+}