README.md

#Project Fear 🤯

---

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 📼

• $ git clone [email protected]:fac-17/week-5-dgjm.git
• $ npm install
• $ npm start

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 ⏱

• 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 🙈

---

• 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