Implement error message

static/js/user.js

@@ -7,7 +7,11 @@ const api_path = `../../api/token${token}/`;
 const greeting = document.getElementById("greeting"),
     currentcoins = document.getElementById("currentcoins"),
     maxcoins = document.getElementById("maxcoins"),
-    sellvalue = document.getElementById("sellvalue");
+    sellvalue = document.getElementById("sellvalue"),
+
+    errormesssage = document.getElementById("errormessage"),
+    errortext = document.getElementById("errortext"),
+    errorclose = document.getElementById("errorclose");
 
 async function redraw() {
 
@@ -27,7 +31,7 @@ async function redraw() {
     currentcoins.innerText = user.score;
     maxcoins.innerText = user.maxscore;
     sellvalue.max = user.maxscore - user.score;
-
+    sellvalue.value = Math.min(sellvalue.value, sellvalue.max);
 }
 
 redraw();
@@ -36,7 +40,6 @@ const button = document.getElementById("sell");
 
 button.addEventListener("click", async () => {
     const newscore = parseInt(currentcoins.innerText) + parseInt(sellvalue.value);
-    console.log(newscore);
 
     const r = await fetch(api_path + 'set_score', {
         method: "POST",
@@ -46,9 +49,25 @@ button.addEventListener("click", async () => {
     });
 
     if (r.status !== 200) {
-        console.log("something went wrong");
+        
+        if (r.status !== 400) {
+            console.log("Something went very very wrong!");
+            return;
+        }
+
+        const data = await r.json();
+
+        if (data.error) {
+            errortext.innerText = data.error;
+            errormesssage.style.display = "flex";
+        }
+
         return;
     }
 
     redraw();
 })
+
+errorclose.addEventListener("click", () => {
+    errormesssage.style.display = "none";
+})

user.html

@@ -17,15 +17,37 @@
         }
 
         #thetable {
-        margin-bottom : 2rem;
+            margin-bottom: 2rem;
         }
-    .biceps {
+
+        .flex {
             display: flex;
+        }
+
+        .biceps {
             justify-content: space-around;
         }
+
         input {
             width: 8rem;
         }
+
+        #errormessage {
+            display: none;
+            /* flex if visible */
+            justify-content: space-between;
+            width: 100%;
+            border-left: 3px solid red;
+            padding-left: 1rem;
+            background: #460000;
+            color: red;
+        }
+
+        #errorclose {
+            margin-right: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+        }
     </style>
 
 </head>
@@ -49,13 +71,18 @@
         </tbody>
     </table>
 
-    <div class="biceps">
+    <div class="flex biceps">
         <div>
-            <input type="number" id="sellvalue" value = "1" >
+            <input type="number" id="sellvalue" value="1" min="0">
             <button id="sell">Sell</button>
         </div>
     </div>
 
+    <div id="errormessage">
+        <span id="errortext"></span>
+        <span id="errorclose">&times;</span>
+    </div>
+
     <script src="../../static/js/user.js"></script>
 </body>