fac-11/week-4-taaa

https://stormy-dawn-58180.herokuapp.com/

week-4-taaa's Issues

Compare Function

Create a function that takes in a string and an array of strings and returns all matching elements in an array of strings.

Create Data Set

Research datasets of words online and produce with a JSON or an array of strings

Could server-side naming be clearer?

We're finding the names of the server-side modules a little confusing. Handlers.js contains both routers and handling functionality and Api.js contains handling functionality. Is the function of apiRequest() to make a request or to handle the response? Could backend.js have a more descriptive name?

The examples we were given used the convention server - router - handler. Obviously, we don't have to follow conventions, but it might make code easier for other people to read.

Nested "sendTextToApi" function

This:

var logic = {

  sendTextToApi: function(callback) {

    var txt = document.getElementById('myInput').value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // appendAList(xhr.responseText);
        callback(JSON.parse(xhr.responseText));
      }
    };

    xhr.open("GET", '/API?' + txt, true);
    xhr.send();
  }
}

is functionally the same as:

  function sendTextToApi(callback) {

    var txt = document.getElementById('myInput').value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // appendAList(xhr.responseText);
        callback(JSON.parse(xhr.responseText));
      }
    };

    xhr.open("GET", '/API?' + txt, true);
    xhr.send();
  }

Except you don't need to call it as a method.

Readability of ternary operators

This is more of a personal opinion issue but ternary operators are often harder to read, especially when they're long and kept to one line.

Using the example from backend.js:

var shrunkResults = arrayOfStrings.length <=  5 ? arrayOfStrings : arrayOfStrings.slice(0,5);

That goes over the 80 character soft line limit and isn't (at least for me) instantly scan-able. I'm not you shouldn't use ternary operators, and this example is actually a great use-case, but where possible I try to keep code clarity by adding line-breaks or just using if statements, etc:

var shrunkResults =  arrayOfStrings.length <= 5 ? 
      arrayOfStrings : 
      arrayOfStrings.slice(0, 5);

WTF server

Make the server do the stuff

Create README.md answering the project questions

Structure

Show your readme:
Talk through the Why, What, How of your project

How did you split up the work?

How did you choose to pair?

Walk us through the UX (user experience) i.e. demo your website

How well does it conform to your brief - the user stories

Walk us through your code. Prioritise the things you learned that were new to you, which the rest of your cohort could benefit from hearing about:
something you're proud of
something that you found really hard / struggled with

Always commit to issues

There are a lot of unreferenced commits in your project:

It's really important for any users looking over the history of your project to see both nice informative commit messages and hashed issue links for every single commit.

Create a server

Create a server with handlers so that it can serve front end files.

Dropdown still appears with other options when the chosen option is selected

Wouldn't it be nicer if the other options in the dropdown menu disappeared when clicking on the selected ones?

refactor server

modularise handlers in server.js file

Stretch Goals

• sort return array on criteria
• make beautiful

Dom manipulation function

Function will take an array of string and append to the dom either as a html dropdown or a an appended li/span list

Function to extract data in Front end

Function will take a json and extract an array of strings.

Clarifying if/else logic in handlers.js

Could the code be clarified into a single if/if-else/.../else structure?

I had no idea there were that many dinosaurs O_O

Really love the idea + site 👍 😻

background image slow to load

Could you use a smaller file to speed your page loading? It might be difficult to make it look nice on larger browser windows.

The image background takes a load of time to load

You can save it as a Jpeg and use progressive rendering for it.

Accessible dropdown :heart:

I love that you made the dropdown tab-able! It works so nicely!

It's a little weird that it only works on tab - the usual expected behaviour for dropdowns is that the arrow keys can be used to navigate through options.

Another kinda related issue is that the input doesn't regain focus when you press enter on an autocomplete result. Current version (I had to click to gain focus at the end):

Optimising backend.js

Currently the filter function iterates over the entire array, but only five results are then passed on.

Perhaps you could use a for loop with a break in it after the results array length reaches five.

Replace loop in handlers.js

At the moment you're checking if(endpoint in contentType)

You could instead just instantiate contentType with endpoint for every request:

const contentType = {
    // '/favicon.ico': 'image/x-icon',
    '/index.html': 'text/html',
    '/main.css': 'text/css',
    '/dom.js': 'application/javascript',
    '/logic.js': 'application/javascript',
    '/background.jpg': 'image/jpeg',
}[endpoint];

This would remove the need for a loop - you'd just need to check if(contentType). It would also mean you could replace every further reference of contentType[endpoint] with just contentType

api.js lint errors

There are a bunch of linter errors in api.js.

A lot of them are not strictly necessary, but if fixed would produce cleaner code:

vs

Add a favicon

Add favicon to our project to remove the errors in our server

error handling in logic.js

At the moment, logic.js only has a case if 200 is returned. The server allows for 404 to be sent, but we can't see where xhr will make use of it.

When changing to smaller screens the text goes outside the box

When changing to smaller screens, the text in the dropdown menu goes outside the input-box

redundant shrink function

Shrink function is not being used re merge #55

Function to stringify results

Function will take an array and put it into an object - then stringify using json.parse

Setup Heroku

Look into how to set up Heroku and setup

DOM input

Creating a function that takes the input text on keypress or onchange

Function to shrink array length

Function will take an array and return an array of 5 elements.

If original array is less than 5 it will return original array.

Research - transfering data

Is there a better way than JSON to transfer array data over the internet

don't give options when no text in entry box

Add a bit to selector/ shrinker function to return a zero array if search text is empty

Heroku port issue

Change the default http port for server to run on heroku

Make tests

Make tests to test all non-trivial logic only functions,
ie not functions which act on DOM, and not functions which make callbacks or touch the network.

File Architecture

Create folder for Public with:

• index.html
• main.css
• logic.js
• dom.js

Create folder for src with:

• server.js
• handlers.js
• backend.js

create folder Tests with:

• tests.js

Populate index.html with basic boilerplate with:

• heading
• an input box

Initialise node and install:

• tape
• tap-spec
• istanbul
• eslint