Quick start for Ex10 but now that I think about it, maybe it's not the best exercise for 10 and this should be a login exercise.

10-a-simple-json-api/README.md

@@ -0,0 +1,19 @@
+# 10: A Simple JSON API
+
+You'll need to download curl for windows from [curl.se](https://curl.se/windows/) if you're on
+windows.  The only problem is PowerShell comes with a fairly lame `curl` that's an alias for
+`Invoke-WebRequest`. You can just type `curl.exe` and that'll use the real curl.  You can also or run this command:
+
+```powershell
+remove-item alias:curl
+```
+
+After that you should be able to run `curl` like normal with just:
+
+```powershell
+curl
+curl: try 'curl --help' or 'curl --manual' for more information
+```
+
+The only problem is you'll have to do this every time you start PowerShell.  Making this permanent
+is...complicated. Just type `curl.exe` instead.

10-a-simple-json-api/api.js

@@ -0,0 +1,23 @@
+import express from 'express';
+import http from 'http';
+import assert from 'assert';
+
+const opts = {
+  port: 5001,
+  host: "localhost",
+}
+
+const app = express();
+
+const http_server = http.createServer(app);
+
+app.use(express.json());
+app.use(express.static('public'));
+
+app.get("/messages.json", (req, res) => {
+  res.status(200).json({message: "HELLO!"});
+});
+
+http_server.listen(opts.port, opts.host, () => {
+  console.log(`listening on ${opts.host}:${opts.port}`);
+});

10-a-simple-json-api/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "10-a-simple-json-api",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "main": "step1.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "BSD",
+  "dependencies": {
+    "express": "^4.18.1",
+    "http-server": "^14.1.1"
+  }
+}

10-a-simple-json-api/public/blockstart.css

@@ -0,0 +1,200 @@
+:root {
+  --color-border: hsl(0, 0%, 50%);
+  --border-radius: 5px;
+  --value0: hsl(0, 0%, 0%);
+  --value1: hsl(0, 0%, 11%);
+  --value2: hsl(0, 0%, 22%);
+  --value3: hsl(0, 0%, 33%);
+  --value4: hsl(0, 0%, 44%);
+  --value5: hsl(0, 0%, 55%);
+  --value6: hsl(0, 0%, 66%);
+  --value7: hsl(0, 0%, 77%);
+  --value8: hsl(0, 0%, 88%);
+  --value9: hsl(0, 0%, 100%);
+  --text: 0;
+}
+
+body {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 0px;
+  margin: 0px;
+}
+
+content {
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+}
+
+block {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  display: flex;
+  --spacing: space-evenly;
+  justify-content: var(--spacing);
+  flex-direction: column;
+}
+
+block > * {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  display: flex;
+  flex: 1 1 auto;
+  --spacing: flex-start;
+  justify-content: var(--spacing);
+  align-self: stretch;
+  flex-direction: column;
+  margin: 2px;
+}
+
+.wide {
+  width: 100%;
+}
+
+.no-flex {
+  display: block;
+  flex: unset;
+  flex-direction: unset;
+  align-self: unset;
+}
+
+.center {
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+}
+
+.center-text > * {
+  text-align: center;
+}
+
+.center-self {
+  align-self: center;
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+grid {
+  --cols: 1fr 1fr;
+  --rows: auto;
+  --gap: 0.5rem;
+
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  display: grid;
+  grid-gap: var(--gap);
+  grid-template-columns: var(--cols);
+  grid-template-rows: var(--rows);
+}
+
+stack {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "cover";
+}
+
+stack > * {
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  width: 100%;
+  height: 100%;
+  position: relative;
+  grid-area: cover;
+}
+
+stack > .top {
+  z-index: 10;
+}
+
+hr {
+  --height: 1rem;
+  min-height: var(--height);
+  visibility: hidden;
+}
+
+hr.huge {
+  --height: 3rem;
+}
+
+shape {
+  --w: 100%;
+  --h: 100%;
+  --value: 4;
+
+  color: hsl(0, 0%, calc(var(--text) * 11%));
+  background-color: hsl(0, 0%, calc(var(--value) * 11%));
+  display: flex;
+  width: var(--w);
+  min-width: var(--w);
+  max-width: var(--w);
+  height: var(--h);
+  min-height: var(--h);
+  max-height: var(--h);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+}
+
+.debug {
+  border: 1px solid red;
+}
+
+.debug > * {
+  border: 1px solid blue;
+}
+
+.pad {
+  --pad: 1rem;
+  padding: var(--pad);
+}
+
+.sized {
+  --w: 100%;
+  --h: 100%;
+  width: var(--w);
+  min-width: var(--w);
+  max-width: var(--w);
+  height: var(--h);
+  min-height: var(--h);
+  max-height: var(--h);
+}
+
+.border {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+
+.solid {
+  --value: 8;
+  background-color: hsl(0, 0%, calc(var(--value) * 11%));
+}
+
+.dots {
+  --pat-val: 7;
+
+  background-image: radial-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
+  background-size: calc(10 * 1px) calc(10 * 1px);
+}
+
+.lines {
+  --pat-val: 7;
+  background-image: linear-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px), linear-gradient(to right, hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
+.stripes {
+  --pat-val: 7;
+  background-image: linear-gradient(90deg, transparent 50%, hsl(0, 0%, calc(var(--pat-val) * 11%)) 50%);
+  background-size: 10px 10px;
+}

10-a-simple-json-api/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name="description" content="htmx test">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
+
+  <link href="/blockstart.css" rel="stylesheet">
+
+  <title>htmx test</title>
+</head>
+
+
+<body>
+  <block>
+    <p>Click Me</p>
+  </block>
+</body>
+</html>