SQUALL

We are:

• Dan 🎮
• Renata 🐰
• Roshan 🙆🏾
• Gillian 🍬

Installation Guide

1. git clone this repo
2. npm install to set up node modules
3. Initialise a local database
4. Create .env file in project route
5. 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

Brainstorm

Prototype

Schema

Things we learned

Reusable XML requests

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:

b) to work in the case that the response has no body (because for safety reasons, our POST does not return anything)

Other things we learnt

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

HTML

<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="https://github.com/fac18/week6-coda-squall/raw/master/public/img/electricity.png"
              alt="electricity power icon"
              class="char-form__radio-img"
            />
          </label>

CSS

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

Accessibility

CSS

Testing

• Generally ok, although easy to make them fail when there are so many moving pieces

• Weird 10s hang when query includes 'WHEN'!!

THANK YOU