made a lot more squares, removed the spaces between them, made save/ endpoint work.

models.py

@@ -14,5 +14,8 @@ class Board(Base):
     __tablename__ = 'boards'
 
     id = Column(Integer, primary_key=True)
-    layout = Column(String(100), nullable=False)
+    layout = Column(String(528), nullable=False)
     name = Column(String(50), nullable=False)
+
+    def __repr__(self):
+        return f'<Layout> name: {self.name} {self.layout}'

routes.py

@@ -1,5 +1,10 @@
+import random
+from string import ascii_lowercase
+
 from flask import Flask, render_template, request, jsonify
 
+from models import Board, session
+
 app = Flask(__name__)
 
 
@@ -8,11 +13,22 @@ def main():
     color_label_dict = {'red':'exercise',
                         'blue':'work',
                         'yellow':'admin',
-                        'green':'finance'}
+                        'green':'finance',
+                        '#2C2416':'',
+                        'black':'',
+                        '#F98D8D':'',
+                        'orange':'',
+                        'white': '',
+                        '#1a1b29': '',
+                        '#000080': '',
+                        '#333333':'',
+                        '#CF5300': '',
+                        '#8B0000': '',
+                       }
 
     colors = list(color_label_dict.keys())
     color_num_dict = {'': 0}
-    color_num_dict = {color: idx + 1 for idx, color in enumerate(colors)}
+    color_num_dict = {color: str(idx + 1).zfill(2) for idx, color in enumerate(colors)}
 
     return render_template('100_blocks.html',
                            colors=colors,
@@ -20,10 +36,15 @@ def main():
                            color_num_dict=color_num_dict)
 
 
-@app.route('/save/', methods=['POST'])
+@app.route('/save', methods=['POST'])
 def save():
-    print(vars(request.form))
-    return jsonify(vars(request.form))
+    name = ''
+    for i in range(12):
+        name += random.choice(ascii_lowercase)
+    layout = list(request.get_json().values())[0]
+    session.add(Board(layout=layout, name=name))
+    session.commit()
+    return jsonify(session.query(Board).first().layout)
 
 
 

static/css/100_blocks.css

@@ -6,28 +6,26 @@
 
 #gridcontainer
 {
-    width: 800px;
+    width: 1700px;
     line-height: 0;
     clear: both;
 }
 
-.griditem, .palette
+.griditem
 {
     display: inline-block;            
     width: 70px;
     height: 70px;
-    margin-left: 2px;
-    margin-bottom: 6px;
+    margin-left: -4px;
     background: #AAA;
-    border: 1px solid black;
 }
 
 .palette {
 
-    border-radius: 50%;
-    margin-left: 20px;
+    display: inline-block;            
     margin-top: 30px;
-    border: 2px solid black;
+    width: 70px;
+    height: 70px;
 
 }
 
@@ -37,7 +35,6 @@
     height: 90px;
     float: right;
     margin: 20px 60px 30px;
-    border: 2px solid black;
 
 }
 

templates/100_blocks.html

@@ -41,18 +41,16 @@ function save() {
       layout += num
     } 
 
-    var data = new FormData();
-    data.append("json", JSON.stringify(layout));
-    console.log(data)
-
-    fetch("/save/", {
+    console.log(layout);
+    fetch("/save", {
 
         headers: {'Accept': 'application/json',
                   'Content-Type': 'application/json'},
         method: "POST", 
-        body: data});
+        body: JSON.stringify({layout: layout})
 
 
+})
 }
 
 
@@ -66,7 +64,7 @@ window.onload = function () {
   gridContainer = document.getElementById('gridcontainer');
   palettesDiv = document.getElementById('palettes');
 
-  for (i=0; i<100; i++) {
+  for (i=0; i<264; i++) {
   
     box = document.createElement('div');
     box.className = 'griditem';