Skip to content

fac18/week6-coda-squall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SQUALL

Build Status

codecov


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:

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)


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="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

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