Some style, fixed JS

2021-11-27 13:25:20 +01:00
parent 7a8ae86a1c
commit 139e11b5fc
3 changed files with 51 additions and 3 deletions
--- a/static/index.js
+++ b/static/index.js
@@ -16,4 +16,23 @@ r(() => {
        const resultat = await response.text();
        g('response').innerHTML = resultat;
    });
+
+  const afegirPart = (t) => {
+    const frase = g('frase');
+    let conector = ' de ';
+
+    if (frase.value === '') {
+      conector = 'la ';
+    }
+
+    g('frase').value = g('frase').value + conector + t;
+  }
+
+  g('absencia').addEventListener('click', () => {
+    afegirPart('absencia')
+  });
+
+  g('presencia').addEventListener('click', () => {
+    afegirPart('presencia')
+  });
 })
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,23 @@
+button {
+    padding: 30px;
+    font-size: 14px;
+}
+
+#frase {
+    width: 800px;
+    height: 300px;
+    text-align: center;
+
+    font-size: 17px;
+}
+
+#container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#buttons {
+    padding: 50px;
+}
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,11 +2,17 @@
  <head>
    <title>Absencia de Presencia</title>
    <script src="/static/index.js"></script>
+    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
-    <div>
-      <input type="text" id="frase"/>
-      <input type="button" id="submit"/>
+    <div id="container">
+      <textarea id="frase"></textarea>
+
+      <div id="buttons">
+        <button id="absencia">Absencia</button>
+        <button id="presencia">Presencia</button>
+        <button id="submit">Calcula</button>
+      </div>
    </div>

    <p id="response"></p>