facn2 / alpha.haml Goto Github PK

      file.toLowerCase().split(",").forEach((star) => {
        if ((star.indexOf(str) !== -1) && (result.length <= 10)) {
          result.push(star);
        }
      });

The above loop checks the whole file every time, even after a set of matches has been found. For loops have break so could be more appropriate here...

The search bar and header "jump" when the user type, maybe you can make it fixed, for better user experience

We want it to exist. We will make it happen.

Link to the application is missing.

This is more personal preference thing (I ❤️ destructuring).

This:

const { handleHome, handleAuto, handleIndex, handleCss, handleFavicon } = require('./handlers');

const router = (request, response) => {
  const url = request.url;
  if (url === '/') {
    handleHome(response);
  } else if (url.indexOf('/auto') !== -1) {
    handleAuto(request, response);
  } else if (url.indexOf('/index.js') !== -1) {
    handleIndex(request, response);
  } else if (url.indexOf('/main.css') !== -1) {
    handleCSS(request, response);
  } else if (url.indexOf('/favicon.ico') !== -1) {
    handleFavicon(request, response);
  } else {
    response.writeHead(404, "Content-Type:text/html");
    response.end("<h1>Heather fucked up</h1>");
  }
}

module.exports = router;

Is functionally the same as:

const handlers = require('./handlers');

const router = (request, response) => {
  const url = request.url;
  
  if (url === '/') {
    handlers.handleHome(response);
  } else if (url.indexOf('/auto') !== -1) {
    handlers.handleAuto(request, response);
  } else if (url.indexOf('/index.js') !== -1) {
    handlers.handleIndex(request, response);
  } else if (url.indexOf('/main.css') !== -1) {
    handlers.handleCSS(request, response);
  } else if (url.indexOf('/favicon.ico') !== -1) {
    handlers.handleFavicon(request, response);
  } else {
    response.writeHead(404, "Content-Type:text/html");
    response.end("<h1>Heather fucked up</h1>");
  }
}

module.exports = router;

please create a beautiful star favicon

The blue border for the body is on the search results when there are few results. Maybe you can remove it or make the height fixed so it is always under the results.

In its current form you don't even necessarily need a form at all in your html file - you could just have an input element with an event listener attached.

create the first version of the xhr req and start dom manipulation

the background image is not showing up

It'd be nice to have slightly purer functions - separate out the xhr request into its own function, and pass it a render function as a callback. Makes everything a bit easier to read too :)

The commit history is mostly really nice!

Almost every one references an issue. With just a tiny bit more work, you'd have had every single commit linked to an issue 👍

On a related note, I think @matthewdking has a problem with git because he's not showing up on the graph but definitely made commits:

FAC11 had the same problem and there's a super easy fix, just grab me later and I'll sort it.

Please add server-side files in src folder

Your app needs some tests!

You don't need to test the actual server (that's next week) but there's definitely some functionality that can be tested.

For example this bit of logic could be pulled out to a separate function and tested.

Since it's an autocomplete, ideally you'd want to check the start of all the results in your text file, rather than looking for a match anywhere within each word. It would also be nice to be able to select a result and have it displayed in the search box or elsewhere.

You can group all the files in "public" to one function, using an object with the different files, instead of creating multiple functions for that.

Line20-Line26
Line100-Line102

The best way to save images that are just for the readme is to upload them to a github issue and then copy-paste the resulting link:

That way when people git clone the repo it doesn't come with a bunch of large images that aren't needed for the project to run.

Should the search bar be in the middle?
Because it's not :/

The search box is very big and the font size is pretty small. I would suggest changing one of them to match the other.

Please add a README.md and create files in each folders

All form inputs should have attached labels for improved accessibility.

https://github.com/facn2/Alpha.HAML/blob/master/public/index.html#L19-L26

Template literals are es6 so shouldn't be used on the front-end:

https://github.com/facn2/Alpha.HAML/blob/master/public/index.js#L12

At the moment the autocomplete is coming back with results but they're not feeding into the form. Ideally for this project you should have an autocomplete that manipulates an input. For example:

I love the images! Can you use them? :)

Maybe start by adding a test file

Maybe could have simplified the handlers.js file by grouping together functions that seem to do almost the same thing.

Name of starts are being sorted in a wrong way.
Please refactor your code so that they are sorted more relevantly

no route for css so getting an error

Please add basic function in backend to start testing

Leads to nothing...

Remove the children every time we make changes to the input

The site is not responsive :(

Super minor thing but if you add http:// to the console.log in server.js it allows people to open the page directly from the command line:

I'm not entirely sure how it's working - eg, if I type 'j' it gives me anything with j anywhere in it, but for others it only gives me at the start of a word

Results are under the blue line, and so small and hard to readable

✌️

fix the case insensitivity

This is just a suggestion, but I think it is clearer and more useful if the results are the values that start with the user input and not values that have the input somewhere. But it is a matter of preference...

when you write for example "lo" it shows everything with d and e results.. and you can't anything start with "l" or "lo"