create function car search in searchCar.js

Should add an input value change event listener, js code should be implemented in index.js file.

Firstly I'm not sure why the last one is a 500 and the others are 404's.

But mainly, this is a lot of repeated code and also the error pages is kinda boring 🙃

1. You could create a function that does this - say send404 which will take a response and send back your 404. Or you could create more generic sendErrorHTML which could take an error code and a response and send back the correct html.
2. You could also create a 404.html file in your public folder and style it nicely and things and then serve that whenever there is an error instead of the in line html writing you do.

Define array of cars in cars.json

• env file has sensitive and your secure data, you mustn't push it

create test.js file

in router.js
else
{
handlers.publicHandler(request,response);
}
i think the code should be like this:

else if(endpoint.includes('/public/')){
handlers.publichandler(request, response);
}
else {
response.writeHead(404, {'Content-Type': 'text/html'})
response.end('

Page Not Found

The font style is asymmetric
should be used at most two types

ERROR URL

create paths in our website for main page and get search , and one for page not found .

handler function to handle routes request and return response .

When I press enter the page errors - you should have a think about what the page to do if you press enter during the search i.e. disable it or add additional tab through functionality in a future project 🐢

Before starting projects have a look at dribbble for inspiration - you'll learn a lot from the designers on there about composition, colour and typography.

1. Imagery: There's a great opportunity in this project to use high quality/engaging imagery or animation. Have a look at unsplash for car wallpapers (in landscape orientation). Think about the content of the image, is it exciting to look at?

2. Fonts: Have a look at your fonts again. The input and results font are different to the other ones you've used. Research some modern sans serif fonts for the project on google fonts - there are lot of great ones! I would use just one font for this project as there's very little text. You can change the size and weight (normal, bold etc) to add hierarchy.

Add index.html css desgin, css code should be implemented to the index.css file.

Make sure you are consistent with what javascript you are using.

this is function declaration is es5

and this one, 4 lines later, is es6.

A good rule is to use es5 on the front end and then es6 on the backend but if you want to use es6 everywhere that is probably ok (although front end stuff might break on some browsers).

In your back end the variable names are good and quite explicit about what the code does.

But in front end, less so:

what does arrayres mean? when I see this in dom.js I have to come and look at this file to know what it means. if it was named something like makeSuggestionsRequest then this would be much more clear.

Secondly

Try to make sure you are using camelCase consistently in your code for variables

Is 100% ,, well Done !!
Go ahead

The src file includes quite a lot of different files; I would have your server files, tests and cars.json/search cars in separate folders to keep things organised and scalable ✨

e.g.

- server
---- server.js
---- router.js
---- handlers.js

- test
---- test.js

- searchCars
---- searchCars.js
---- cars.json

Add suggestions to the input, code should be implemented into the dom.js file.

create server and determine the port to server .

const suggestionHandler=(request,response)=>{
  const value=request.url.split('/')[2];
  if(value===undefined){
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.end('error');
    return;
  }
  else{
    const result= searchCars(value);
    var convertedData = JSON.stringify(result);
    console.log({result})


    console.log({convertedData});
    response.writeHead(200,{'Content-Type': 'application/json'});
    //response.write();
    response.end(convertedData);
  }

This is the handler that deals with the suggestion request - so the front end makes a request, and expects an array back, which it will then put on the dom.

However, here, you have said that if there is an error with the value being undefined, to send back a 404.

This would be ok, if on your front end you had a check for a 404 in the request, but you do not. On your front end, what will happen is that you will try to do response.json but because this isn't a JSON (it's just plain text) it will error and then be console.log'd.

It would be good instead to give your user some feedback! One thing you could do, is structure your response from the backend as an object that has the same structure whether the results are good or bad - eg:

{
success:true,
results:[Car, car, car]
}

Then on your front end the first thing you do is check for success === true and if so you display the results. If success:false which is what you would send back if there was an error on the back end, then you can send a nice friendly message to the user to let them know.

The beauty of writing your own back end is that you know what errors and what data structure to expect from your requests on the front end

not really good, it's not compatible with mobile devices !!

Add page (html) design to the index.html file.

Your website is more friendly and likeable, my comment is concerning of you may need to clean your code of logs and comments lines which there is a lot of console.log().

Prepare files for deployment by adding environment files and Procfile, to deploy it into heroku hosting.