initial commit

public/index.js

@@ -0,0 +1,35 @@
+const translateHandler = async () => {
+
+    const textArea = document.getElementById("text-input");
+    const localeArea = document.getElementById("locale-select");
+    const errorArea = document.getElementById("error-msg");
+    const translatedArea = document.getElementById("translated-sentence");
+
+    const stuff = { "text": textArea.value, "locale": localeArea.value };
+
+    errorArea.innerText = "";
+    translatedArea.innerText = "";
+
+    const data = await fetch("/api/translate", {
+
+        method: "POST",
+        headers: {
+            "Accept": "application/json",
+            "Content-type": "application/json"
+        },
+        body: JSON.stringify(stuff)
+
+    });
+
+    const parsed = await data.json();
+
+    if (parsed.error) {
+
+        return errorArea.innerText = JSON.stringify(parsed);
+    }
+
+    return translatedArea.innerHTML = parsed.translation;
+
+};
+
+document.getElementById("translate-btn").addEventListener("click", translateHandler)

public/style.css

@@ -0,0 +1,81 @@
+code {
+    background: #d0d0d5;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-container {
+    max-width: 95%;
+}
+
+textarea {
+    width: 100%;
+}
+
+#user-stories {
+    font-size: 1.2em;
+}
+
+#output-container,
+#solution-container,
+#text-input,
+#locale-select,
+input[type="button"] {
+    font-size: 1.1em;
+}
+
+#output-container {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+}
+
+#solution-container {
+    font-weight: bold;
+}
+
+#solution-container {
+    margin-left: 20px;
+}
+
+#translated-sentence {
+    margin-top: 10px;
+    font-weight: normal;
+}
+
+#error-msg {
+    font-weight: normal;
+    color: red;
+}
+
+.highlight {
+    color: green;
+}
+
+#text-input {
+    padding: 10px;
+}
+
+@media (min-width: 800px) {
+    .container {
+        flex-direction: row;
+    }
+
+    .form-container {
+        align-self: flex-end;
+    }
+
+    #output-container {
+        flex-direction: row;
+        margin-top: 0;
+        margin-left: 20px;
+    }
+
+    #solution-container {
+        width: 75%;
+        margin-top: 0;
+    }
+}