First commit - WIP WIP

public/javascripts/script.js

@@ -0,0 +1,70 @@
+document.addEventListener('DOMContentLoaded', async function () {
+    const  DateTime = luxon.DateTime;
+    const filename = 'data/data.json'
+    let curdate = ''
+
+    const dt = DateTime.now()
+    const dt1 = dt.plus({month:1})
+    curdate = `${dt.toFormat('LLLL')}/${dt1.toFormat('LLLL y')}`
+    document.querySelector('#curmon').innerHTML = curdate
+
+    let ret = await getData(filename)
+    fillSchema(ret.data)
+
+    document.querySelector('#sptab').addEventListener('click',  markField);	  
+
+    function markField (e) { 
+        let field = e.target;
+        field.setAttribute('aria-label','x'); 
+        field.setAttribute('disabled','disabled');
+        let lastDate = parseInt(field.innerHTML)
+        let month = curdate.split('/')[0]
+        let data = {curdate: curdate.slice(0, -5), last: lastDate}
+        let setArray = []
+        let fields = document.querySelectorAll('#sptab button')
+        for (i = 0; i < fields.length; i++) {
+            setArray[i] = 0
+            if (fields[i].hasAttribute('disabled')) {
+                setArray[i] = 1
+            }
+        }
+        data.data = setArray
+        storeData(data)
+    }
+
+    function fillSchema(data) {
+        const setArray = data.data
+        let lastday = DateTime.now().endOf('month').day
+        let first = lastday === data.last ? 1 : data.last+1
+        for(let i = 1, k = first; i <= 35; i++, k++) {
+            if(k > lastday) {
+                k = 1
+            }
+            if (i === 18) {
+                i++
+            }
+            let sel = '#bt'+i
+            document.querySelector(sel).innerHTML = k
+            if(setArray[i-1] === 1) {
+                document.querySelector(sel).setAttribute('aria-label', 'x')
+            }
+        }
+    }
+
+    async function getData() {
+        let erg = await fetch('data')
+        return erg.json()
+    }
+
+    async function storeData(data) {
+        const response = await fetch('/data', {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type':"application/json"
+            }
+        })
+        return response.json()
+    }
+
+});

public/stylesheets/style.css

@@ -0,0 +1,43 @@
+body {
+  padding: 30px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}
+
+.spritztab #sptab {
+  width: 70vmin;
+  height: 50vmin;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  margin: 30px auto;
+}
+
+.spritztab h1 {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.spritztab h2 {
+  text-align: center;
+}
+
+.spritztab button {
+  width: 10vmin;
+  height: 10vmin;
+  background: white;
+  border: 1px solid black;
+  margin: 0;
+  font-size: 200%;
+}
+
+.spritztab [aria-label="o"] {
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.4%22%20fill%3D%22none%22%20stroke-width%3D%220.1%22%20stroke%3D%22blue%22%2F%3E%3C%2Fsvg%3E');
+}
+
+.spritztab [aria-label="x"] {
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.1%22%20x2%3D%220.9%22%20y2%3D%220.9%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.9%22%20x2%3D%220.9%22%20y2%3D%220.1%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E');
+}