- Dan 🎮
- Renata 🐰
- Roshan 🙆🏾
- Gillian 🍬
- git clone this repo
npm install
to set up node modules- Initialise a local database
- Create .env file in project route
- Add DB_URL/TEST_DB_URL values to your .env
- Simple web app with a node server and a database
- Database comes with schema
- Database hosted on Heroku, or locally
- Build script for your database
- Security concerns appropriately considered
- Content dynamic, but DOM manipulation kept to a minimum
- Clear user journey
- Test your server routes with supertest
- Set up a test database so that you can test your database queries
const backendCall = (url, method, data, cb) => {
const xml = new XMLHttpRequest();
xml.onreadystatechange = () => {
if (xml.readyState === 4 && xml.status === 200) {
let apiResponse = JSON.parse(xml.responseText);
cb(apiResponse);
}
};
xml.open(method, url, true);
xml.send();
};
We later updated this to the following:
const backendCall = (url, method, data, cb) => {
const xml = new XMLHttpRequest();
xml.onload = () => {
if (xml.status.toString().startsWith('2')) {
if (xml.responseText) {
let apiResponse = JSON.parse(xml.responseText);
cb(apiResponse);
}
}
};
xml.open(method, url, true);
xml.send(data);
};
This is to enable the function:
a) to work with any 2xx status code (because we were serving a 201 on successful POST)
b) to work in the case that the response has no body (because for safety reasons, our POST does not return anything)
Requiring a file also runs that file - which you don't normally notice, but we saw surprise console logs in our testing
Radio button stuff
<label for="power-id-1" class="char-form__radio-label">
<input
type="radio"
class="char-form__radio-input"
name="power-id"
value="1"
id="power-id-1"
/>
<img
src="public/img/electricity.png"
alt="electricity power icon"
class="char-form__radio-img"
/>
</label>
.char-form__radio-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.char-form__radio-img {
cursor: pointer;
width: 88px;
height: 88px;
}
.char-form__radio-input:checked + img {
outline: 2px solid white;
}
-
Generally ok, although easy to make them fail when there are so many moving pieces
-
Weird 10s hang when query includes 'WHEN'!!