Skip to content

fac-17/week-5-dgjm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

#Project Fear 🀯

Build Status


Team

Gigi πŸ˜ƒ
Collete πŸ˜†
Victor 😎
Andy πŸ˜‰


Tech stack πŸ‘€

  1. Front-end(Vanilla.js, CSS, HTML)
  2. Back-end(Node.js)
  3. Git & GitHub
  4. Testing (Nock, Tape, Supertest)
  5. Continous Integration with Travis
  6. Deployment with Heroku
  7. Rates API

Installation & Set-up πŸ“Ό

Bonus:

  • $ npm test for tests
  • $ npm run lint for lint warnings/errors

User Journey πŸš€

  • Display live information on the Pound vs other currencies πŸ’°

  • Display a live countdown to Brexit ⏱ Boris on zipline

  • Allow users to watch the UK economy crash in real time.. or not #projectfear 😱


Stretch goals πŸ€Έβ€β™€οΈ

  • Display a random gif of Boris Johnson looking like a fool 🀑
  • Dislay live departures from Heathrow Airport to more exotic peaceful lands 🌴

Steps πŸšΆβ€β™‚οΈ

  • Set up a node server

  • Have a router and a handler

  • Serve a basic home page (html, css, vanilla JS)

  • Handle user input which triggers a requestour server

  • Test routes

  • Use CI

  • Deploy app

  • Display build staus on README

  • Write API call

  • Integrate API call to the back-end

  • Successfully get response from API call

  • Create stream receiving API call response

  • Filter API call results to display on site

  • Install supertest

  • Create fake server calls on supertest

  • Create dropdown menu in html

  • Integrate return data to html (DOM)

  • Style html output in css

  • Create countdown to deportation

  • Integrate countdown to front-end

  • (stretch) Add input form validation to the back-end

  • (stretch) Create random gif selector

  • (stretch) Integrate random gif to the bck-end


What we struggled with πŸ™ˆ

programmer-morale-graph


  • Making the backend and frontend communicate with each other (at first)
  • Improving on the api function we looked at this week
  • npm issues - one computer reverting to old version of npm caused bugs
  • Our site breaking unexpectedly at the end of the day

Code snippets πŸ‘Ύ

Dodging the https trap

const http = require("http");
const https = require("https");

const myRequest = (url, cb) => {
  const protocol = url.includes("https") ? https : http;
  protocol
    .get(url, response => {
        // code....
    })
    .on("error", err => cb(err));
};

Countdown function

function updateCountdown() {
  var deadline = new Date("oct 31, 2019, 23:00:00").getTime();
  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);
  document.getElementById("countdown-time").innerText =
  `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`;
}

2015 rates comparison

var oldExchangeRates = {
  EUR: "1.44",
  USD: "1.56",
  JPY: "192.71",
  // etc
};

function oldRates(input) {
  let input2 = input;
  document.getElementById("old-rate").innerText =
    "On 21st July 2015, 1 GBP was " +
    oldExchangeRates[input2] + " " + input2 + ".";
}

Testing home route

test("home route should return status code 200", t => {
  supertest(router)
    .get("/")
    .expect(200)
    .expect("Content-type", /html/)
    .end((err, res) => {
      t.error(err);
      t.equal(res.statusCode, 200, "should return 200");
      t.end();
    });
});

Testing 404 route

test("404 route", t => {
  supertest(router)
    .get("/fhkwefhe")
    .expect(404)
    .end((err, res) => {
      t.error(err);
      t.equal(
        res.text,
        `<h1>404 page not found</h1>`,
        "Should return 404 page not found"
      );
      t.end();
    });
});

What we would have liked to improve 🏹

  • We weren't able to use input validation to the back-end with our site design.
  • Didn't have time to finish our stretch goals.
  • Provide exchange rate variation percentages since 2015.

Questions from us 🧐

  • Will we get a red, white and blue Brexit?

PS: Thanks Babyfather for letting us rip off his album cover

(We didn't actually ask πŸ™Š)

SLIDES