Init www

2021-06-02 21:57:01 -04:00
commit c610113083
15 changed files with 1051 additions and 0 deletions
--- a/pages/grade-calc/index.html
+++ b/pages/grade-calc/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta name="Grade Calculator" content="School grade calculation">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grade Calc</title>
+</head>
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        padding: 0;
+        margin: 0;
+        font-family: sans-serif;
+    }
+
+    .about-container {
+        padding: 1rem;
+    }
+
+    .json-textarea,
+    .calculator-container {
+        width: 50%;
+        padding: 1rem;
+        float: left;
+    }
+
+    .json-textarea textarea {
+        max-width: 100%;
+        min-width: 100%;
+        width: 100%;
+    }
+
+    .button-container button {
+        border: 1px solid black;
+        border-radius: 0;
+        font-size: 1em;
+        text-align: center;
+        margin: .5rem 0;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        background-color: #90c541;
+        color: #FFF;
+        cursor: pointer;
+    }
+
+    @media screen and (max-width: 900px) {
+
+        .json-textarea,
+        .calculator-container {
+            width: 100%;
+        }
+    }
+</style>
+
+<body>
+    <div class="about-container">
+        <h1><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1>
+        <hr>
+        <h2>About</h2>
+        Check out the <a href="https://github.com/lambdapaul/pages/blob/master/grade-calc/README.md">README.md</a> file
+        to learn more about the configuration structure.
+        <h3>Usage</h3>
+        <ol>
+            <li>Either configure the calculator using the text box below or load one from the existing JSON files to
+                generate one.</li>
+            <li>Click <code>Generate</code>.</li>
+            <li>Enter the input values.</li>
+        </ol>
+    </div>
+    <div class="json-textarea">
+        <h2>Configuration</h2>
+        <h3>Load config from file</h3>
+        <ul>
+            <li><a href="javascript:void(0)" onclick="loadConfig('./config/map2302.json')">MAP2302 - ODE I Fall 2019</a>
+            </li>
+            <li><a href="javascript:void(0)" onclick="loadConfig('./config/eee3307c.json')">EEE3307C - Electronics I
+                    Spring 2021</a></li>
+        </ul>
+        <div class="button-container">
+            <button onclick="generate()">Generate &#8594;</button>
+        </div>
+        <textarea id="json" id="" rows="30"></textarea>
+
+    </div>
+    <div class="calculator-container">
+    </div>
+    <script type="text/javascript" src="gc_client.js"></script>
+    <script>
+        function generate() {
+            var let;
+            let calcSection = document.querySelector(".calculator-container");
+            calcSection.innerHTML = "";
+            try {
+                conf = JSON.parse(document.getElementById("json").value);
+            }
+            catch (e) {
+                console.log(e);
+                calcSection.innerHTML = e;
+                return;
+            }
+            let cb = (out) => {
+                for (let o of out) {
+                    calcSection.appendChild(o);
+                }
+            }
+            gc = new GradeCalc(conf, cb);
+
+            calcSection.appendChild(gc.elemTotal);
+        }
+
+        function loadConfig(filename) {
+            var client = new XMLHttpRequest();
+            client.open('GET', filename);
+            client.onreadystatechange = function () {
+                document.getElementById("json").value = (client.responseText);
+            }
+            client.send();
+        }
+    </script>
+</body>
+
+</html>