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.

master
Zed A. Shaw 6 months ago
parent 858fb4d370
commit c2f61b9215
  1. 19
      10-a-simple-json-api/README.md
  2. 23
      10-a-simple-json-api/api.js
  3. 1513
      10-a-simple-json-api/package-lock.json
  4. 16
      10-a-simple-json-api/package.json
  5. 200
      10-a-simple-json-api/public/blockstart.css
  6. 20
      10-a-simple-json-api/public/index.html

@ -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.

@ -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}`);
});

File diff suppressed because it is too large Load Diff

@ -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"
}
}

@ -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;
}

@ -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>
Loading…
Cancel
Save