Template for assignments in js

2022-12-04 18:24:26 +01:00
parent 78059acc02
commit b754056efd
3 changed files with 65 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <p>Assignment:</p>
+    <textarea rows="15" cols="50" id="assignment"></textarea>
+
+    <p>Answer:</p>
+    <div id="answer">Provide input first</div>
+    <script src="script.js"></script>
+  </body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,34 @@
+const ASSIGNMENT = 'assignment';
+const ANSWER = 'answer';
+const NEWLINE_CHARACTER = '\n';
+const TOP_N = 3;
+
+/**
+ * Main function
+ */
+window.onload = function() {
+    document.getElementById(ASSIGNMENT).addEventListener("input", calculateAnswer);
+}
+
+/**
+ * Listener function for input in assignment field.
+ * @param event the onInput event 
+ */
+function calculateAnswer(event) {
+  console.info("Calculating answer for input...");
+  let answer = algorithm(event.target.value, TOP_N);
+
+  document.getElementById(ANSWER).innerText = answer;
+}
+
+/**
+ * Calculate the answer to assignment.
+ * @param assignment the input from the assignment.
+ * @return string the answer
+ */
+function algorithm(assignment) {
+    let lines = assignment.trim().split(NEWLINE_CHARACTER);
+    console.info("Linecount:" + lines.length);
+
+    // TODO: implement assignment
+}
--- a/style.css
+++ b/style.css
@@ -0,0 +1,15 @@
+body {
+    background: transparent; /* Make it white if you need */
+    color: #fc8224;
+    padding: 0 24px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+  
+  #answer {
+    color: purple
+  }
+  
+  p {
+    margin: 0px
+  }