fac-11 / rrmba

Jazzy

RRMBa

WHY

How many times you would have wished you knew the status of the tube line you were going to take? Maybe if you had known you were going to feel that frustrated you would have changed your route!

We felt it was useful to display the information about the status of the tubes lines as well as illustrating how you would feel after taking them.

WHAT

In our website, when clicking on the tube line that you will be using, the information regarding the status of the line will be displayed as well as an image indicating you how you would feel after using it.

HOW

Software Architecture

---

File Structure

---

We decided to divide our code in 4 folders:

• HTML
• CSS
• Logic - where our pure functions (logic.js), tests (logic.test.js) and Dom.js will be written.
• Resources
• ReadMe

There was a initial discussion about creating another file inside logic called API.js where our not-pure functions will be written. That would allow us to have 100 % test coverage and have all the pure functions together. However, to make the code more readable, we decided not to take this approach.

Logic

---

Once the pseudocode was ready to be implemented, each pair started writing tests for a couple of functions. Once the test failed (you all know how TDD works ;) ), we started writing the code for our pure and not to so pure (ex. apicall) functions.

As a consequence of our not pure functions, once we got the data from the server, the tests do not longer pass.

A great function that helped our code being clearer and work better was the waterfall function, which passes an array of functions as first argument, and an array of urls as a second one which will run in series.

DOM

---

Almost all the magic happened in our logic file. However, we needed two main things to make it work:

• Our event listener which will get the data that the user has selected.
• And our render function which will get the data obtained by the functions in our logic file.

CSS

---

We did not go crazy with the css, some cool details could be:

• Tube lines' style so they matched the underground colors: For this, we created radio buttons in our form in order to style them properly later on in our stylesheet.

Ahh..and we used the London Tube font! =)

Do you want to run this project in your own computer?

In your terminal, you should run the following commands:

• _git clone https://github.com/FAC-11/RRMBa.git _
• npm i
• if you want to run the tests, run npm test or tape ....

Learning

Styling Radio buttons

Waterfall functions

XML HttpRequest

rrmba's Issues

Really fun app!

Good idea, amazing execution, bold design, I love it guys!! ❤️ 🍺 🌵 💯

stilying the website

use css to make the website look prettier

Write test checking for mutation in URL functions

Checking purity of functions

Update the line names

here is a list of the line ids that the tfl api uses - can we update our HTML form to return these? (this might mean we don't need the parsing name function in logic.js and have to cut out a couple of lines like TFL rail)

exports.lines = {

  | "bakerloo": "Bakerloo",
  | "central": "Central",
  | "circle": "Circle",
  | "district": "District",
  | "hammersmith-city": "Hammersmith & City",
  | "jubilee": "Jubilee",
  | "metropolitan": "Metropolitan",
  | "northern": "Northern",
  | "piccadilly": "Piccadilly",
  | "victoria": "Victoria",
  | "waterloo-city": "Waterloo & City"
  | };

Make tflCallback and giphyCallback using TDD

Create functions using TDD

Add file structure

Create basic file structure as a template

<h2> tag properties don't retrieve actual names of lines

Relates to user-friendliness of the app

<h2> tag properties should change colour depending on line

This will make for a better design

could we use iife for all dom.js content?

Currently we expose the render function for easy access in the global scope by simply putting it outside the iife. We could avoid exposing it all together by putting everything inside the iife and passing the render function to logicObj.init as a callback parameter, which init passes towaterfall, and which is called when waterfall has completed the tasks array

is there a better solution than looping over array of radio buttons in logic.js?

Relates line.
Could this be done by using event bubbling?
e.g. set listener on parent element and use event.target.value?

waterfall solution occasionally causes bugs

Open console and submit line lookup repeatedly to see error. Irregular nature of error suggests that it may be related to api calls, as they take variable times.

could css be refactored?

Seem to be a few things possibly not needed, could we go over whole css file and refactor?

Mock data in tests

There's quite a lot of mock API data in your tests file. This makes the tests hard to read.

Maybe think about alternative ways to organise this. For example, you could have all the mock data saved in another file, and use variables to refer to it. Or you could have global variables at the top of your file.

font - use the tfl-style one!

@maxgerber if you have time, can you add your nice font to the site?

Make tflRequest and giphyRequest functions using TDD

Create functions using TDD

Suggestion

Would be nice to see the words "Good service" refreshing when you click on another line so that you know it updates with the correct information.

Accessibility: contrast ratio on tram and overground blocks

There's a yellow warning as follows:

Text elements should have a reasonable contrast ratio (2)

<span class=​"line-text">​London Overground​​
<span class=​"line-text">​Tram​​

Proposed solution: get TFL to change their official overground and tram lines colours? 😅

single click triggers 2 events causing double api calls and double renders

On clicks after the first (not including the first), two events fire and thus init is called twice. This triggers an api call based on the line clicked, the result of which is rendered, and then a second api call and render for the same line.
A quick fix is to set checked to false as in this snippet from dom.js:

form.addEventListener( 'click', function( e ) {
    tubeLines.forEach( function( line ) {
     if ( line.checked ) {
        line.checked = false;
        logicObj.init( line.value );

This means that the second time forEach loops it does not find a truthy line.checked.

But we should really fix the root cause.
The event.target for the two events are different; the event.target that gets through first is the containing label element, and second is the input element. An answer to this stackoverflow question suggests that might want to consider making label and input elements siblings, rather than making label the containing element.
This relates to #50, perhaps the two could be fixed together.

Stretch goal: adding information from tfl if there's further information about disruption

The TFL api gives a 'reason' when there are problems:

Perhaps we could have a stretch goal where we add this reason to our results object if it is included, and then render it in the DOM.

Accessibility: consider adding title to nav and make tube lines tab-able

Two related things:

When running HTML outliner we can see that the nav containing your lines is untitled - would be good to have a helpful name here.

Seems we can't tab through any of the lines - when running Chromevox it only voices 'Hades'.

Refactor html option tags so that the value attributes are usable by logic.js

We can also add title and aria-label attributes to these tags to achieve the accessible functionality we originally wanted. This will enable us to remove some unnecessary javascript code.

complete render function in dom.js

take the resultsObject created by logic.js functions and render results appropriately in the DOM

create a map.js file

this will contain the mapping object between tfl status codes and giphy search terms

• declare the variable: var mapReference = [{line-status1: search term1}...]
• declare map.js in the html file, along with other js files
• mapReference will be available as a global object in logic.js
  (it worked in another project I've done)

make sure output renders after the submit button

at the moment, it seems to render in the submit button space

READ ME to be written

Write ReadMe with:

-What
-Why
-How
-Resources

makeTlfUrl and makeGippyUrl functions and TDD

Create functions using TDD

Great project!

Not an issue just love the project it's hilarious 😄. Right actual issues now

complete event listener in dom.js

calling on information from form, sending it to logic.js

decide on search terms for Giphy

group discussion time!
What are appropriate search terms for the different TFL status messages?

make user stories

what do we want our different users to experience

think about accessibility

change the text that gets called into the h2

at the moment, something like 'waterloo-city' comes up - maybe we could do a lookup?

Accessibility: provide text alternative for gifs?

Another yellow warning:

[Warning] Images should have a text alternative or presentational role (1)

<img src(unknown) class=​"giphy">​

TFLCallback function test - line 80 of logic.test.js

Do we need to include a part of the object within the test?

Shouldn't we refactor this? - line 80

Ok curiosity not quite an issue

https://github.com/FAC-11/RRMBa/blob/master/js/lines.js#L19

Hey guys, just curious why you have this if statement is it so it does throw an error because the DOM looks at this file?

changes to app in accordance with #39 break test suite

changes to app in accordance with #39 prevent test suite from running.

Well Organised Css One little thing

Good use of a thorough css reset and structure generally of your CSS file, in the interest of the DRY principle (Do Not Repeat yourself) your browse loads in 10 duplicate lines of color white It seems like a small thing but how quickly your css loads depends on how big it is this in turn impacts the performance of your webpage youll have future talks on performance I hope but its a good habit to get into because users are not very patient

resources
https://developers.google.com/web/fundamentals/performance/
http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/

Error handling

Nice app and great work on the logic. It would be good to see some more handling of errors. In the waterfall, if one thing goes wrong it will break the whole app.

update form with tfl input

make sure our form output matches the tube line names in the TFL api

make sure the site is working

all the functions are written, but the page is not rendering - time for some debugging!

Add test functionality

Install tape and tap-spec for TDD

Do we want to make our functions purer?

For example, as our makeGiphyRequest function does not take the resultsObject as an argument, we cannot test whether it mutates it. If it did take this data as an argument, we could test for mutation using TDD and an example object.

https://github.com/FAC-11/RRMBa/blob/master/js/logic.js#L61

It's up to us whether we want to prioritise pure functions/TDD test coverage.

Remove unused files

perhaps remove unused files for example the unused jpegs as this could affect website performance

create a skeleton of code in dom.js

include the Event Listener function, the render(results) function and return render from the IFFE

Accessibility check

Run an HTML accessibility audit:

• in particular, make sure that the form is accessible via screen reader
• is there a voiceover option for the Giphy image?

Tests not running

Guys, for some reason couldn't run your tests :(

Put entire example API tests into external js files

So that we can properly test our callback functions we need to have a proper API response to work with. For readability we should put these into seperate files

Project Instructions

Hey guys I love your readme although for next time I would always get in the habit of document how people should run your projects locally e.g.

• git clone {REPO_NAME}
• npm i
• To run test run npm test or tape ....

The logic behind this is you dont know who is going to be looking at your projects/future products and its definitely not immediately obvious especially if I were say a java developer for example who was interested and maybe wanted to hire a node developer 😆 😉

Make apiCall function

Create function

Logic.js outline

Functions added to logic. js in order to start with the TDD

what the ..name??

Great work guys but personally I would avoid any association with the world of the dead (i.e. Hades)