3 ms·
at your command prompt with latest Node and npm installed: mkdir -p non-obnoxious-web-server/atc-test-plans cd non-obnoxious-web-server mkdir src mkdir
by graderjs 4y ago
at your command prompt with latest Node and npm installed:
mkdir -p non-obnoxious-web-server/atc-test-plans
cd non-obnoxious-web-server
mkdir src
mkdir public
npm i --save express
Then make the following files...
src/index.mjs:
import fs from 'fs'
import path from 'path'
import express from 'express'
const app = express()
app.use(express.static('public', {extensions: ['html']}))
app.use(express.urlencoded({extended: true}));
app.post('/atc-test-plan/new', (req, res) => {
const date = `${Date.now()}.${performance.now()}`;
try {
fs.writeFileSync(
path.resolve('atc-test-plans', `${date}.json`),
JSON.stringify(req.body, null, 2) + '\n'
);
res.send(`Thank you, ${req.body.firstName}! Your ATC test plan is saved.`);
} catch(e) {
console.warn(e);
res.status(400).send(`Your data contained some errors. Please review with your supervisor`);
}
});
app.listen(80, err => {
if ( err ) {
throw err;
}
console.log(`Server up at: ${new Date}`);
});
public/index.html:
<a href=/file-atc-test-plan>File a new ATC test plan!</a>
public/file-atc-test-plan.html:
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<title>ATC Test Plan</title>
<style>
/* whatever you like */
:root {
--my-color-1: lime;
--my-color-2: aqua;
/* etc */
}
</style>
<form method=POST action=/atc-test-plan/new>
<h1>ATC Test Plan</h1>
<fieldset>
<legend>About You</legend>
<p>
<label>
Your first name
<input type=text name=firstName autocomplete=given-name
required
placeholder="Jane"
>
</label>
<p>
<label>
Your family name
<input type=text name=lastName autocomplete=family-name
required
placeholder="Citizen"
>
</label>
<p>
<label>
Your callsign
<input type=text name=callsign autocomplete=nickname
placeholder="Maverick"
>
</label>
<p>
<label>
Your email
<input type=email name=email autocomplete=email
required
placeholder="maverickj@flightschool.skies"
>
</label>
</fieldset>
<fieldset>
<legend>About your ATC Test Plan</legend>
<!-- I'm not an expert on ATC test plans so I'll leave this up to you! -->
</fieldset>
<p>
<button type=reset onclick=DoubleCheck(event);>Clear plan</button>
<button>Save plan</button>
</form>
<script>
function DoubleCheck(click) {
const doIt = confirm('Are you sure?');
if ( ! doIt ) {
click.preventDefault();
}
}
</script>
Once you have done all that, at your command prompt again, do:
node src/index.mjs
Hopefully that gets you started. Enjoy your journey! :)
PS - I did this because I love HTML, JS, CSS and their "natural" style.